https://processing.org/tutorials/arrays/

An array is a container that holds a fixed number of values, a bit like a spreadsheet table. With arrays we can store multiple variables of the same type, and access them easily.

int[] valueArray = new int[10];
println(valueArray.length);
 
for(int i=0; i < valueArray.length; i++) {
   valueArray[i] = i * 2;
 }
println(valueArray);

Arrays can also be imagined as drawers, with variables stored in each drawer. The drawer has a certain type, and each drawer store another set of draws (multidimensional). The individual drawers are numbered and start at 0. The size or length is stored in the variable 'length'. Arrays are not dynamic, that means they can not change their length at runtime. If you need a dynamic array, you should use ArrayList.

ArrayList<Integer> valueList;
 
valueList = new ArrayList<Integer>();
println(valueList.size());
 
for(int i=0;i < 10;i++) {
   valueList.add(i * 2);
 }
println(valueList);
// fancy things we can do with lists, but not arrays 
valueList.add(100);
println(valueList.size());
println(valueList);
 
valueList.remove(0);
println(valueList.size());
println(valueList);

println(valueList.get(0));

Unlike arrays, ArrayLists can only be one dimension.

Exercise 1:

Use an array or ArrayList to draw animated icons on the screen using the mouse. The arrays can be useful to store the X and Y position of the icons for example.

Exercise 2 possible solution

int[] puffsX = new int[60];
int[] puffsY = new int[60];
 
int currentPuff= 0;
float angle = 0;
void setup() {
  size(600,600);
  noStroke();
}
 
void draw() {
  background(0);
 
  for(int i = 0; i < puffsX.length; i++) {
    DrawPuff(puffsX[i],puffsY[i],i);
  }
  angle+= 0.1;
}
 
void DrawPuff(int x, int y, int index) {
  fill(255);
  float puffSize= (sin(angle+index)*10)+20;
  ellipse(x,y,puffSize,puffSize);
};
 
 
void mouseMoved(){
  currentPuff++;
  if (currentPuff >= puffsX.length) {
    currentPuff = 0;
  }
  puffsX[currentPuff] = mouseX;
  puffsY[currentPuff] = mouseY;
};

Exercise 2:

Create a sketch with a selection of graphics randomly distributed on the screen. Code your example so the mouse can control the position of these random points with a Parallax effect (pseudo 3D). Use the mouse click to change the random distribution of the graphics.

Browser not supported