Clusters🧚♂️
🔗 Interact with the “Clusters” on p5.js
VIDEO RECORDING
WORK PROCESS
p5.Vector
One of the most useful functions I learned this week was the set of p5.Vectors. What we learned in class was how to combine the vector function with the ES6 model (class). With refer to the official p5 reference page, I got to know the random2D() function and started by exploring the basic position, velocity, and acceleration functions.
In my project specifically, I set the acceleration vector (this.acc) to a random 2D vector so that the clusters experience a random change in their acceleration direction. Then, I added the acceleration vector to the velocity vector (this.vel), which then add to the position vector ()this.pos. This step updated the particle’s position based on the modified velocity.
After applying these basic movements, I noticed that the clusters “run” out of the canvas quickly. Thus, I decided to modify the properties and movements to inject dynamics into the clusters. First, I added a variable to adjust the diameter of the ellipse so that the clusters “grow” bigger and bigger as time passes by.
Then, I experimented with multiplying the velocity vector by the decelerating factor (this.dec). Thus, the clusters will gradually slow down over time, which simulates the air resistance that slows down the clusters.
Limit the Number of Objects
To ensure that the objects have limited numbers and will not exceed a certain amount, I applied the isDone method we learned in class to control the number of clusters within 300.
REFLECTION
Interactive Element 01: Insert New Clusters
The process of exploring the vectors and related math functions is quite fascinating. It was through this progress that I gained a deeper understanding of the vector functions and managed to implement interactive elements to the project. New clusters with a color variation can be generated through mouse pressing. Then the newly created clusters will grow independently and mix with the old red clusters.
Interactive Element 02: Store the Life Trajectory with mouseX
As I modified the transparency of the background, I found the trace of the clusters also very interesting. Therefore, I added a map() function to make the transparency of the background (black rectangle) changes based on the value of mouseX. In that sense, if the cursor is moved to the left side of the canvas the life trajectory of the clusters can be stored on the screen!
