Understanding Code

Code As Interface: Loops

A preliminary investigation of using code as the interface to a trace of a program's execution. The example calculates the number of primes less than a number n with two nested loops: the outer iterates i through each number from 2 to n; the inner checks each factor from 2 to (i / 2). Below find the execution of the code on the input 6.

Interactive Example

Instructions: Click the circular arrows to cycle backwards () and forwards () through the iterations of the loop. 

int count_primes(int n<=>6)<=>3
{
	int num_primes<-0 = 0;


     for (i<-2 = 2; i<=>2 < n<=>6; i = i + 1) {
		boolean prime<-true = true;

	     for (factor<-2 = 2; factor<=>2 <= i<=>2 / 2; factor = factor + 1)
			if (i % factor == 0)
				prime = false;

		if (prime<=>true)
			num_primes<-1 = num_primes<=>0 + 1;
	}

	return num_primes<=>3;
}

Explanation

The interface below is almost identical to the original source code. The double arrows (<=>) connect the name of a variable to its value at the time, and the single arrows (<-) show the storing of a value into a variable. Dymanic values (occuring during program execution) are shown in red. Unreached code (e.g. the body of an if statement whose condition is false) is grayed out. The green circular arrows cycle backwards () and forwards () through the iterations of a loop.

Time primarily runs downwards. That is, the statements are executed in the standard way, and the values shown at each point indicate the current state during the execution of the containing statement. So, the value, 3, of num_primes shown in the return statement is that which is has after the completions of all iterations of the loop. Cycillng through the iterations with the arrows is somewhat analogous to looking through various frames of a filmstrip: the action is over, but we may review its state at various points in time.

Further Thoughts

How to offer a list of all iterations through a loop? How and if to show the overall results of loop? Should there be an indication near the loop test of its failure (or success)? Should there be a way to see some or all iterations of the loop at once? How does this interact with syntax highlighting? How to distinguish variable names, keywords, function names?