Recitation 11/2 – Animating an Interactive Poster

Here is the work I did during the recitation!

Here’s the code for this poster!

float firstTerm1 = 1;
float secondTerm1 = 1;
float firstTerm2 = 1;
float secondTerm2 = 1;
float firstTerm3 = 1;
float secondTerm3 = 1;

int i = 0;
int i2 = 0;
int i3 = 0;

PFont font1;
PFont font2;

void setup(){
  size(1024, 768, P3D);
  font1 = createFont("YuKyo_Yoko-Bold", 30);
  font2 = createFont("YuKyo_Yoko-Medium", 20);
  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  ellipseMode(CENTER);
  drawBack();
  drawText();
}

void draw(){
  drawText();
  drawI(); 
  drawM();
  drawA();
  
  if (keyPressed){
    //drawArcs();
    if(key == 'i' || key == 'I'){
      drawI();
    }
    if(key == 'm' || key == 'M'){
      drawM();
    }
    if(key == 'a' || key == 'A'){
      drawA();
    }
    if(key == 'b'|| key == 'B'){
      drawBack();
    }
  }
}
void drawBack(){
  background(0);
}

void drawArcs(){
  fill(random(0, 25));
  arc(542, 404, 800, 800, 0 - QUARTER_PI, HALF_PI+QUARTER_PI);
  fill(random(50, 75));
  arc(492, 404, 500, 500, HALF_PI - QUARTER_PI, PI+QUARTER_PI);
  fill(random(0, 25));
  arc(492, 364, 700, 700, PI - QUARTER_PI, PI+HALF_PI);
  fill(random(50, 75));
  arc(542, 364, 600, 600, PI, TWO_PI+QUARTER_PI);
  
  //change it to balls bouncing around the screen
}

void drawI(){
  noStroke();
  
  if(i % 2 == 0){
    fill(120, 80, 60, 10);
  }
  
  else{
    fill(200, 80, 60, 10);
  }
  
  ellipse(162, 84, secondTerm1, secondTerm1);
  rect(162, 250, secondTerm1, secondTerm1 + 100, 50);
  
  float nextTerm1 = firstTerm1 * 1.5;
  firstTerm1 = secondTerm1;
  secondTerm1= nextTerm1;
  
  if(firstTerm1 >= 150 || secondTerm1 >= 150)
  {
    firstTerm1 = 1;
    secondTerm1 = 1;
    i++;
  }

}

void drawM(){
  noStroke();
  
  if(i2 % 2 == 0){
    fill(0, 80, 60, 10);
  }
  
  else{
    fill(240, 80, 60, 10);
  }
  
  rect(312, 240, secondTerm2, secondTerm2 + 120, 50);
  rect(462, 250, secondTerm2, secondTerm2 + 100, 50);
  rect(612, 250, secondTerm2, secondTerm2 + 100, 50);
  
  rect(387, 185, 1.5 * secondTerm2, secondTerm2 * 0.8, 50);
  rect(537, 185, 1.5 * secondTerm2, secondTerm2 * 0.8, 50);
  
  float nextTerm2 = firstTerm2 * 1.5;
  firstTerm2 = secondTerm2;
  secondTerm2= nextTerm2;
  
  if(firstTerm2 >= 150 || secondTerm2 >= 150)
  {
    firstTerm2 = 1;
    secondTerm2 = 1;
    i2++;
  }
}

void drawA(){
   noStroke();
  
  if(i3 % 2 == 0){
    fill(0, 80, 60, 10);
  }
  
  else{
    fill(50, 80, 60, 10);
  }
  
  ellipse(792, 250, secondTerm3*1.5, secondTerm3*1.5);
  rect(892, 250, secondTerm3, secondTerm3 + 100, 50);
  
  float nextTerm3 = firstTerm3 * 1.5;
  firstTerm3 = secondTerm3;
  secondTerm3= nextTerm3;
  
  if(firstTerm3 >= 150 || secondTerm3 >= 150)
  {
    firstTerm3 = 1;
    secondTerm3 = 1;
    i3++;
  }
}

void drawText(){
  //add the necessary info
  textSize(30);
  textAlign(CENTER);
  fill(random(0, 90), 80, 90, 10);
  text("Fall 22 End-Of-Semester Show", width/2, random((height/2) + 20, (height/2) + 25), random(20));
  fill(random(91, 180), 80, 90, 10);
  text("8th floor", width/2, random((height/2) + 60, (height/2) + 65), random(1,20));
  fill(random(181, 270), 80, 90, 10);
  text("Friday December 16", width/2, random((height/2) + 100, (height/2) + 105), random(1, 20));
  fill(random(271, 360), 80, 90, 10);
  text("6pm - 8pm", width/2, random(height/2 + 140, height/2 + 145), random(20));
} 

Here’s the work I did for homework!

Here’s the code for this poster!

float firstTerm1 = 1;
float firstTerm = 1;
float firstTerm2 = 1;
float firstTerm3 = 1;

float secondTerm = 1;
float secondTerm1 = 1;
float secondTerm2 = 1;
float secondTerm3 = 1;

int i = 0;
int i2 = 0;
int i3 = 0;

int x = 10;
int y = 200;
int b;

PImage rudi;
PImage gottfried;
PImage margaret;

void setup(){
  size(1024, 768);
  frameRate(20);
  rudi = loadImage("rudifinal.png");
  gottfried = loadImage("gottfriedfinal.png");
  margaret = loadImage("margaretfinal.png");
  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  ellipseMode(CENTER);
  drawBack();
  drawInstructions();
}

void draw(){
  if(key == 'r' || key == 'r'){
    drawRudi();
    drawRed();
  }
  if(key == 'g' || key == 'G'){
    drawGottfried();
    drawGreen();
  }
  if(key == 'm' || key == 'M'){
    drawMargaret();
    drawMagenta();
  }
  if(key == 'b' || key == 'B'){
    drawBack();
  }
  if(key == 'i' || key == 'I'){
    drawInstructions();
  }
}

void drawInstructions(){
  textSize(30);
  textAlign(CENTER);
  fill(360);
  text("Press R to see Rudi!", width/2, random((height/2) + 20, (height/2) + 25), random(20));
  text("Press G to see Gottfried", width/2, random((height/2) + 60, (height/2) + 65), random(1,20));
  text("Press M to see Margaret!", width/2, random((height/2) + 100, (height/2) + 105), random(1, 20));
  text("Press I to see instructions again", width/2, random(height/2 + 140, height/2 + 145), random(20));
}

void drawRudi(){
  image(rudi, mouseX, mouseY);
}

void drawGottfried(){
  image(gottfried, mouseX, mouseY);
}

void drawMargaret(){
  image(margaret, mouseX, mouseY);
}

void drawBack(){
  background(0);
}

void drawRed(){
  for(int i = 1; i < width; i = i + 20){
    for(int j = 1; j < height; j = j + 20){ //fill(0); //noStroke(); //ellipse(i, j, firstTerm * 1.5, firstTerm * 1.5); fill(random(1, 25), 90, 50); stroke(0); strokeWeight(random(1, 5)); ellipse(i, j, firstTerm, firstTerm); } } float nextTerm = firstTerm * 1.5; firstTerm = secondTerm; secondTerm= nextTerm; if(firstTerm >= 20 || secondTerm >= 20)
  {
    firstTerm = 1;
    secondTerm = 1;
  }
}

void drawGreen(){
  for(int i = 1; i < width; i = i + 20){
    for(int j = 1; j < height; j = j + 20){ //fill(0); //noStroke(); //ellipse(i, j, firstTerm * 1.5, firstTerm * 1.5); fill(random(120, 200), 90, 50); stroke(0); strokeWeight(random(1, 5)); ellipse(i, j, firstTerm, firstTerm); } } float nextTerm = firstTerm * 1.5; firstTerm = secondTerm; secondTerm= nextTerm; if(firstTerm >= 20 || secondTerm >= 20)
  {
    firstTerm = 1;
    secondTerm = 1;
  }
}

void drawMagenta(){
  for(int i = 1; i < width; i = i + 20){
    for(int j = 1; j < height; j = j + 20){ //fill(0); //noStroke(); //ellipse(i, j, firstTerm * 1.5, firstTerm * 1.5); fill(random(260, 280), 90, 50); stroke(0); strokeWeight(random(1, 5)); ellipse(i, j, firstTerm, firstTerm); } } float nextTerm = firstTerm * 1.5; firstTerm = secondTerm; secondTerm= nextTerm; if(firstTerm >= 20 || secondTerm >= 20)
  {
    firstTerm = 1;
    secondTerm = 1;
  }
}

After doing this exercise, I learned that you could do more than what I initially imagined with processing. While I wish I had explored more functions and interesting things processing can do, I enjoyed seeing the possibilities that for loops had to offer! I struggled a bit when developing ways to include and create graphics that change over time and combine static and interactive items.