Week 2 - Animation and Interaction

Exercises and Assignment

Debugging -

<---- Definitely not how I felt learning to code and doing these assignments...

Debugged code below

Part 1: Move a circle from the middle of the canvas to the right side of the screen.

Part 2: Add 3 more, 1 moving left, 1 moving up, 1 moving down.

Part 3: Add 4 more, 1 moving towards each of the 4 corners of the canvas.

Part 4: Make one of your circles move 10 times faster.

Move a circle towards or in the direction of the mouse. 

Hint: Use mouseX and mouseY.

Note: Moving TOWARDS the mouse is different from moving WITH the mouse.

Part 1: Make a circle bounce around the canvas. (It should change direction when hitting any side of the canvas.)

Part 2: Make its color FADE from black to white and then white to black at the same time.

Part 3: Make it so that every time the user presses the mouse, the circle moves faster.

Place a white square on a gray background. Turn the square into a button with a “hover” state:

Part 1: make it yellow when the user is hovering over it (without having clicked it).

Part 2: make it white when inactive (not hovering).

Part 3: make it black when the user is actively holding the mouse button down inside of it. (Hint: Use mouseIsPressed)

Creative Assignment 02 - Opposites

Sun & Moon