ITP Blog

ICM - Week 2: Animation

TITLE:  The Small Bang

DATE:  September 2016

INSTRUCTORS:  Daniel Shiffman


TOOLKITS:  JavaScript + P5.js



As the rules of the assignment:

  1. One element controlled by the mouse.
  2. One element that changes over time, independently of the mouse.
  3. One element that is different every time you run the sketch.
  4. (You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.)



All I used to create this P5 illustration is ellipses.

  1. Background: The background is different every time I run the sketch, but will be controlled by the mouse
  2. The Moon and Moon orbit: The moon orbit is controlled by the mouse
  3. The Sun: The sun changes over time, independently of the mouse
  4. The earth: The earth is controlled by the mouse



Here is the original code.



The point is how to make the earth controlled by mouse but attached to the orbit. The solution is Math:

earthRadius stands for the angle created by the horizontal line and line which connects the mouse and the center of the canvas.

earth.xPostion = width / 2 – earthOrbit.r * cos(earthRadius);
earth.yPosition = height / 2 -earthOrbit.r * sin(earthRadius);



  1. It seems that we couldn’t use both of the angleMode in one project.
  2. How to make text fixed at the center of the canvas? (The center of the text need to be fixed to the center of the canvas)
  3. How to make a shape with stroke disappeared?