Inevitably you will want to animate or track attributes of multiple shapes, objects, lines. When we move and draw one shape we change its position or attributes discretely each frame. In the case where you want to track multiple values simultaneously, you will need to use a list. We will be using a FloatList in the examples below to move multiple circles. Here are a couple of notes to keep in mind as we start to implement lists:
- To add a value to a FloatList you use the append method: listname.append(value). Append adds the value to the end of the list so the size of the list increases by one each time you append a value.
- We will need a loop to cycle through the values in a list. To do this we use a “for” loop.
- If we are running a loop n number of times to cycle through a list, we can use the size method to return the size of the list: listname.size().
The first example is pretty simple. We are moving a single circle horizontally across the sketch. In this case we are moving the circle discretely one pixel each frame.
float xpos = 0;
void setup(){
size(800,800);
}
void draw(){
background(0);
fill(255);
noStroke();
circle(xpos,height/2,20);
xpos++;
}
In this example we are moving three circles discretely by just copying the code that draws the circle. This would be problematic if you wanted to move a larger number of circles and if you wanted to move them at different speeds for instance.
float xpos = 0;
void setup(){
size(800,800);
}
void draw(){
background(0);
fill(255);
noStroke();
circle(xpos,height/4*1,20);
circle(xpos,height/4*2,20);
circle(xpos,height/4*3,20);
}
In this example we are using a list to store a random y position for 50 circles and then cycling through that list with a for loop. Notice we generate the random y positions in the setup and store them in the list once. We don’t want to generate these each frame because they will be different each frame for each circle.
FloatList ypos = new FloatList();
float numcls = 50;
float xpos = 0;
void setup(){
size(800,800);
for(int i = 0; i < numcls; i++){
ypos.append(random(height));
}
}
void draw(){
background(0);
fill(255);
noStroke();
for(int i = 0; i < numcls; i++){
float y = ypos.get(i);
circle(xpos,y,20);
}
}
Here we are creating other lists to control the motion of each circle. We have a list for the y position and a list for the speed of each circle. Because we have a different speed for each circle we also need a list to keep track of each circle’s x position. Each list has 50 values so each value in each index of the individual lists correlates with each circle. For example, the value in each list at index 9 would be the y position, x position, and speed for the 10th circle (the list starts with index 0).
FloatList ypos = new FloatList();
FloatList xpos = new FloatList();
FloatList speed = new FloatList();
float numcls = 50;
void setup(){
size(800,800);
for(int i = 0; i < numcls; i++){
ypos.append(random(height));
xpos.append(0);
speed.append(random(1));
}
}
void draw(){
background(0);
fill(255);
noStroke();
for(int i = 0; i < numcls; i++){
float y = ypos.get(i);
float x = xpos.get(i);
float s = speed.get(i);
circle(x,y,20);
x = x + s;
xpos.set(i,x);
}
}
You can add any number of lists for other attributes such as diameter and color.
FloatList ypos = new FloatList();
FloatList xpos = new FloatList();
FloatList speed = new FloatList();
FloatList diameter = new FloatList();
IntList ccolor = new IntList();
float numcls = 50;
void setup(){
size(800,800);
for(int i = 0; i < numcls; i++){
ypos.append(random(height));
xpos.append(0);
speed.append(random(1));
diameter.append(random(30)+5);
ccolor.append(color(random(255),random(255),random(255)));
}
}
void draw(){
background(0);
fill(255);
noStroke();
for(int i = 0; i < numcls; i++){
float y = ypos.get(i);
float x = xpos.get(i);
float s = speed.get(i);
float d = diameter.get(i);
int c = ccolor.get(i);
fill(c);
circle(x,y,d);
x = x + s;
xpos.set(i,x);
}
}