Recitation 6: Processing Animation

PROCESSING REFERENCE LINKS:

Keyboard interaction:                      

 

• • keyPressed
  • keyPressed()
  • key
  • keyCode

Mouse interaction:

 

• • mousePressed
  • mousePressed()
  • mouseX
  • mouseY
  • pmouseX
  • pmouseY

 

Interactive animation in Processing:

 

drawing of  Monk with an umberella and a little monk  

 

My code:

int x = 0; 

void setup(){
  size(500,500);
  //background(#60515C);
  noStroke();
  colorMode(HSB, 800);
  for (int i = 0; i < 500; i++) {
    for (int j = 0; j < 500; j++) {
      stroke(i, j, 500);
      point(i, j);
  }
}
  //strokeWeight(1);
  colorMode(HSB, 360, 100, 100);
}  
void draw() {
  int r = int(random(0, 255));
  int g = int(random(0, 255));
  int b = int(random(0, 255));
  if(keyPressed){
  fill(r,g,b,150);
  }

  noStroke();
  ellipse(mouseX,mouseY, 20, 40);
  
}
void mousePressed(){
  noStroke();
  colorMode(HSB, 800);
  for (int i = 0; i < 500; i++) {
    for (int j = 0; j < 500; j++) {
      stroke(i, j, 500);
      point(i, j);
    }
  }
}


To create an interactive animation in Processing, I utilized the interaction of both the mouse and the keyboard.

⬅️ Circles are drawn by the position of mouse.
And the color of the circle could be changed by touching the keyboard.



I changed the original purple background into a more colorful one. ➡️










⬅️By clicking the mouse, the drawing would be cleared and user can play again.



Inspired by my creation from Recitation 5, I changed the stroke the transparency. In this way, the drawing would be more clean.  ➡️

Additional Homework

Video here~  ⤵️

My code:

int i = 100;
float r;
float t;
int h = 200;

  
void setup(){
  size(600,600);
  colorMode(HSB, 360, 100, 100);
}

void draw(){
    background(360);
    t += 0.05;
    r = sin(t) +3;
    strokeWeight(30);
    stroke(h, 100, 100);
    h = h + 3;
    circle(300,300, i * r);  
    if ( h >= 360){
      h = 0;
}
}

I joined our Rainbow Group Study Session and changed original coding: 
the use of sin to give positive and negative value is really clever! 
By changing my if functions into sin(), I get a simpler program.