Recitation 6: Animating an Interactive Poster

Recording

Reflections

I wrote the whole program by myself, so, definitely there have been many findings along the way.

The most interesting function that I used is how to create a sense of fading in. I thought about using lerp() that interpolates linearly, but everything all came down to the alpha channel in the fill() function. It suddenly occurred to me that some math function has the property that I need to shape the alpha. For a fading in visual, the first derivative of the function should be increasing and always larger than zero.

Flipped arctangent was the one that came to me. I adjusted the function to fit the correct alpha variations with a proper delay, which allowed me to get rid of the impractical frameCount.

The second thing that I found intriguing is how to fade out shapes after they appear on the screen. A short cut that I took advantage of was to creating new rectangles continuously, that have the exact size as the canvas, filling with the same color as the background, but with a certain degree of transparency. As the semitransparent layers overlap one after another, the original figure gradually disappears. 

CODE

float deg = 0;
float Radius = 0;
int count_pre = 0;
float

 stick_alpha = 0;
float word_alpha = 0, poster_alpha = 0;
Boolean terminator = false, runStarter = false;
float x_up = width/2, y_up = 0.23

*height*10, x_down = width/2, y_down = 0.41*height*10; //??????????????????

void setup () {
  size(768, 1024);
  background(250, 145, 128);
}

void draw () {
  noFill();
  if (frameCount>0 && mousePressed==true && terminator==false) {
    //background(250, 145, 128);
    terminator = true;
    runStarter = true;
  }
  
  if (terminator==false && runStarter==false) {
    circleLeft(width/2, 0.23*height, width/2, 0.41*height, 250, 280);

    //if (frameCount>=270) {
    //  stick();
    //}
    if (frameCount>=150) {
      word("CLICK");
    }
    else {
      word("LOADING");
    }
  }
  
  if (runStarter == true) {
    open();
  }
}

void move() {
  circleLeft(mouseX, mouseY, mouseX, mouseY, 50, 50);
}

void open() {
  noStroke();
  fill(250, 145, random(128, 156), 55);
  rectMode(CORNER);
  rect(0, 0, 768, 1024);
  
  y_up = lerp(y_up, 0, 0.02);
  y_down = lerp(y_down, 1024, 0.05);
  circleLeft(width/2, y_up, width/2, y_down, 350, 500);
  
  poster();
  move();
}

void poster() {
  poster_alpha += 1.5;
  textAlign(CENTER);
  
  textSize(200);
  fill(219, 255, 149, -31.83*atan(30-0.5*poster_alpha)+48.938);
  text("IMA", width/2, 0.2*height); 
  fill(175, 247, 255, -31.83*atan(30-0.5*poster_alpha)+48.938);
  textSize(220);
  text("IMA", width/2, 0.2*height); 
   
  textSize(60);
  fill(222, 255, 174, -31.83*atan(25-0.3*poster_alpha)+48.938);
  text("Fall 22", width*0.75, 0.25*height); 
  textSize(60);
  fill(175, 247, 255, -31.83*atan(25-0.3*poster_alpha)+48.938);
  text("Fall 22", width*0.75+4, 0.25*height+4); 
  
  
  textSize(100);
  fill(255, 184, 225, -31.83*atan(55-0.5*poster_alpha)+48.938);
  text("8th FLOOR", width*0.35, 0.8*height); 
  textSize(110);
  fill(219, 255, 149, -31.83*atan(55-0.5*poster_alpha)+48.938);
  text("8th FLOOR", width*0.35, 0.8*height); 

  textSize(60);
  fill(223, 252, 235, -31.83*atan(85-0.5*poster_alpha)+48.938);
  text("December 16, ", width*0.6, 0.85*height); 
  textSize(60);
  fill(204, 153, 255, -31.83*atan(85-0.5*poster_alpha)+48.938);
  text("December 16, ", width*0.6-3, 0.85*height+3); 

  textSize(70);
  fill(223, 252, 235, -31.83*atan(85-0.5*poster_alpha)+48.938);
  text("18:00-20:00", width*0.65, 0.90*height); 
  textSize(70);
  fill(204, 153, 255, -31.83*atan(85-0.5*poster_alpha)+48.938);
  text("18:00-20:00", width*0.65-3, 0.90*height+3); 
  
  noStroke();
  fill(255, 255, 255, -10*atan(10-0.2*poster_alpha)+15);
  ellipse(width*0.5, 0.47*height, 1.5*width, 0.40*height);
  
  fill(175, 247, 255, -31.83*atan(10-0.1*poster_alpha)+48.938);
  textSize(124);
  text("End", width*0.5, 0.37*height); 
  fill(204, 153, 255, -31.83*atan(10-0.1*poster_alpha)+15);
  textSize(120);
  text("End", width*0.5, 0.37*height); 
  
  fill(175, 247, 255, -31.83*atan(10-0.1*poster_alpha)+48.938);  
  textSize(40);
  text("of", width*0.5, 0.4*height); 
  textSize(120);
  text("Semester", width*0.5, 0.48*height); 
  fill(204, 153, 255, -31.83*atan(10-0.1*poster_alpha)+48.938);
  textSize(43);
  text("of", width*0.5+1, 0.4*height+1); 
  textSize(123);
  text("Semester", width*0.5-1, 0.48*height-1); 
  
  textSize(200);
  fill(175, 247, 255, -31.83*atan(10-0.1*poster_alpha)+48.938);
  text("SHOW", width*0.5, 0.65*height); 
  textSize(190);
  fill(219, 255, 149, -31.83*atan(10-0.1*poster_alpha)+48.938);
  text("SHOW", width*0.5, 0.65*height); 
}

void word(String a) {
  word_alpha += 0.1;
  fill(250, 145, 128);
  stroke(250, 145, 128);
  rectMode(CENTER);
  rect(width/2, 0.72*height, 0.65*width, 0.15*height);
  
  textSize(128);
  fill(216, 255, 242, map(-cos(word_alpha), -1, 1, 0, 100));
  textAlign(CENTER);
  text(a, width/2, 0.78*height); 
}

void stick() {
  if (stick_alpha<=100) {
    stick_alpha +=1;
  } 
  else {
    stick_alpha = 100;
  }
  stroke(0);
  strokeWeight(0.1);
  fill(233, 212, 167, 50-50*cos(0.031415926*stick_alpha));
  rectMode(CENTER);
  rect(width*0.5, 0.59*height, width*0.05, height*0.1, 150);
}

void circleLeft(float x_up, float y_up, float x_down, float y_down, int size_up, int size_down) {
  noFill();
  // color
  stroke(175, 247, 255);
  //strokeWeight(6.5-(map(cos(deg), -1, 1, 1, 6)));
  Radius = map(cos(deg), -1, 1, 0, size_up);
  circle(x_up, y_up, Radius);
  deg += 0.01;
  delay(20);
  
  noFill();
  // color
  stroke(166, 252, 180);
  strokeWeight(2);
  //strokeWeight((map(cos(deg), -1, 1, 1, 6)));
  Radius = map(-cos(deg), -1, 1, 0, size_down);
  circle(x_down, y_down, Radius);
  deg += 0.04;
  //delay(20);
}