To see what we mean, refer to Example 7-3: Move a Shape. 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);
  smooth();
  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);
}

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);
  smooth();
  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.

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);
  smooth();
  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.

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
}

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
}

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);
}

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

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

void setup() {
  size(240, 120);
  smooth();
  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);
}

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);
  }
}

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);
  smooth();
  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 10-2. Shifting the values in an array one place to the right.

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);
  smooth();
  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();
  }
}

// Copy JitterBug class here

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

To run this example, get the images from the media.zip file as described in Chapter 6. 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 file name ("frame-") and the end (".png") to create the complete file name 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.