Design Computation


  1. Loops
    1. “For” loops
    2. More complex moving graphics
    3. “For” loops and arrays
  2. Loops and Arrays are Powerful
  3. More On Arrays
    1. Parallel Arrays
    2. Multi-Dimensional Arrays

“For” Loops

A “for-loop” is a counting mechanism. It executes and a series of steps, then changes the value of the iterating variable. It continues to execute the code block repeatedly until the condition in the loop equals false.

Loops are mechanisms to leverage the power of automation and multiplicity.

“For-loops” are a great way to repeat a set of commands many times and get a variable to change. If you want to draw ten squares, for instance, you can either write ten rect() commands, or write a single for-loop to draw all ten for you.

Try this:

size( 500,200 );
for( int i=0; i < 10; i++ ){
  rect( i*30, 10, 20, 20 );

Here’s an interpretation of what the for-loop statement means:

for( int i=0; i < 10; i++ ){ 

1) Define a variable i, make it store an integer, start at 0.

2) Continue the loop while the value of “i” is less than 10. (This is known a “condition”, which we haven’t discussed in detail yet. For now, just use this format, and place to the right of the less-than sign a maximum value you don’t want the variable to exceed.)

3) Do the stuff between the braces each loop: { … }

4) At the end of each loop, increase “i” by 1.


You can use any variable name, not only “i”, but it is the most common variable used with arrays, which we will experiment with on the next page.

This is a mechanism that falls under “control flow,” which refers to the means that a programming language provides to control how the more salient statements are executed. A “for-loop” really doesn’t do anything substantial by itself – it’s really just a way of executing a pre-defined set of statements repetitively.

A previous example, simplified by a for-loop.

void setup(){
  size(700, 350);

void draw(){
  stroke( 0, 0, 0, 100 );
  for( int i=0; i < 90; i++ ){
    bezier( i*10, 50, 100, 100, 200, 300, 300+i, 300 );

Try counting by a different number:

for( float t=0.0; t < TWO_PI; t+=0.1 ){
  line( 200, 100, 200 + 100*cos(t), 100 + 100*sin(t) );

Loops and Arrays Are Powerful

With loops added, now we have a better idea of what’s going on here when we look at the code.

This example is called “looping over an array”. With one loop, you can fill/update/whatever any array of any size.

int counts[] = new int[6];

for( int i=0; i < counts.length; i++ ) {
  counts[i] = i * i;

This example results in an array that contains { 0, 1, 4, 9, 16, 25 }. There is no “36” here, since we start counting at 0 and have 6 elements, we get to 5 and that’s it.

Parallel Arrays

One way of producing multiplicity is to utilize “parallel arrays.” This data structure uses several arrays with different names but identical lengths to store related information by index.

Below, all the information about each ball is spread over 10 arrays. If we want information about ball #41, we can ask each array using index = 41.

int numBalls = 500;

float[] startX = new float[numBalls];
float[] startY = new float[numBalls];
float[] x = new float[numBalls];
float[] y = new float[numBalls];
float[] rot = new float[numBalls];
float[] amp = new float[numBalls];
float[] speed = new float[numBalls];
float[] radius = new float[numBalls];
color[] c = new color[numBalls];
float[] t = new float[numBalls];

void setup() {
  size(700, 400);

  for( int i=0; i < numBalls; i++ ){
    radius[i] = 20 + random(20);
    startX[i] = random(width);
    startY[i] = random(height);
    c[i] = color(random(255), random(255), random(255), 150);
    rot[i] = random(TWO_PI);
    amp[i] = 20 + random(100);
    speed[i] = random(1, 10);
    t[i] = 0;

void draw() {

  for( int i=0; i < numBalls; i++ ){
    fill( c[i] );
    x[i] = t[i]*amp[i]*cos(rot[i]) + startX[i];
    y[i] = t[i]*amp[i]*sin(rot[i]) + startY[i];
    ellipse(x[i], y[i], radius[i], radius[i]);
    t[i] = sin( radians( speed[i]*frameCount ) );