Processing Animation Question

Processing Coding Questions
1

Hi there- I am currently trying to make an animation for homework for my coding class and I am having trouble. I have three separate squares on the screen, but I don’t know how to properly make them go at different times.

my code is posted here:

int startTime;
int x=3;
int x2=10;
int x3=20;
 
void setup() {  
size(500, 500);
}
void draw() { 
strokeWeight (400);
background(#FFFFFF);

stroke (263, 33,99, 10);
line (0, 0, 200, 510);

stroke (263, 33,99, 50);
line (150, 0, 370, 510);

stroke (263, 33,99, 150);
line (350, 0, 570, 500);

for (int i =0; i<5; i++) {
noStroke();
fill (8, 245, 255, 50);
rect(x+50*i,height/2,120,120);
}
x+=3;

for (int i =0; i<5; i++) {
noStroke();
fill (#D6FDFF);
rect (x2,height/2,50,50);
}
x2+=-5;

for (int i =0; i<5; i++) {
noStroke();
fill (#19ABB2);
rect (x2,height/2,80,80);
}
x3+=70;

}
2

You’re on the right track with variables to store start times! You can use millis() to get the time of when they should start moving. Here’s some example code:

if(millis() <= <rect1 start time>) {
  ...move rect1...
}
if(millis() <= <rect2 start time>) {
  ...move rect2...
}
...etc...
3

I know about millis, but I am unsure of how it fits within the actual code. Would I have to make each rectangle a variable? Is there a certain kind of number form I should use?

4

and would it go after the “for” section or somewhere else?

5

I figured it out- nevermind! Thanks so much for your help!