Array explanation in Processing

DEMO_Arrays

/*========================================================================
 ==  DEMO: ARRAYS                                                       ==
 =========================================================================
 
 So far, we can only create one variable at a time:
 
 __________________________________________________________________________
 |                                                                        | 
 |   int x = 100000;                                                      |
 |________________________________________________________________________|
 
 This works fine for the most part, but it can get a bit tedious when,
 for example, you want to have three dots moving around:
 
 __________________________________________________________________________
 |                                                                        | 
 |   float x1, y1, x2, y2, x3, y3;                                        |
 |   float vx1, vy1, vx2, vy2, vx3, vy3;                                  |
 |________________________________________________________________________|
 
 And to make things worse, you have to write the same code three times 
 to set up those variable, move them and draw them! 
 
 */

// float x1, y1, x2, y2, x3, y3;
// float vx1, vy1, vx2, vy2, vx3, vy3;
// color c1, c2, c3;

// void setup() {
//   size(800, 600);
//   x1 = random(width);
//   y1 = random(height);
//   vx1 = random(-1, 1);
//   vy1 = random(-1, 1);
//   c1 = color(random(255), random(255), random(255));

//   x2 = random(width);
//   y2 = random(height);
//   vx2 = random(-1, 1);
//   vy2 = random(-1, 1);
//   c2 = color(random(255), random(255), random(255));

//   x3 = random(width);
//   y3 = random(height);
//   vx3 = random(-1, 1);
//   vy3 = random(-1, 1);
//   c3 = color(random(255), random(255), random(255));

//   noStroke();
// }

// void draw() {
//   background(0);

//   x1 = x1 + vx1;
//   y1 = y1 + vy1;
//   x2 = x2 + vx2;
//   y2 = y2 + vy2;
//   x3 = x3 + vx3;
//   y3 = y3 + vy3;

//   // This is slightly condensed because I created
//   // a method, but even then it's very tedious
//   drawDot(x1, y1, c1);
//   drawDot(x2, y2, c2);
//   drawDot(x3, y3, c3);
// }

// void drawDot(float x, float y, color c) {
//   fill(c);
//   ellipse(x, y, 100, 100);
// }

/*
 Obviously, this is not going to work if we want to draw more dots. 
 
 What we need is a way store a *collection* of values, and a way to get to
 the values in that collection.
 
 There are multiple ways to do that, but one of the most basic ways is the
 array. 
 
 Let's look at the syntax for creating an array variable first:
 
 __________________________________________________________________________
 |                                                                        | 
 |   int[] x = new int[100];                                              |
 |                                                                        | 
 |   \_/ |     \_/ \_/\___/                                               | 
 |    |  |      |   |   |                                                 | 
 |    |  |      |   |  The number of values to be stored, between         | 
 |    |  |      |   |  square brackets. In this case 100 integers.        | 
 |    |  |      |   |                                                     | 
 |    |  |      |  The type of the values to be stored. In this case      | 
 |    |  |      |  values of the type integer                             | 
 |    |  |      |                                                         | 
 |    |  |    The "new" keyword tells Processing that it should set       | 
 |    |  |    aside a chunk of memory for this array, the location of     |
 |    |  |    which will be stored in the variable x                      | 
 |    |  |                                                                | 
 |    |  The square brackets indicate to Processing that this will be     | 
 |    |  an array of values.                                              | 
 |    |                                                                   | 
 |   The type of the values that the array will store                     | 
 |________________________________________________________________________|
 
 First we write down the type we will store in the array, just as with
 other variables. But now we follow that with square brackets - [] - to
 tell Processing that this will be an array of that type.
 
 Then, like with any variable, we declare the name - "x" in this example. 
 
 We can then assign an array immediately, like in the example above.
 
 Creating an array value is a bit different than other variables. 
 
 We have to use the "new" keyword to tell Processing to set aside a chunk of
 memory to store all of these values. 
 
 Then we write the type to be stored ("int" in the example above), followed
 by two square brackets. Between the square brackets we write how many 
 values we want to set aside - 100 values in the example.
 
 
 ASSIGNING VALUES TO ARRAY ELEMENTS AND LOOKING THEM UP
 ======================================================
 
 So that's how we set aside a number of values at once, and store it in a
 variable. Now the question is: how do we get to those specific values
 in the array? Or assign new values to it? 
 
 We use those square brackets, again:
 
 __________________________________________________________________________
 |                                                                        | 
 |   x[0] = 1000;                                                         |
 |                                                                        | 
 |   |\_/   \___/                                                         | 
 |   | |      |                                                           | 
 |   | |    The value to be assigned to an array element, in this         | 
 |   | |    example the integer number 1000                               | 
 |   | |                                                                  | 
 |   | The ELEMENT of the array that we will assign a value to.           | 
 |   | Here's a gotcha that you need to get used to: arrays start         | 
 |   | counting at 0. So the first element is accessed with [0]           | 
 |   |                                                                    | 
 |  The array variable whose element we want to assign a value to.        | 
 |                                                                        | 
 |________________________________________________________________________|
 
 Looking them up is almost the same, but the other way around:
 
 __________________________________________________________________________
 |                                                                        | 
 |   int px = x[0];                                                       |
 |                                                                        | 
 |   \____/   |\_/                                                        | 
 |     |      | |                                                         | 
 |     |      | Index of the element that we want to look up,             |
 |     |      | in this case the first element of array x                 | 
 |     |      |                                                           | 
 |     |   Name of the array we are looking up the value from             | 
 |     |                                                                  | 
 |  The variable to which we want to assign the value                     | 
 |  of the array element that we looked up                                | 
 |________________________________________________________________________|

 Let's modify the code from above to try it out:
 
*/

// float[] x, y;
// float[] vx, vy;
// color[] c;

// void setup() {
//   size(800, 600);

//   int l = 1000;

//   x = new float[l];
//   y = new float[l];
//   vx = new float[l];
//   vy = new float[l];
//   c = new color[l];
//   for (int i = 0; i < l; i++) {
//     x[i] = random(width);
//     y[i] = random(height);
//     vx[i] = random(-1, 1);
//     vy[i] = random(-1, 1);
//     c[i] = color(random(255), random(255), random(255), random(255));
//   }
//   noStroke();
// }

// void draw() {
//   background(0);
//   for (int i = 0; i < x.length; i++) {
//     x[i] = x[i] + vx[i];
//     y[i] = y[i] + vy[i];

//     // Note: first the values at x[i], y[i] and c[i] are looked up,
//     //       then those values are passed to the drawDot() method
//     drawDot(x[i], y[i], c[i]);
//   }
// }

// void drawDot(float x, float y, color c) {
//   fill(c);
//   ellipse(x, y, 100, 100);
// }

/*
 It's a bit of extra work compared to plain x, y variables, but as
 soon as we want to do the same thing for a collection of variables
 it is a lot more effective!
 
 Try changing the value of "l" in the code above (must be positive!)
 See how the code automatically adjusts to the new number of
 elements in the collection?
 
 On the next tab you can try out some more advanced uses of arrays

 */