Recitation 6: Animating an Interactive Poster

My homework:(draw circles and squares, the sizes and colors vary when the mouse moves)

void setup(){
size(768,1024);
background(255);
}
void draw(){
background(255);
drawRandompattern();

}
void drawRandompattern(){
for(int X = 100;X<=700;X=X+150){

for(int Y = 100;Y<=1000;Y= Y+150){
noStroke();
fill(random(100,255),random(100,255),random(100,255));
ellipse(X,Y,mouseX,mouseX);
fill(mouseY*0.125,mouseY*0.183,mouseY*0.23);
rectMode(CENTER);
rect(X,Y,mouseX/1.414,mouseX/1.414);
fill(255);
ellipse(X,Y,mouseX/1.414,mouseX/1.414);
fill(random(100,255),random(100,255),random(100,255));
rect(X,Y,mouseX/2,mouseX/2);
fill(255);
ellipse(X,Y,mouseX/2,mouseX/2);
}}}

The poster I made in class (move the hand and see colorful water running from the tab):

void setup(){
  size(768,1024);
background(0);
  
}

void draw(){
  background(0);
  fill(255,100,100);
  textSize(120);
  text("TAP",20,120);
  fill(100,255,100);
  textSize(120);
  text("YOUR",20,230);  
  fill(100,100,255);
  textSize(120);
  text("TALENT",20,360);
  noStroke();
  fill(#FEFF48);
  arc(533,270,240,240,PI,2*PI);
  fill(0);
  arc(533,270,120,120,PI,2*PI);
  fill(#FEFF48);
  rect(593,270,60,800);
    if(mouseX > 413 && mouseY>270 && mouseX<480){
    for( int water =275; water<1020;water = water+10){
      //delay(10);
      noStroke();
      fill(random(150,255),random(150,255),random(150,255));
      rectMode(CENTER) ;
    rect(438,water,50-abs(435-mouseX),10);
    }
  }

  hand();

}

void hand(){
  fill(#FFF9E0);

pushMatrix();
translate(mouseX-30,mouseY);
rectMode(CORNER);
arc(0,0,60,60,0.5*PI,1.5*PI);
rect(0,-30,12,12);
arc(12,-18,24,24,1.5*PI,2*PI);
rect(0,-18,70,12);
arc(70,-12,12,12,1.5*PI,2.5*PI);
rect(0,-6,40,12);
arc(40,0,12,12,1.5*PI,2.5*PI);
rect(0,6,30,12);
arc(30,12,12,12,1.5*PI,2.5*PI);
rect(0,18,25,12);
arc(25,24,12,12,1.5*PI,2.5*PI);
popMatrix();

}