For this recitation, I used Processing for the first time for coding and design. After reviewing the features taught in class and studying the tutorials on the Processing website, I completed my first interactive poster.

Because I had to accommodate the change of the image over time, I designed a loop in the center of the window to periodically zoom in and out of the circle and used mouse interaction to move the small arrow symbols faster when the cursor was on the right side of the screen, and the arrow symbols slowed down until they stopped when the cursor moved to the left side of the screen. These designs reflected the interactive features I gave to the poster.

Video

Coding

String t1="Event: IMA Spring 22 End-Of-Semester Show";
String t2="Location: 8th floor\nDay: Friday May 13\nTime: 6pm to 8pm";
PVector[]pos=new PVector[100];
void setup() {
  size(1024, 768);
  textAlign(CENTER, CENTER);
  textSize(40);
  rectMode(CENTER);
  for (int i=0; i<pos.length; i++) {
    pos[i]=new PVector(random(width), random(height));
  }
}
void draw() {
  background(#3B8BEA);
  noStroke();
  fill(#D1F3FC);
  ellipse(width/2, height/2, sin(frameCount*0.02)*300, sin(frameCount*0.02)*300);
  fill(#FCF0D1, 100);
  stroke(#FCF0D1, 200);
  for (int i=0; i<pos.length; i++) {
    line(pos[i].x, pos[i].y, pos[i].x-30, pos[i].y);

    rect(pos[i].x, pos[i].y, 20, 20);
    pos[i].x+=map(mouseX,0,width,0,10);
    if (pos[i].x>width) {
      pos[i].x=0;
    }
  }
  fill(#9DCAFF, 70);
  text(t1, 500, 100);
  fill(#9DCAFF);
  text(t1, 500, 120);
  fill(#50FFCC);
  text(t2, 500, 620);
}

Comments

At that time, I wanted to use the mouse to control the size of the change of the circle and the speed of the cursor movement behind it but found that the map used by the cursor is only for that one function, so I asked a friend for advice about how the circle changes with time itself, and he demonstrated and modified the demonstration of the two modes of separation, not only to make the code more concise, the poster’s presentation is also more interactive