Documentation for Recitation 6: Animating an Interactive Poster

Recitation 6: Animating an Interactive Poster

This week, we have been asked to make a poster for our IMA End-of-Semester Show with Processing. Here is my result.

PFont f;
float orangeOffset = 0;
float d;
float v;

void setup() {
  smooth();
  size(1024, 768);
}

void draw() {
  background(147, 125, 194);
  for (int x = -110; x < width +110; x = x+ 110) {
    for (int y = 0; y < height; y= y + 105) {
      int row = y / 105;
      if (row % 2 == 0) {
        orange(x + orangeOffset, y);
      } else {
        orange(x - orangeOffset, y);
      }
    }
  }
  v+=random(-0.5, 0.5);
  v=max(v,-4);
  v=min(v, 4);
  if(mousePressed){
    v=0.5;
    invitation();
  } else {
    ima();
  }
  orangeOffset+=v;
  orangeOffset%=110;
}
  
void orange(float x, float y) {
  noStroke();
  fill(198, 137, 198);
  arc(x, y, 100, 100, radians(-35), radians(150), PIE);
  fill(255, 171, 225);
  arc(x - 4, y + 3, 85, 85, radians(-36), radians(149), PIE);
  fill(255, 230, 247);
  arc(x - 4, y + 3, 30, 30, radians(-36), radians(149), PIE);
}

void invitation() {
  f=loadFont("Algerian-100.vlw");
  textFont(f, 48);
  textSize(100);
  fill(255, 240, 245);
  text("IMA Fall 22", 213, 240);
  text("End-Of-Semester", 90, 340);
  text("Show", 387, 440);
  textSize(40);
  text("8th floor, 6pm to 8pm", 285, 540);
  text("Friday December 16", 307, 590);
}

void ima() {
  f=loadFont("Algerian-250.vlw");
  textFont(f, 48);
  textSize(100);
  text("Invitation from", 107, 220);
  text("- Press to Open -", 91, 580);
  textSize(250);
  text("IMA", 287, 452);
}

A small video of my interactive poster:

This is a very difficult yet extremely intriguing experience. It gives me a lot of confidence and pride when I look at my finished poster.

In this activity, I learned how to create different fonts in Processing. I learned from Professor Haider how to create a modulus operator in the code, and it came in great handy when I needed to divide different rows to control their running directions. I think the most different part is how to add the random element into the code and make it enjoyable. My original thought was to change the location of “IMA” randomly. Later, my friend David inspired me to change the velocity of moving oranges and make them go back and forth as shown in the video. The reason why I am obsessed with this design is that the swaying oranges represent a feeling of uncertainty, like the feeling we have when we receive an invitation without knowing what it is. The velocity goes constant if the mouse is pressed, representing the feeling of confirmation. Also, he is the person who taught me how to modify my code to embody my thoughts by wielding the function maximum and function minimum. Thank you, David!