Recitation 6: Animating an Interactive Poster

For this recitation, we tried to make a animated poster by using processing. I find it really interesting to do posters in this way. Though it takes some time to learn how to apply certain formulas, this process still has a lot of fun. I integrated my homework with the recitation together into one poster, and it’s below.

Video:

My code is below:

void setup(){
  size(768,1024);
  background(234,161,233,100);
  

}
void draw() {

  background(234,161,233,100);

  
  background(108,37,95,100);
  fill(247, 241, 207); 
  ellipse(frameCount*2, frameCount*2, 350, 300);


  fill(224,93,209,100);
  triangle(590,0,0,0,0,500);
  
  fill(192,90,229,100);
  triangle(768,0,178,0,768,500);
  
  fill (247,183,5);
  textSize(300);
  text("I",width/2-35,250);
  

  fill (255,111,0);
  textSize(200);
  text("M",width/2-66,200);

  fill(255,38,0);
  stroke(0);
  rect(width/2+23,150,28,10,28);
 
  
  fill(0);
  textSize(25);
  text("IMA Spring 22 End-Of-Semester Show",width/2-195,360);
 
  fill(0);
  textSize(25);
  text("Location: 8th floor",width/2-50,410);

  fill(0);
  textSize(25);
  text("Date: Friday May 13",width/2-50,460);
  
  fill(0);
  textSize(25);
  text("Time: 6pm to 8pm",width/2-50,510);
  
  
  Float r=random(0,255);
  Float g=random(0,255);
  Float b=random(0,255);
     
   
  float d = dist(mouseX, mouseY, 125, 200);
  if(d < 100) {
    fill(r,g,b);
  } else {
    fill(167,205,255); 
  }
  ellipse(125, 200, 200, 200);
  
  float f = dist(mouseX, mouseY, 650, 200);
  if(f < 100) {
    fill(r,g,b);   
  } else {
    fill(267, 205, 255);
  }
  ellipse(650, 200, 200, 200);
 
  fill(232,232,232,100);
  ellipse(-50,700,250,250);
 
  fill(234,206,231,100);
  ellipse(50,700,250,250);
  
  fill(234,178,227,100);
  ellipse(150,700,250,250);
  
 fill(229,147,242,100);
  ellipse(250,700,250,250);
  
   fill(222,114,240,100);
  ellipse(350,700,250,250);
  
   fill(217,73,240,100);
  ellipse(450,700,250,250);
  
    fill(210,38,237,100);
  ellipse(550,700,250,250);
  
   fill(232,40,207,100);
  ellipse(650,700,250,250);
  
   fill(234,19,206,100);
  ellipse(750,700,250,250);
  
   fill(209,2,182,100);
  ellipse(850,700,250,250);
  
  fill(247,183,5,200);
  rect(0,700,768,700);
  }

A few parts where I found a bit struggling with, one is the locations for these elements, I need to try multiple times and change accordingly to find out the most suitable coordination. Another is that I find the sequence of the codes matters, for if I put some codes before others, they will be covered by the patterns whose codes come after them.

Nonetheless, it’s really interesting to add elements one by one and feel that I have more and more idea about this poster, and to add more animations and patterns. Sometimes some mistake codes can have unexpected effect as well, for example, the ellipse that slide from the top left to the bottom right was actually an accident, I didn’t mean to place it this way, I wanted to create the effect of many circle dropping from the top like rain, but this turn out to be like a spotlight, which I found also very cool so I kept it that way.