arrays

We have seen that in order to store data in a program, we have to use variables. Using simple variables is fine in many situations, but sometimes you need to keep track of a lot of information at the same time. For example, the pixels in an image or all locations where mouse click occurred. You would not want to have to create hundreds of ints one at a time. This is where arrays come in. An array represents a group of values under the same name.

This diagram illustrates a few points:

One last point to remember is that all elements in an array must be of the same type.

using arrays

declaration and assignment

To create and use an array in Processing, you use the syntax datatype[] arrayName = new datatype[size];

int[] numbers = new int[3];

// the array is empty, let's put some values in it
numbers[0] = 5;
numbers[1] = 10;
numbers[2] = 49;

In this example, we create an array of integers of size 3 called numbers.

iteration through an array

Arrays combine very well with for-loops, as they allow you to iterate through, or visit, every element of the array. Here is an example:

// create an array with 10 ints
int[] numbers = new int[10];

// writing to an array:
// fill the array with numbers from 1 to 10
for (int i=0; i < 10; i++) {
  numbers[i] = i+1;
}

// reading from an array:
// print the contents of each element to the console window
for (int i=0; i < 10; i++) {
  println(numbers[i]);
}

arrays & interaction

Let's look at an application with more interesting output. The code below draws a pulsating circle wherever the user clicks.

// ----------------------------------------------------------------------
// GLOBAL CONSTANTS
// ----------------------------------------------------------------------
int SCALE = 10;

// ----------------------------------------------------------------------
// GLOBAL VARIABLES
// ----------------------------------------------------------------------
int x;    // x-coordinate of the pulse
int y;    // y-coordinate of the pulse
float s;  // size of the pulse

// ----------------------------------------------------------------------
// BUILT-IN FUNCTIONS
// ----------------------------------------------------------------------
void setup() {
  size(400, 400);
  smooth();
  noStroke();
}

void draw() {
  background(0);

  // draw the pulse
  drawPulse(); 
}

void mousePressed() {
  movePulse(mouseX, mouseY); 
}

// ----------------------------------------------------------------------
// USER FUNCTIONS
// ----------------------------------------------------------------------
/* draws a pulse and updates its size */
void drawPulse() {
  fill(255);
  ellipse(x, y, sin(s)*SCALE, sin(s)*SCALE);
  s += 0.1;
}

/* moves the pulse to the given position */
void movePulse(int newX, int newY) {
  x = newX;
  y = newY;
}

We will now modify the application to draw a new pulse every time the mouse is pressed or dragged. In order to redraw the pulses at different sizes every frame, we need to keep track of each pulse's position and size using arrays.

// ----------------------------------------------------------------------
// GLOBAL CONSTANTS
// ----------------------------------------------------------------------
int SCALE = 10;
int MAX_PULSES = 500;

// ----------------------------------------------------------------------
// GLOBAL VARIABLES
// ----------------------------------------------------------------------
int numPulses = 0;

int[] x = new int[MAX_PULSES];      // stores all the x-coordinates
int[] y = new int[MAX_PULSES];      // stores all the y-coordinates
float[] s = new float[MAX_PULSES];  // stores all the size values

// ----------------------------------------------------------------------
// BUILT-IN FUNCTIONS
// ----------------------------------------------------------------------
void setup() {
  size(400, 400);
  smooth();
  noStroke();
}

void draw() {
  background(0);

  // draw all the pulses
  for (int i=0; i < numPulses; i++) {
    drawPulse(i); 
  }
}

void mousePressed() {
  addPulse(mouseX, mouseY); 
}

void mouseDragged() {
  addPulse(mouseX, mouseY); 
}

void keyPressed() {
  if (key == 32) {  // space bar
    // clear all
    numPulses = 0;
  } 
}

// ----------------------------------------------------------------------
// USER FUNCTIONS
// ----------------------------------------------------------------------
/* draws a pulse and updates its size */
void drawPulse(int index) {
  fill(255);
  ellipse(x[index], y[index], sin(s[index])*SCALE, sin(s[index])*SCALE);
  s[index] += 0.1;
}

/* adds a new pulse to the list */
void addPulse(int newX, int newY) {
  if (numPulses < MAX_PULSES) {
    x[numPulses] = newX;
    y[numPulses] = newY;
    s[numPulses] = 0;
    numPulses++;
  }
}					

multidimensional arrays

So far, we have seen arrays that had only one dimension. We say that an array has more than one dimension when its elements are other arrays. We can build arrays of any number of dimensions, but it starts getting confusing passed three, so you will mostly only see one and two-dimensional arrays. The figure below shows an example of a two-dimensional array.

declaration

An extra set of square brackets [ ] must be added to the declaration of a two-dimensional array.

// create a two-dimensional array 10x10
int[][] myArray = new int[10][10];

assignment

In order to access an individual element of a two-dimensional array we need to specify two indices: the "row" and the "column". For instance the following statement assigns the value 3 to the element which is in the 0th row and 2nd column.

myArray[0][2] = 3;  // where 0 is the row, and the 2 the column

iteration

We can iterate through the two-dimensional array using two nested for-loops.

// create an array with 10x6 = 60 ints
int[][] numbers = new int[10][6];

// writing to an array:
// fill the array with numbers from 1 to 60
for (int i=0; i < 10; i++) {
  for (int j=0; j < 6; j++) {
    numbers[i][j] = i*6+j+1;
  }
}

// reading from an array:
// print the contents of each element to the console window
for (int i=0; i < 10; i++) {
  for (int j=0; j < 6; j++) {
    println(numbers[i][j]);
  }
}

We can now modify the pulses example by using a single two-dimensional array to hold the position values.

// ----------------------------------------------------------------------
// GLOBAL CONSTANTS
// ----------------------------------------------------------------------
int SCALE = 10;
int MAX_PULSES = 500;
int X = 0;
int Y = 1;

// ----------------------------------------------------------------------
// GLOBAL VARIABLES
// ----------------------------------------------------------------------
int numPulses = 0;

int[][] pos = new int[MAX_PULSES][2];  // stores all the coordinates
float[] s = new float[MAX_PULSES];     // stores all the size values

// ----------------------------------------------------------------------
// BUILT-IN FUNCTIONS
// ----------------------------------------------------------------------
void setup() {
  size(400, 400);
  smooth();
  noStroke();
}

void draw() {
  background(0);

  // draw all the pulses
  for (int i=0; i < numPulses; i++) {
    drawPulse(i); 
  }
}

void mousePressed() {
  addPulse(mouseX, mouseY); 
}

void mouseDragged() {
  addPulse(mouseX, mouseY); 
}

void keyPressed() {
  if (key == 32) {  // space bar
    // clear all
    numPulses = 0;
  } 
}

// ----------------------------------------------------------------------
// USER FUNCTIONS
// ----------------------------------------------------------------------
/* draws a pulse and updates its size */
void drawPulse(int index) {
  fill(255);
  ellipse(pos[index][X], pos[index][Y], sin(s[index])*SCALE, sin(s[index])*SCALE);
  s[index] += 0.1;
}

/* adds a new pulse to the list */
void addPulse(int newX, int newY) {
  if (numPulses < MAX_PULSES) {
    pos[numPulses][X] = newX;
    pos[numPulses][Y] = newY;
    s[numPulses] = 0;
    numPulses++;
  }
}

Processing Workshop

Elie Zananiri
Alberta College of Art + Design
3-5 April 2008