Recitation 6: Animating an Interactive Poster

IMA Poster With Stars

      My poster was inspired by the starry sky and I wanted to use an interactive poster to show the characteristics of IMA.

      Here is my final coding:

int x = 0;
float r = random(0, 255);
float g = random(0, 255);
float b = random(0, 255);
int x1=1024;
int y1=0;
String message = "IMA";
float x2, y2;
float hr, vr;
PFont myFont;
void setup() {
  size(1024, 768);
  background(#1B4371);
  noStroke();
  myFont =loadFont("ArimaKoshi-Black-255.vlw");
  textFont(myFont);
  textAlign(CENTER, CENTER);
  hr = textWidth(message) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x2 = width / 2;
  y2 = height / 2;
}
void draw() {
  fill(#1B4371, 50);
  rect(0, 0, width, height);
  if (abs(mouseX - x2) < hr &&
      abs(mouseY - y2) < vr) {
    x2 += random(-5, 5);
    y2 += random(-5, 5);
  }
   
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
  if (mousePressed == true) {
    fill(#BD5AF0);
  } else {
    fill(#FEFCFF);
  }
 
  text("IMA", x2, y2);

  
 
  
  if (mousePressed){
    float starX = mouseX + random(-50, 50);
    fill(mouseX, mouseY, 127);
    ellipse(mouseX, mouseY, 25, 25);
  }
  pushMatrix();
  fill(r, g, b );
  x1=x1-9;
  y1=y1+9;
  star(x1, y1 , 30, 70, 5); 
  star(x1-256, y1 , 30, 70, 5); 
  star(x1-512, y1 , 30, 70, 5); 
  star(x1-768, y1 , 30, 70, 5); 
  star(x1+256, y1 , 30, 70, 5); 
  star(x1+512, y1 , 30, 70, 5); 
  if(x1<0||y1>768){
  x1=1024;
  y1=0;
  }
  popMatrix();
}

void star(float x, float y, float radius1, float radius2, int npoints) {
  float angle = TWO_PI / npoints;
  float halfAngle = angle/2.0;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius2;
    float sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
  
}

       Here is my video: 

      I plan to design an interactive poster: a blue background with shooting stars flying by and IMA letters. I used if and for loop, and added mousePressed, and multiple variables. What I found very interesting was the trick that the professor helped me modify. When there was just the background code, the stars didn’t feel like shooting stars, and when the background was replaced with the fill and rect code, it would feel like shooting stars. In addition, I also applied another trick that I learned in class to my code. When I press the mouse, a colored circle will follow the movement. To make the poster more colorful, I applied the random code to the stars. So the stars are like shining all the way with different colors. I think the hardest part was how to make the design more interactive. I envisioned that when the cursor touched the IMA, it would make some interactions. So I added the tickle code. But I didn’t think that was enough, so I wrote another if loop so that when mousePressed, the IMA would turn purple. 

       I had a lot of difficulties in programming, for example, I didn’t know at first that I needed to define PFont to change the font, and when I loadFont I need to change the font size in advance, which can’t be changed by textSize. And the order of the code is also important, which determines whether some code can run smoothly or not. For example, the background of the coding should at the first or it will cover all other elements. I used a lot of variables, so I should be careful that they are corresponded one by one.

      Reference:

The coding for the star: https://processing.org/examples/star.html

The coding for the tickle：https://processing.org/examples/tickle.html