Week 5: Array to animate multiple objects

This week we had to animate several objects using array. I made an animation with "falling" circles. The animation can be paused for 3,5 seconds if the mouse is clicked and restarts if 'r' is pressed. This is how it looks like:

The code:

int[] Ypos = {-20, -25, -30, -35, -40, -45, -50};
int[] sizes = {20, 25, 30, 35, 40, 45, 50};
int[] colors = {#FF3700, #FF8400, #FFDD00, #60AB1A, #1AAB78, #174A91, #6C0F91};
int[] speeds = {4, 5, 6, 7, 8, 9, 10};

void setup(){
  size(500, 500);
 
}


void draw(){
  background(0);
 
  //circles, from left to right
  noStroke();
  fill(colors[0]);
  circle(57, Ypos[0], sizes[0]);
    if (Ypos[0]<=520){
     Ypos[0] = Ypos[0] + speeds[0];
  }else{Ypos[0] = -20;}
 
  fill(colors[1]);
  circle(114, Ypos[1], sizes[1]);
  if (Ypos[1]<=525){
     Ypos[1] = Ypos[1] + speeds[1];
  }else{Ypos[1] = -25;}
 
  fill(colors[2]);
  circle(171, Ypos[2], sizes[2]);
    if (Ypos[2]<=530){
     Ypos[2] = Ypos[2] + speeds[2];
  }else{Ypos[2] = -30;}
 
  fill(colors[3]);
  circle(228, Ypos[3], sizes[3]);
    if (Ypos[3]<=535){
     Ypos[3] = Ypos[3] + speeds[3];
  }else{Ypos[3] = -35;}
 
  fill(colors[4]);
  circle(285, Ypos[4], sizes[4]);
  if (Ypos[4]<=540){
     Ypos[4] = Ypos[4] + speeds[4];
  }else{Ypos[4] = -40;}
 
  fill(colors[5]);
  circle(352, Ypos[5], sizes[5]);
  if (Ypos[5]<=545){
     Ypos[5] = Ypos[5] + speeds[5];
  }else{Ypos[5] = -45;}
 
  fill(colors[6]);
  circle(420, Ypos[6], sizes[6]);
  if (Ypos[6]<=550){
     Ypos[6] = Ypos[6] + speeds[6];
  }else{Ypos[6] = -50;}
 
  //Pressing "r" restarts the animation
if (keyPressed){
   if (key=='r'){
   Ypos[0] = -20;
   Ypos[1] = -25;
   Ypos[2] = -30;
   Ypos[3] = -35;
   Ypos[4] = -40;
   Ypos[5] = -45;
   Ypos[6] = -50;
   }
 }

 //clicking pauses the animation
 if (mousePressed){
   delay(3500);
 }

}

I used array for four values: size, color, the Y-position of the circles and the speed of the animation. The red circle furthest to left is the smallest in size and falls down the slowest. The circles increase in size and speed from left to right to the largest and fastest circle; the purple circle furthest to the right. I used hex colors (a.k.a. html color codes) to be able color the circles in color rather than grayscale (since I can only put one value within each array "box").

I wanted to be able to pause the animation; after some research I achieved this by using delay, which pauses draw for the specified amount of miliseconds. I also included a way to restart the animation from the original positions without stopping and re-running the code over and over again.