IxLab Recitation 6: Animating an Interactive Poster

The Poster

 

 

 

 

 

 

 

 

float roV = 0;
float Blue = 0;
float Red = 0;
float Green = 0;
float x = 0;
float y = 0;
float poX = 0;
float poY = 0;
float noiseStep = 0;
PFont thatFont;
PFont thisFont;

void setup() {
  size(768, 1024);
  background(0);
  thatFont = createFont("Gilroy-Light.otf", 128);
  thisFont = createFont("Gilroy-ExtraBold.otf", 128);
}

void draw() {
  if (mousePressed == false) {
    noStroke();
    background(0,1);
  }
  OtherWords();
  stroke(0);
  //noStroke();
  for (y = 0; y < (height * 10) / 8; y += width / 10 - 1) {
    for (x = 0; x < (width * 10) / 8; x += width / 10 - 1) {
      Blue = map(x + y, 0, width + height, 0, 255);
      Red = map(0, 0, width, 0, 255);
      Green = map(0, 0, height, 0, 255);
      fill(87, 6, Blue);
      rectMode(CENTER);
      //poX = x + random(0, x + y - width / 10 - height / 10) / 50;
      //poY = y + random(0, x + y - width / 10 - height / 10) / 50;
      //noiseSeed(int(x + y));
      //poX = x + noise(noiseStep)*x/15;
      //poY = y + noise(noiseStep)*y/15;
      poX = x;
      poY = y;
      push();
      translate(poX, poY);
      rotate(cos(noiseStep/20)*10.+0.5);
      scale(cos(noiseStep/20 +x + y)*1.);
      rect(0, 0, width / 12, width / 12);
      pop();
    }
  }


  Poster();
  Stars();
  noiseStep += 0.5;

  //println(noise(noiseStep));
}

void mousePressed() {
}

void OtherWords() {
  push();
  textFont(thisFont);
  translate(0, 130);
  textSize(300);
  //textSize(100);
  //text("FINAL SHOW", 0, 600);
  fill(255);
  text("NOW", -20, 550);
  textSize(190);
  text("Loading", -20, 700);
  pop();
}

void Poster() {
  push();
  textFont(thatFont);
  fill(255);
  textSize(40);
  text("NYUShanghai", 50, 100);
  text("InteractiveMediaArt", 50, 140);
  pop();

  push();
  textFont(thisFont);

  translate(0, 130);
  textSize(300);
  //fill(150, 100);
  //text("IxLab", -15, 304);
  fill(255);
  text("IxLab", -20, 300);

  //textSize(100);
  ////text("FINAL SHOW", 0, 600);
  //text("NOW", -20, 550);
  //textSize(190);
  //text("Loading", -20, 700);
  pop();
}

void Stars(){
  push();
  translate(random(700),random(1000));
  fill(#ffe089);
  noStroke();
  beginShape();
  scale(random(0.5, 3));
  vertex(0,0);
  vertex(2,18);
  vertex(20, 20);
  vertex(2, 22);
  vertex(0, 40);
  vertex(-2,22);
  vertex(-20, 20);
  vertex(-2,18);
  endShape();
  pop();
}

Making Process

I started with a couple of rectangles which are randomly placed on the screen. Then the loading animation gave me the inspiration to do the poster. I use cos() to change the scale and the rotation of the rectangles. I set the step coordinate with the position of the rectangles. Also, I find the NYU Violet color from the website and use the gradient blue to form a dramatic color shift. Finally, I choose some fonts which are suitable for a poster and add them with related words to the poster. To emphasize the loading animation, I put the NOW LOADING words behind the rectangles to form a sense of multi-dimension. I also add a random shining star to strengthen the visual impact of the poster. As for the interaction part, I use mousePressed() to make the background able to memorize the shape that has been painted before which brings the audience another kind of visual effect.