A few weeks ago, I found the fuzzy purple balls on P5.JS front page is fascinating and I was unable to recreate it yet back to then. Last week, after we learnt object, class and array,  I finally could do that. So for the homework last week, I made a fake P5.JS page.

Please click here to see the full screen version:  http://alpha.editor.p5js.org/full/H1Y80ZY2W

To create this work, here are things I learnt and used:


1. loadImage function

Firstly, I use loadImage to fake the page of P5.JS

2.  Array, push and splice.

For the fuzzy circle part, I created the central solid circle first and it generates a hollow circle every time it moves. Make the history of the ball’s movement path an array, and use a push to create a path array to storage all movement location history of the ball.

Splice is a function allows you pull out things from the array. For example, to limit the history/the number of hollow circles:

If (this.history.length > 25){



it means the index you want to delete and how many things you want to delete.

0: the oldest thing in the array,  1: take one thing out of array.


I used Array, push and splice twice in this project, another array of generate bubbles:

1 add new bubbles by using push, mousePressed()

2, delete bubbles by using splice, keyPressed()


3. vector()

Create vector() and give it value, make it a single variable instead of separate x, y coordinates. Then push the vector into the array and use a loop to go though the entire array, draw new hollow circles.

.Very helpful tutorial taught me how to track the trails of an object.



Here is the code of my fake p5 page:


Posted in ICM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s