Interactive Collision Sketch in P5-Terminal


For this homework, I created a P5.js sketch and using an app.js file to serve the sketch. Meanwhile, I used NPM prompted so that the user can have input in the Terminal to affect the sketch in the browser through When the server js file is funning, there will be a prompt in the Terminal window asking the user for the size of the particles on the screen. The user can keep entering different numbers. However, if the prompt receives “p5”, the data of the yellow circle’s position will be printed in the Terminal window instead.


In the P5.js sketch, I created an object for the particles and then wrote an array of them randomly appearing on the screen. The avatar, the yellow circle, follows the mouse position and chases the particles away. Because I used pmouseX and pmouseY to determine which direction the avatar comes from, the particles are repelled in the same direction.

Potential Ideation:

I learnt about Tibetan Mandala sand art in the past summer and I was very fascinated in the delicacy and endurance of the creating process of Mandala. During the China trip, Henry, Regina, Vivian (MFA) and I visited a Tibetan temple in Beijing and therefore came up the idea of making a digital version of Mandala. This homework can be a prototype for the digital Mandala. Taking it further, I can use an image and turn each one of the pixels into a particle (like sand grains). The yellow circle can be the hand that destroys the image.

Here are two screenshots of the homework:

Screen Shot 2015-11-18 at 11.49.56 PM Screen Shot 2015-11-18 at 11.50.00 PM

Here is the code on GitHub.




Leave a Reply

Your email address will not be published. Required fields are marked *