Recitation 6: Animating an Interactive Poster

Thoughts on Experience:

This recitation was harder than I had anticipated. I expected to be able to complete this project easily but found many issues. At the beginning, I had trouble visualizing and decide how I wanted to create this project. I decided on the concept of making graphics for multiple of the items we use. I included a motor, some resistors, a fan, and the grid of dots to emulate a breadboard. I originally wanted all the resistors to move while in different starting positions, but found this too be too difficult. So, instead, I let all the resistors be in line with one another. I also though about having the fan blades rotate upon a click, but had difficulty understanding the mechanics. Overall, I am pretty happy with the outcome, but wish I had the skills to do more or try methods of interaction. I think I enjoyed building the overall look and found that to be easier.  I am glad that I was able to gain a better understanding of float versus int and how to use a dictionary to group variables. I found that I might need more time to understand and practice how to use rotate() and how to set random variables for different items without have draw reset the variable every second. I might also see what other animations can be done such as the pushMatrix() and more. 

Video Demonstration and Code for Interactive Poster:

//import random

//pallete = [FCF7FF,EF767A,49BEAA,456990]

float t= 0;
float r= 512;
float g= random (60, 115);
float p= random (60, 115);
float w= random (60, 115);
IntDict inventory;
void setup() {
  size(1024, 768);
  background(255);
  inventory = new IntDict();
  inventory.set("red", #EF767A);
  inventory.set("green", #49BEAA);
  inventory.set("blue", #456990);
  inventory.set("light", #FCF7FF);

}


void draw() {
  background(255);
  if ( mouseX > 512) {
    r=mouseX;
  }
  for (int y = 8; y < height; y = y + 73) {
    strokeWeight(5);
    stroke(inventory.get("red"));
    line(512, y, 1028, y);
    noStroke();
    fill(255);
    fill(inventory.get("blue"));
    circle(r+t, y, 56);
    circle(150 + r+t, y, 56);
    ellipse(75 + r+t, y, 180, 56);
    rectMode(CENTER);
    fill(inventory.get("green"));
    rect(g + r+t, y, 10, 50);
    rectMode(CENTER);
    fill(inventory.get("red"));
    rect(p + r+t, y, 10, 50);
    rectMode(CENTER);
    fill(inventory.get("light"));
    rect(w + r+t, y, 10, 50);
    if (r+t <= 1024) {
      t=t+.01;
    } else if (r+t == 1024) {
      r=512;
      t=0;
    }
  }
  breadboard();
  motor();
  fan();
  fill(#FCF7FF);
  textSize(50);
  text("IMA", 400, 550);
  textSize(25);
  textMode(SHAPE);
  text("Fall 22 End-Of-Semester Show", 400, 600);
  text("8th floor", 400, 630);
  text("Friday December 16", 400, 660);
  text("6pm to 8pm", 400, 690);
}

void breadboard() {
  for (int x = 0; x < 432; x = x + 160) {
    for (int y = -32; y < height + 64; y = y + 160) {
      noStroke();
      fill(inventory.get("blue"), 255);
      ellipse(x, y, 128, 128);
    }
  }
}
void motor() {
  noStroke();
  fill(inventory.get("blue"));
  rect(202, 80, 728, 728, 61);
  fill(inventory.get("light"));
  circle(202, 80, 598);
  fill(inventory.get("blue"));
  circle(202, 80, 45);
}
void fan() {
  noStroke();
  fill(inventory.get("red"), 242);
  arc(712.5, 609.5, 838.2, 838.2, 0, PI, PIE);
  arc(712.5, 609.5, 838.2, 838.2, PI-THIRD_PI, TWO_PI-THIRD_PI, PIE);
  arc(712.5, 609.5, 838.2, 838.2, PI+THIRD_PI, TWO_PI+THIRD_PI, PIE);
}

Code for Random Pattern:

IntDict inventory;
void setup() {
  size(1024, 768);
  background(255);
  inventory = new IntDict();
  inventory.set("red", #EF767A);
  inventory.set("green", #49BEAA);
  inventory.set("blue", #456990);
  inventory.set("light", #FCF7FF);
  resistorpattern();
}
void resistorpattern() {
  for (int y = 8; y < height; y = y + 73) {
    //for (int x = 0; x > 512; x = x + 30) {
    float r= random(0, 1024);
    float g= random (60, 115);
    float p= random (60, 115);
    float w= random (60, 115);
    strokeWeight(5);
    stroke(inventory.get("red"));
    line(0, y, 1028, y);
    noStroke();
    if (r < 1024) {
      fill(255);
      fill(inventory.get("blue"));
      circle(r, y, 56);
      circle(150 + r, y, 56);
      ellipse(75 + r, y, 180, 56);
      rectMode(CENTER);
      fill(inventory.get("green"));
      rect(g + r, y, 10, 50);
      rectMode(CENTER);
      fill(inventory.get("red"));
      rect(p + r, y, 10, 50);
      rectMode(CENTER);
      fill(inventory.get("light"));
      rect(w + r, y, 10, 50);
    }
  }
}