Computational Media / Week Two / by Pippa Kelmenson

P5.js Screen Drawing

For the second iteration of my P5.js sketch, I included the following parameters:

  • One element controlled by the mouse.

  • One element that changes over time, independently of the mouse.

  • One element that is different every time you run the sketch.


Final Product

Final Product

Step 1

Step 3: Adding Random Tail, Debugging Automated Tongue

Step 2: Adding Mouse-Controlled Bone

Step 4


Although I found it relatively simple to figure out how to arrange a drawing to move in sync with the mouse, I struggled most with stopping, starting, and returning movement at a certain (x, y) point. By writing an “if” statement with the variable “tongue,” I was able to animate the arc of the mouth to a specific speed that started, stopped, and returned in a loop. I also created variables to control the tail randomly with each refresh of the sketch, and to separately move the bone with the mouse. When combined with "random()”, the tail became independent from the body, randomly refreshing its position each time the sketch is run, starting at “tailstart” and ending at “tailend”. My bone variable simply applied symmetrical properties to my bone drawing, so that my code was more legible and my experience working on my sketch simpler.

I had trouble converting radians to degrees as well as remembering what numbers in each variable do. I hope to make other aspects of my drawing move at different intervals as time progresses, and review the protocol for creating my own variables.

You can find my P5.js code here: