Recitation 6: Animating and Interactive Poster

Recitation: Animating Poster for IMA Show

In this exercise, I learned how to use push() & pop() and translate() functions. The push() function carries the code setting or condition and transformation I wrote, while the pop() function sets everything back to the original setting. Together, the push() and pop() functions allows me to perform the animation smoothly without leaving the image I designed to remain on the starting place while another copy of it is performing the animation. On the other hand, the translate() function allows me to make transformations within the display window. In translate(x, y), x represents left or right translations, and y represents up or down translations.

 Code:

int x=200;
int x2=200;
int x3=300;
int x4=200;
int y=200;
int speed1= 2;
int speed2= 3;
int speed3= 4;
int speed4= 3;

void setup() {
  size(1024, 768);
  
  frameRate(60);
  float r= random(1, 3);

}

void draw() {
  background(#FFED66);
  fill(200);
  rect(0,375, 210, 10);
  rect(0,575, 210, 10);
  
  noStroke();
  fill(255);
  rect(206, 335, 800, 300);
  fill(0);
  textSize(50);
  text("IMA Fall 22 End-OF-Semester Show!", 240, 420);
  fill(0);
  textSize(25);
  text("Friday, December 16 | 6pm to 8pm", 240, 480);
  text("Location: 8th Floor", 240, 540);
  fill(190);
   circle(225, 380, 20);
   circle(225, 580, 20);
  drawRec();
  drawRound();
  drawSquare();
  drawTriangle();
 
}
void drawRec(){
  push();
  translate(x,0);
  fill(#FF5E5B);
  rect(0, 30, 100, 50);
  fill(255);
  ellipse(20, 55, 10, 10);
  ellipse(70, 55, 10, 10);
  square(35, 60, 20);
  pop();
  

  x= x+speed1;
  if(x> width){
    x=0;
  }
  
}

void drawRound(){
  push();
  translate(x2,0);
  fill(#00CECB);
  ellipse(200, 150, 60, 60);
  fill(255);
  square(180, 140, 10);
  square(206, 140, 10);
  rect(183, 160, 30, 5);
  pop(); 
  x2= x2+speed2;
  if(x2> width){
    x2=0;
  }
}

void drawSquare(){
  push();
  translate(x3,0);
  fill(#FFFFEA);
  square(30,220, 60);
  fill(#D8D8D8);
  rect(40, 240, 13, 5);
  rect(70, 240, 13, 5);
  triangle(62, 257, 52, 272, 72, 272);
  pop();
   x3= x3+speed3;
  if(x3> width){
    x3=0;
  }
}

void drawTriangle() {
 push();
 translate(x4, 0);
  fill(#7E78D2);
  triangle(100, 670, 65, 740, 135, 740);
  fill(255);
  ellipse(92, 705, 7, 7);
  ellipse(105, 705, 7, 7);
  ellipse(100, 725, 20, 10);
 pop();
   x4= x4+speed4;
  if(x4> width){
    x4=0;
  }
 
  
}

Homework: Interactive Poster

The logos that I designed and randomly placed on the screen change the position every time I press the letter ‘A’  on the keyboard. 

 

Code:

void setup() {
  size(1024, 768);
  background(#E9C46A);
  for(int x= 0; x<10; x++){
    for(int y=0; y<10; y++) {
 
   push();
   translate( random(0, width),random(0, height));
   //translate(y * 100,0);
   noStroke();
  fill(random(200, 300), 98, 81);
  triangle(50, 0, 10, 80, 90, 80);
  fill(255);
  ellipse(50,54, 52, 52);
  fill(random(200, 300), 162, 92);
  ellipse(50, 55, 20, 20);
  fill(random (20, 300), 157, 143);
  rect(10, 40, 80, 10);
  pop();
    }  
  }
}

void changePos(){
  background(#E9C46A);
  for(int x= 0; x<10; x++){
    for(int y=0; y<10; y++) {
 
   push();
   translate( random(0, width),random(0, height));
   //translate(y * 100,0);
   noStroke();
  fill(random(200, 300), 98, 81);
  triangle(50, 0, 10, 80, 90, 80);
  fill(255);
  ellipse(50,54, 52, 52);
  fill(random(200, 300), 162, 92);
  ellipse(50, 55, 20, 20);
  fill(random (20, 300), 157, 143);
  rect(10, 40, 80, 10);
  pop();
    }  
  }

}

void changeColor(){
  

}

void keyPressed() {
  if (key == 'a') {
    changePos();
  }
 
}

void draw(){
   

}