# Processing Animation Question

**URL:** <https://discourse.processing.org/t/processing-animation-question/4705>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 21, 2018, 5:55am UTC](https://discourse.processing.org/t/processing-animation-question/4705 "2018-10-21T05:55:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 21, 2018, 5:55am UTC](https://discourse.processing.org/t/processing-animation-question/4705/1 "2018-10-21T05:55:14Z")

</div>

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:

```auto
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;

}

```

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [October 21, 2018, 8:46am UTC](https://discourse.processing.org/t/processing-animation-question/4705/2 "2018-10-21T08:46:26Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 21, 2018, 4:47pm UTC](https://discourse.processing.org/t/processing-animation-question/4705/3 "2018-10-21T16:47:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 21, 2018, 4:48pm UTC](https://discourse.processing.org/t/processing-animation-question/4705/4 "2018-10-21T16:48:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 21, 2018, 5:46pm UTC](https://discourse.processing.org/t/processing-animation-question/4705/5 "2018-10-21T17:46:38Z")

</div>

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