Recitation 6

This recitation allows us to work individually to learn about using Processing to create animation. However, since I have no coding foundation before, I do not finish the goal. Instead, I combined the work I did in class with the assignment and designed an interactive poster for the IMA show. 

This is the first version of my code, which lacks interaction with the audience. I have learned how to use the frame code to create simple animations.

int speed = 0;
int stage=0;
void setup() {
  size(1024, 768);
  frameRate(4);
}
void draw() {
  background(150);
  for (int i = 0; i < 30; i ++) {
    stroke(255);
    strokeWeight(3);
    line(speed, 0, speed, 768);
    speed = speed + 10;
    stage = stage + 1;
  }
  if (frameCount >= 6) {
    textAlign(LEFT);
    textSize(130);
    fill(245, 183, 177);
    text("I", 180, 250);
    text("M", 500, 350);
    text("A", 300, 550);
    textSize(28);
    text("Spring 2022 \nEnd-Of-Semester Show", 700, 650);
    fill(255);
    noStroke();
    rect(790, 20, 2, 100);
    rect(795, 20, 2, 100);
    textSize(20);
    textAlign(LEFT);
    text("Location: AB 8th floor", 815, 40);
    text("Day: Friday May 13", 815, 70);
    text("Time: 6pm to 8pm", 815, 100);
  }
  
 
  if (frameCount >= 9) {
    stroke(220);
    line(180, 250, 210, 180);
  }
  if (frameCount >= 11) {
    line(490, 365, 600, 365);
    line(600, 365, 650, 270);
  }
  if (frameCount >= 13) {
    noStroke();
    circle(335, 450, 5);
  }
  if (frameCount >= 16) {
    noLoop();
    fill(150);
    rect(0, 0, 1024, 768);
  }
  println(stage);
}

Then I tried to research mouseClicked and KeyPressed code by myself. First, I faced difficulties using the mouseClicked code, so I asked LA Coco for help. She told me that I can use “boolean state = false;” to deal with this problem. Later, I keep writing code, including adding invitation texts and creating a LED graph, which represents the interaction Lab. Nevertheless, no matter how many times I pressed the key, the code still could not work properly. As a result, I turned t0 LA Sarah for help. We tried many different approaches and meet a consensus that maybe KeyPressed does not work like mouseClicked, but we still use boolean eventually to debug the code. 

int speed = 0;
int stage = 0;
boolean state = false;
boolean yKeyPressed = false;
int value = 100;
void setup() {
  size(1024, 768);
  frameRate(4);
  background(150);
}
void draw() {
  background(150);
  for (int i = 0; i < 30; i ++) {
    stroke(255);
    strokeWeight(3);
    line(speed, 0, speed, 768);
    speed = speed + 10;
  }
  if (frameCount >= 6) {
    textAlign(LEFT);
    textSize(130);
    fill(245, 183, 177);
    text("I", 180, 250);
    text("M", 500, 350);
    text("A", 300, 550);
    textSize(28);
    text("Spring 2022 \nEnd-Of-Semester Show", 700, 650);
    fill(255);
    noStroke();
    rect(790, 20, 2, 100);
    rect(795, 20, 2, 100);
    textSize(20);
    textAlign(LEFT);
    text("Location: AB 8th floor", 815, 40);
    text("Day: Friday May 13", 815, 70);
    text("Time: 6pm to 8pm", 815, 100);
  }
  if (frameCount >= 9) {
    stroke(220);
    line(180, 250, 210, 180);
  }
  if (frameCount >= 11) {
    line(490, 365, 600, 365);
    line(600, 365, 650, 270);
  }
  if (frameCount >= 13) {
    noStroke();
    circle(335, 450, 5);
  }

  if (state) {
    textSize(25);
    textAlign(CENTER);
    fill(255);
    text("Would you like to attend?", 360, 70);
    textSize(28);
    text("Y", 520, 70);
    text("or", 540, 70);
    text("N", 565, 70);
  }
  if (yKeyPressed) {
    value = 0;
    textSize(28);
    fill(250, 215, 160);
    text('Y', 520, 70);
    delay(200);
    noStroke();
    fill(#6942A0);
    stroke(#6942A0);
    strokeWeight(1.5);
    ellipse(52.5, 52.5, 25, 25);
    rect(40, 50, 25, 20);
    line(30, 70, 72.5, 70);
    line(30, 75, 72.5, 75);
    line(43, 76.5, 43, 90);
    line(60, 76.5, 60, 102.5);
    textSize(35);
    fill(250, 215, 160);
    text("WELCOME!", 200, 700);
  }
}
void mouseClicked() {
  state = true;
}
void keyPressed() {
  if (key == 'Y' || key == 'y') {
    yKeyPressed = true;
  } else {
  }
}

Final video: