Documentation Blog on Recitation 6

This week’s recitation mainly focused on using processing to generate animation.

Here is the animation created:

Animation

Code here:

 

int x=0;
void setup() {
  size(600, 600);
  rect(10, 10, 580, 580);

  quad(20, 20, 20, 580, 200, 580, 200, 20);
  quad(210, 20, 210, 430, 580, 270, 580, 20);
  quad(210, 443, 210, 580, 580, 580, 580, 283);

  noFill();
  arc(50, 20, 300, 1586, 0, QUARTER_PI);

  fill(0, 0, 0, 0);
  circle(300, 550, 50);
  fill(0, 0, 0, 0);
  circle(250, 500, 70);
  fill(0, 0, 0, 0);
  circle(335, 480, 80);
  fill(0, 0, 0, 0);
  circle(280, 440, 30);
  fill(0, 0, 0, 0);
  circle(450, 465, 200);
  fill(0, 0, 0, 0);
  circle(533, 535, 80);
  fill(0, 0, 0, 0);
  circle(370, 540, 40);
  fill(0, 0, 0, 0);
  circle(480, 440, 100);
  fill(0, 0, 0, 0);
  circle(537, 350, 70);

  fill(200);
  circle(390, 178, 70);
}
void draw() {
  noStroke();
  if (mousePressed == true){
  fill(random(0, 255), random(0, 255), random(0, 255));

  circle(300, 550, 50);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(250, 500, 70);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(335, 480, 80);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(280, 440, 30);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(450, 465, 200);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(533, 535, 80);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(370, 540, 40);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(480, 440, 100);
  fill(random(0, 255), random(0, 255), random(0, 255));
  circle(537, 350, 70);
}
 noStroke();
  colorMode(HSB, 100);
  fill(random(0),random(0),random(0));
  circle(mouseX, mouseY, 30);
  noStroke();
  
strokeWeight(5);
for (int y = 0; y < height/2; y = y+10) {
  stroke(map(y, 0, height, 0, 360), 145, 0);
  line (0, y, width, y);
}
for (int x = 0; x < width/2; x = x+10) {
  stroke(map(x, 0, height, 0, 360), 0, 145);
  line (x, 0, x, height);
}
}

Functions that I found most interesting:

1. Random(): the random function creates something that is beyond our control and I think this is the key point in the interaction process. The fact that you have no idea what visual effect you will see after sending the input signal is what makes interactive media arts intriguing.
2. HSB: actually this is not a function, but I found this color mode extremely interesting because it has a better visual effect than the RGB, for instance, I can modify the hue and the saturation thanks to HSB, but with RGB, I cannily display certain color with almost the same brightness, which is a bit disappointing.

 

 

Additional Homework Part:

Using the mouse for interaction

Done(Still struggling with how to set a border)

 

Code here:

 

int x = 30;
int s = 2;
int w = 0;
int h = 0;
void setup() {
  size(600, 600);
  background(360);
  colorMode(HSB);
}
void draw() {
  background(255);
  stroke(x-50,360,360);
  strokeWeight(15);
  circle(w+width/2, h+height/2, x);
  if (x > 200 || x < 30) {
    s = -1*s;
  }
  x = x + s;
  if (keyPressed) {
    if (keyCode == UP) {
      h--;
    } else if (keyCode == DOWN) {
      h++;
    }
  }
if (keyPressed) {
    if (keyCode == LEFT) {
      w--;
    } else if (keyCode == RIGHT) {
      w++;
    }
  }

}