Recitation 6: Animating an Interactive Poster

My poster is as bellow:

And the code is:

//bounce
int rad = 365;        // Width of the shape
float xpos, ypos;
float xpos2, ypos2;// Starting position of shape

float xspeed =5;  // Speed of the shape
float yspeed =8;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom

int value=0;


void setup() {
  size(1024, 768);
  smooth();
  //字体设置
  loadFont("ArimaMadurai-SemiBold-48.vlw");
  loadFont("ArimaMadurai-Medium-48.vlw");
  textFont(loadFont("ArimaMadurai-SemiBold-48.vlw"), 48);
  textFont(loadFont("ArimaMadurai-Medium-48.vlw"), 48);

  //ellipseMode(RADIUS);
  xpos = width/4*3;
  ypos = height/4*3;
  xpos2=width/4;
  ypos2=height/4;
}



void draw() {
  background(255);
  fill(#E3C530);
  circle(width/2, 0, 900);

  //title
  textFont(loadFont("ArimaMadurai-Medium-48.vlw"), 48);
  textSize(120);
  fill(0);
  text("IMA", 400, 130);

  textSize(70);
  fill(0);
  text(22, 300, 120);
  text("FALL", 620, 120);

  textFont(loadFont("ArimaMadurai-SemiBold-48.vlw"), 48);
  textSize(85);
  text("End-Of-Semester", 180, 240);
  text("Show", 400, 350);

  fill(#1749C1);
  circle(width/2, height, 520);

  //location
  fill(#CCF5FA);
  textSize(45);
  text("LOCATION:", 400, 560, 500, 500);
  textSize(70);
  text("8th", 450, 620, 490, 500);
  text("floor", 430, 690, 500, 500);

  fill(#E34242);
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );

 
  if (xpos > width-rad/2 || xpos < rad/2) {
    xdirection *= -1;
  }
  if (ypos > height-rad/2 || ypos < rad/2) {
    ydirection *= -1;
  }

  // Draw the shape
  ellipse(xpos, ypos, rad, rad);

  //date
  fill(#F7DCDD);

  textSize(45);
  text("DATE:", xpos-60, ypos-130, 500, 200);
  textSize(70);
  text("Friday", xpos-100, ypos-70, 500, 150);
  text("December", xpos-150, ypos+5, 500, 150);
  text("16", xpos-35, ypos+85, 500, 150);


  fill(#434242);
   // Draw the shape
  ellipse(xpos2, ypos2, rad, rad);

  xpos2 = xpos2 + ( xspeed * -xdirection );
  ypos2 = ypos2 + ( yspeed * -ydirection );
  
 

  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1
  if (xpos2 > width-rad/2 || xpos2 < rad/2) {
    xdirection *= 1;
  }

  if (ypos2 > height-rad/2 || ypos2 < rad/2) {
    ydirection *= 1;
  }
  


  if (mousePressed&&mouseX-xpos<rad/2&&mouseY-ypos<rad/2) {
    xpos=mouseX;
    ypos=mouseY;
    // background(random(0,255),random(0,255),random(0,255));
  }

  if (mousePressed&&mouseX-xpos2<365/2&&mouseY-ypos2<365/2) {
    xpos2=mouseX;
    ypos2=mouseY;
    //background(random(0,255),random(0,255),random(0,255));
  }



  
  //time
  fill(255);
  textSize(45);
  text("Time:", xpos2-60, ypos2-130, 500, 500);
  textSize(70);
  text("6PM", xpos2-70, ypos2-50, 500, 500);
  text("-", xpos2-20, ypos2, 500, 500);
  text("8PM", xpos2-70, ypos2+60, 500, 500);

  fill(255);
  
//pin
  beginShape();
  vertex(mouseX-10, mouseY);
  vertex(mouseX-20, mouseY-20);
  vertex(mouseX+20, mouseY-20);
  vertex(mouseX+10, mouseY);
  vertex(mouseX+30, mouseY+30);
  vertex(mouseX-30, mouseY+30);
  vertex(mouseX-10, mouseY);
  endShape();

  beginShape();
  vertex(mouseX+5, mouseY+30);
  vertex(mouseX, mouseY+70);
  vertex(mouseX-5, mouseY+30);
  endShape();

if(mousePressed){
fill(0);
textSize(40);
  text("catch the time!",width-630,height-280);
}
}

And the homework:

And final code is as below:

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

void draw() {
  if (mousePressed==true) {
    background(random(100, 255), random(100, 255), random(100, 255));
  }
  pin();
}


void pin() {
  
  for (int n=50; n<width; n=n+100) {
    beginShape();
    fill(random(100,250),random(100,250),random(100,250),100);
    vertex(n-10, n);
    vertex(n-20, n-20);
    vertex(n+20, n-20);
    vertex(n+10, n);
    vertex(n+30, n+30);
    vertex(n-30, n+30);
    endShape(CLOSE);

    beginShape();
    vertex(n-5, n+30);
    vertex(n, n+70);
    vertex(n+5, n+30);
    endShape();
  }
}