RECITATION 6

Animating an Interactive Poster

/**
 * Distance 2D. 
 * 
 * Move the mouse across the image to obscure and reveal the matrix.  
 * Measures the distance from the mouse to each square and sets the
 * size proportionally. 
 */
 
float max_distance;
PFont f;

void setup() {
  size(1024, 768); 
  smooth();
  f=loadFont("AmericanTypewriter-Bold-48.vlw");
  textFont(f,48);
  
  noStroke();
  max_distance = dist(0, 0, width, height);
  
  rectMode(CENTER);
 
}

void draw() {
  
  
  background(#C5A0D1,200);

  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= height; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 66;
      fill(120+i/7, 200, 200);
      stroke(#693579,120);
      strokeWeight(1);
      ellipse(i, j, size, size);
    }
  }
  
  stroke(0, 40);
  strokeWeight(10);
 line(250, 500+30, 350, 500+30);
 line(250, 518+30, 350, 518+30);
 line(280, 518+30,280,558+30);
 line(320,518+30,320,588+30);
 noFill();
 arc(300, 450+30, 60, 60, PI, 2*PI);
 triangle(285, 485+30, 285, 500+30,297, 500+30);
 line(270, 450+30, 270, 500+30);
 line(330, 450+30, 330, 500+30);
 
 beginShape();
vertex(303,478+30);
vertex(317, 478+30);
vertex(317, 500+30);
vertex(316, 500+30);
endShape(CLOSE);
point(230, 470+30);
point(240, 425+30);
point(275, 395+30);
point(370, 470+30);
point(360,425+30);
point(325,395+30);
  
  stroke(255);
  strokeWeight(10);
 line(150, 600, 250, 600);
 line(150, 618, 250, 618);
 line(180, 618,180,658);
 line(220,618,220,688);
 noFill();
 arc(200, 550, 60, 60, PI, 2*PI);
 triangle(185, 585, 185, 600,197, 600);
 line(170, 550, 170, 600);
 line(230, 550, 230, 600);
 
 beginShape();
vertex(203,578);
vertex(217, 578);
vertex(217, 600);
vertex(216, 600);
endShape(CLOSE);
point(130, 570);
point(140, 525);
point(175, 495);
point(270, 570);
point(260,525);
point(225,495);
  
 textSize(158.00);
 fill(#693579, 160); 
 text("IMA", 100, 150); 
 fill(#693579, 255);
 text("IMA", 100, 270);
 fill(0,50);
 text("IMA", 100, 390);
 
 textSize(36);
 fill(#693579);
 text("Fall 22 End-Of-Semester Show", 400, 500+50);
 text("Location: 8th floor",614,550+50);
 text("Day: Friday December 16",490,600+50);
 text("Time: 6pm to 8pm",623,650+50);

    translate(width/1.1, height/6);
    for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(300,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(255, 20);
        stroke(255,200);
        strokeWeight(3);
        triangle(0, -150, -150*sqrt(3)/2, 150/2, 150*sqrt(3)/2, 150/2);
        popMatrix();
    } 
}

homework

task 1

float max_distance;

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

}

void draw(){
  background(255);
  
  translate(-90,-110);
  for(int i = 1; i <= 5; i ++) {
    translate(200, 0);
    pushMatrix();
      for(int j = 1; j <= 4; j ++) {
        translate(0, 200);
     pushMatrix();
      for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(40,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(#BED5DB, 30);
        stroke(0+45*i);
        strokeWeight(1);
        triangle(0, -20, -20*sqrt(3)/2, 20/2, 20*sqrt(3)/2, 20/2);
        popMatrix();
      } 
     popMatrix();
  }
  popMatrix();
 }
}

task 2

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

}

void draw(){
  background(255);
  
   
 
  float r = random(100,900);
  float q = random(100,650);
   float m = random(100,255);
   float n = random(100,255);
   float t = random(1,10);
  translate(r, q);
      for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(20*t,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(#BED5DB, 30);
        stroke(n,m, 0);
        strokeWeight(1);
        triangle(0, -10*t, -t*10*sqrt(3)/2, t*10/2, t*10*sqrt(3)/2, t*10/2);
        popMatrix();
      } 
      
      delay(500);
  }

task 3

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

}

void draw(){
  background(255);
  
   
 

   float m = random(100,255);
   float n = random(100,255);
   float t = 5;
  translate(mouseX, mouseY);
      for (int p = 0; p <= 90; p += 1){
        rotate(radians(360/90));
        pushMatrix();
        translate(20*t,0);
        rotate(radians(millis()/50+2*p*360/90));
        fill(#FFC1C1, 30);
        stroke(n,m, 0);
        strokeWeight(1);
        triangle(0, -10*t, -t*10*sqrt(3)/2, t*10/2, t*10*sqrt(3)/2, t*10/2);
        popMatrix();
      } 
      
      
  }

Spending a lot of time doing this work, trying and failing, I learned a lot. I searched online for help and learned how to use “translate” and ” rotate”. The process of making the poster and doing the homework was really a pleasure.