Example 11-1: Many Variables

To see what we mean, refer to Example 8-3. This code works fine if we’re moving around only one shape, but what if we want to have two? We need to make a new x variable and update it within draw():

float x1 = -20;
float x2 = 20;

void setup() {
  size(240, 120);
  noStroke();
}

void draw() {
  background(0);
  x1 += 0.5;
  x2 += 0.5;
  arc(x1, 30, 40, 40, 0.52, 5.76);
  arc(x2, 90, 40, 40, 0.52, 5.76);
}

Example 11-2: Too Many Variables

The code for the previous example is still manageable, but what if we want to have five circles? We need to add three more variables to the two we already have:

float x1 = -10;
float x2 = 10;
float x3 = 35;
float x4 = 18;
float x5 = 30;

void setup() {
  size(240, 120);
  noStroke();
}

void draw() {
  background(0);
  x1 += 0.5;
  x2 += 0.5;
  x3 += 0.5;
  x4 += 0.5;
  x5 += 0.5;
  arc(x1, 20, 20, 20, 0.52, 5.76);
  arc(x2, 40, 20, 20, 0.52, 5.76);
  arc(x3, 60, 20, 20, 0.52, 5.76);
  arc(x4, 80, 20, 20, 0.52, 5.76);
  arc(x5, 100, 20, 20, 0.52, 5.76);
}

This code is starting to get out of control.

Example 11-3: Arrays, Not Variables

Imagine what would happen if you wanted to have 3,000 circles. This would mean creating 3,000 individual variables, then updating each one separately. Could you keep track of that many variables? Would you want to? Instead, we use an array:

float[] x = new float[3000];

void setup() {
  size(240, 120);
  noStroke();
  fill(255, 200);
  for (int i = 0; i < x.length; i++) {
    x[i] = random(-1000, 200);
  }
}

void draw() {
  background(0);
  for (int i = 0; i < x.length; i++) {
    x[i] += 0.5;
    float y = i * 0.4;
    arc(x[i], y, 12, 12, 0.52, 5.76);
  }
}

We’ll spend the rest of this chapter talking about the details that make this example possible.

Example 11-4: Declare and Assign an Array

First, we’ll declare the array outside of setup() and then create and assign the values within. The syntax x[0] refers to the first element in the array and x[1] is the second:

int[] x;            // Declare the array

void setup() {
  size(200, 200);
  x = new int[2];   // Create the array
  x[0] = 12;        // Assign the first value
  x[1] = 2;         // Assign the second value
}

Example 11-5: Compact Array Assignment

Here’s a slightly more compact example, in which the array is both declared and created on the same line, then the values are assigned within setup():

int[] x = new int[2];  // Declare and create the array

void setup() {
  size(200, 200);
  x[0] = 12;           // Assign the first value
  x[1] = 2;            // Assign the second value
}

Example 11-6: Assigning to an Array in One Go

You can also assign values to the array when it’s created, if it’s all part of a single statement:

int[] x = { 12, 2 };  // Declare, create, and assign

void setup() {
  size(200, 200);
}

Example 11-7: Revisiting the First Example

As a complete example of how to use arrays, we’ve recoded Example 11-1 here. Although we don’t yet see the full benefits revealed in Example 11-3, we do see some important details of how arrays work:

float[] x = {-20, 20};

void setup() {
  size(240, 120);
  noStroke();
}

void draw() {
  background(0);
  x[0] += 0.5;  // Increase the first element
  x[1] += 0.5;  // Increase the second element
  arc(x[0], 30, 40, 40, 0.52, 5.76);
  arc(x[1], 90, 40, 40, 0.52, 5.76);
}

Example 11-8: Filling an Array in a for Loop

A for loop can be used to fill an array with values, or to read the values back out. In this example, the array is first filled with random numbers inside setup(), and then these numbers are used to set the stroke value inside draw(). Each time the program is run, a new set of random numbers is put into the array:

float[] gray;

void setup() {
  size(240, 120);
  gray = new float[width];
  for (int i = 0; i < gray.length; i++) {
    gray[i] = random(0, 255);
 }
}

void draw() {
  for (int i = 0; i < gray.length; i++) {
    stroke(gray[i]);
    line(i, 0, i, height);
  }
}

Example 11-9: Track Mouse Movements

In this example, there are two arrays to store the position of the mouse—one for the x coordinate and one for the y coordinate. These arrays store the location of the mouse for the previous 60 frames. With each new frame, the oldest x and y coordinate values are removed and replaced with the current mouseX and mouseY values. The new values are added to the first position of the array, but before this happens, each value in the array is moved one position to the right (from back to front) to make room for the new numbers. This example visualizes this action. Also, at each frame, all 60 coordinates are used to draw a series of ellipses to the screen:

int num = 60;
int[] x = new int[num];
int[] y = new int[num];

void setup() {
  size(240, 120);
  noStroke();
}

void draw() {
  background(0);
  // Copy array values from back to front
  for (int i = x.length-1; i > 0; i--) {
    x[i] = x[i-1];
    y[i] = y[i-1];
  }
  x[0] = mouseX;  // Set the first element
  y[0] = mouseY;  // Set the first element
  for (int i = 0; i < x.length; i++) {
    fill(i * 4);
    ellipse(x[i], y[i], 40, 40);
  }
}

Figure 11-2. Shifting the values in an array one place to the right

Example 11-10: Managing Many Objects

This example creates an array of 33 JitterBug objects and then updates and displays each one inside draw(). For this example to work, you need to add the JitterBug class to the code:

JitterBug[] bugs = new JitterBug[33];

void setup() {
  size(240, 120);
  for (int i = 0; i < bugs.length; i++) {
    float x = random(width);
    float y = random(height);
    int r = i + 2;
    bugs[i] = new JitterBug(x, y, r);
  }
}

void draw() {
  for (int i = 0; i < bugs.length; i++) {
    bugs[i].move();
    bugs[i].display();
  }
}

// Insert JitterBug class from Example 10-1

Example 11-11: A New Way to Manage Objects

When working with arrays of objects, there’s a different kind of loop to use called an “enhanced” for loop. Instead of creating a new counter variable, such as the i variable in Example 11-10, it’s possible to iterate over the elements of an array or list directly. In the following example, each object in the bugs array of JitterBug objects is assigned to b in order to run the move() and display() methods for all objects in the array.

The enhanced for loop is often tidier than looping with a number, although in this example, we didn’t use it inside setup() because i was needed in two places inside the loop, demonstrating how sometimes it’s helpful to have the number around:

JitterBug[] bugs = new JitterBug[33];

void setup() {
  size(240, 120);
  for (int i = 0; i < bugs.length; i++) {
    float x = random(width);
    float y = random(height);
    int r = i + 2;
    bugs[i] = new JitterBug(x, y, r);
  }
}

void draw() {
  for (JitterBug b : bugs) {
    b.move();
    b.display();
  }
}

// Insert JitterBug class from Example 10-1

The final array example loads a sequence of images and stores each as an element within an array of PImage objects.

Example 11-12: Sequences of Images

To run this example, get the images from the media.zip file as described in Chapter 7. The images are named sequentially (frame-0000.png, frame-0001.png, and so forth), which makes it possible to create the name of each file within a for loop, as seen in the eighth line of the program:

int numFrames = 12;  // The number of frames
PImage[] images = new PImage[numFrames];  // Make the array
int currentFrame = 0;

void setup() {
  size(240, 120);
  for (int i = 0; i < images.length; i++) {
    String imageName = "frame-" + nf(i, 4) + ".png";
    images[i] = loadImage(imageName);  // Load each image
  }
  frameRate(24);
}


void draw() {
  image(images[currentFrame], 0, 0);
  currentFrame++;      // Next frame
  if (currentFrame >= images.length) {
    currentFrame = 0;  // Return to first frame
  }
}

The nf() function formats numbers so that nf(1, 4) returns the string “0001” and nf(11, 4) returns “0011”. These values are concatenated with the beginning of the filename (frame-) and the end (.png) to create the complete filename as a String variable. The files are loaded into the array on the following line. The images are displayed to the screen one at a time in draw(). When the last image in the array is displayed, the program returns to the beginning of the array and shows the images again in sequence.