Recitation6: Documentation

Animating an Interactive Poster

Instruction: https://wp.nyu.edu/shanghai-ima-interaction-lab/recitation-6-interactive-poster/

Today’s recitation asked us to create an animated poster which is constituded by a fixed pattern.

Pattern

It required us to come up with a pattern and used nested for loops to display it on the whole canvus repeatedly. I got an idea from this picture, whose interactive effects were I wanted to implement later.

I grabed the idea of circular movement and designed two circular orbit with two circle on it. 

Multiplication

Instead of manually adjusting the spacing, I decided to adjust the numbers of row and column. The algorithm will generate the spacing accordingly. I think this is more interacitve and direct. 

Implement of rotate()

In order to achieve the interactive effect that the circle will rotate according to the position of mouse, I did some research on the rotate() method. I found another function translate() connecting closely to rotate, which can reset the original point. 

Angles:

Using rotate() also needs the data of angle. To get the angle of mouse, I stored the value of a,b,c, representing different edges of a triangle, and calculated the sin. Then I found the method asin() which can return the inverse value of sin value. (I just searched “sin” in the liberary and got two results, one is sin, the other should be arctan obviously)

 

Push() and Pop()

I spent a lot of time resetting the original point and complaint about it to my friend Andy. He suggested me that I can use push() and pop(), which can localize the operations such as fill(), stroke(), translate(),etc. 

Adaptation:

The outcome was out of expectation. 

 
This is because sin() is a periodic function, and cannot reflect angle correctly, according to high school knowledge, the same for cos(). Instead of doing a lot of experiment, I decided to abandon the idea of rotate(). I calculated the position according to the angle directly. I also specialized the movement of two circle by switching the position of cos and sin. 

 

Colors and Size:

After implementing the shape and arrangement, I added two arguments to the pattern funtion which can change the properties of the pattern. 

Modifying Modular:

Using “%” for animation has a disadvantage when reaching to the peak, it will change rapidly to 0, which is a very bad art effect. To fix the disadvantage, I used abs() method (ie. Substracted by a/2, 0 and a-1 will return the same absolute value), so it can stablize the changing. 

drawPatten(i,j,abs(5-int(millis()/100.)%10)+50,abs(100-((int(i*xnum+j-millis()/50.))%200))+55); 

I also copy sky() from code in the lecture and change the parameters. It is how it looked finally:

 

Random:

I copied my code to a new sketch and randomized my poster. There a few things I adapted. I filled the orbit and change the sequence of display, ie. drew the larger obit first and the smaller second. I randomized the color of circles and orbits in different color disks. The blue of circles and the red of orbits would changed according to the random argument. 

I got a little confused on the phrase ” Display your design a hundred times in random positions on the screen” because the draw() function is looping all the time. So I put the main code in setup() and draw() respectively. I thought setup() would generate a better effect. 

setup():

draw():

 

Code for interaction: 

void drawPatten(int x, int y, int s, int colo){
  push();
  noFill();
  strokeWeight(2);
  stroke(255);
  translate(0,0);
  circle(x,y,s*2);
  circle(x,y,s*4);
  pop();
  push();
  fill(0,120,colo);
  translate(x, y);
  noStroke();
  float a = mouseX-width/2.;
  float b = mouseY-height/2.;
  float c = sqrt(pow(a,2)+pow(b,2));
  float Sin = b/c;
  //rotate(asin(Sin));
  //circle(s,0,40);
  //circle(2*s,0,40);
  float Cos = a/c;
  print(Sin,Cos,"\n");
  circle(s*Sin,s*Cos,40);
  circle(2*s*Cos,2*s*Sin,40);
  pop();
}


void setup(){
  size(768,1024);
}
//from IMA Lecture with parameters changed
void sky(){
  for(int i = 0;i <height;i++){
    float Color = map(i,0,height,75,150);
    stroke(87,6,225-Color);
    line(0,i,width,i);
  }
}
int xnum = 3;
int ynum = 4;
void draw(){
  background(200);
  push();
  sky();
  pop();
  int Xspacing = width/xnum;
  int Yspacing = height/ynum;
  for(int i = Xspacing/2;i<width;i+=Xspacing){
    for(int j = Yspacing/2;j<height;j+=Yspacing){
      drawPatten(i,j,abs(5-int(millis()/100.)%10)+50,abs(100-((int(i*xnum+j-millis()/50.))%200))+55);
    }
  }
}