Recitation 6: Processing Animation

Inspiration:

I was attracted to this gif on the recitation page and decided to remake this animation for documentation.

Steps:

I first created a void setup and void draw, and set the canvas size to 600×600. Then I need a circle that can follow wherever my mouse is going, so I first set the background to white, then created a ellipse with [no fill] and stroke color is black. I set the ellipse size to 50×50, and mouse X and Y for locations (so it can move with my mouse). Then I ran the code, but noticing the circle won’t appear like above.

After a long time of struggle, I went to watch Daniel Shiffman’s processing tutorial and noticed that I shouldn’t put background in void draw, but in void set up, after I moved the background to void setup, everything went well. Below is the final animation look.

螢幕錄製 2021-11-01 下午11.32.47

void setup(){
  size(600, 600);
  background(255);//set background only once
}

void draw(){
  noFill();
  stroke(0);
  ellipse(mouseX, mouseY, 50, 50);//draw circles while mouse moves around canvas
  
}

Then I soon noticed that I need to add a reset component to reset the drawing, so I added void mouse pressed; every time the mouse is pressed, the drawing will be resetting.

Here is the final code for the effect.

void setup(){
  size(600, 600);
  background(255);//set background only once
}

void draw(){
  noFill();
  stroke(0);
  ellipse(mouseX, mouseY, 50, 50);//draw circles while mouse moves around canvas
  
}

void mousePressed(){
  background(255);//when you click, reset the drawing
}

Challenge and possible modifications:

My challenge was in the beginning, I wasn’t able to figure out where should I start, so I use the simplest combination (mouse movement and shape) to create something. Ellipse could also change to rectangle, and stroke could also change color.

I really want to figure out how the color will change while our mouse is moving, so it ends up with circles that have different colors. (I will add it below once I figure it out).

Second Animation practice:

I was inspired by the in class example that looked like button (when your mouse is on a specific place on the canvas, the color changes)

Here is the final video of the effect:

螢幕錄製 2021-11-02 下午12.07.37

Here is the final code of the effect:

//if practice
void setup(){
  size(600, 600);
  
}

void draw(){
  background(0);
  
  if (mouseX < 300 && mouseY < 300){
    fill(0, 15,255);
    rect(0, 0, 300, 300);
  }
  
  if (mouseX > 300 && mouseY < 300){
    fill(15, 200, 155);
    rect(300, 0, 300, 300);
  }
  
  if (mouseY > 300 && mouseX > 300){
    fill(200, 143, 62);
    rect(300, 300, 300, 300);
  }
    
  if (mouseY > 300 && mouseX < 300){
    fill(240, 10, 30);
    rect(0, 300, 300, 300);
  }
  
  line(300, 0, 300, height);
  line(0, 300, 600, 300);
}

 I first draw 2 lines to separate my canvas, and used if loop to set the appearance of the rectangles. I also used && statement to state a specific area (otherwise when y is greater than 300 there will be multiple colors appearing, so I have to limited it down to when y > 300 and x < 300 or when y> 300 and x > 300).