Particle constructor(x, y, gravityForce, targetX, targetY)
The constructor is called every time a new Particle is created. It sets up all the properties that define how the particle will behave. The key insight here is using vector math: we create a direction toward the mouse, normalize it to remove speed information, then multiply by a random speed to get the final velocity. This is a common pattern in particle systems.
constructor(x, y, gravityForce, targetX, targetY) {
this.pos = createVector(x, y);
this.vel = createVector(targetX - x, targetY - y);
this.vel.normalize();
let speed = random(8, 18);
this.vel.mult(speed);
this.acc = gravityForce.copy();
this.lifespan = 255;
this.size = random(4, 10);
this.initialSpeed = this.vel.mag();
}๐ง Subcomponents:
calculation
Velocity Direction Calculation
this.vel = createVector(targetX - x, targetY - y); this.vel.normalize();
Creates a vector pointing from the fountain source toward the mouse, then normalizes it to get only the direction (unit vector)
calculation
Random Speed Assignment
let speed = random(8, 18); this.vel.mult(speed);
Gives each particle a random speed between 8 and 18 units, creating variation in how fast particles travel
calculation
Gravity Assignment
this.acc = gravityForce.copy();
Copies the gravity vector so each particle has its own acceleration that won't be affected by other particles
Line by Line:
this.pos = createVector(x, y);- Stores the particle's starting position as a vector. The x and y come from the fountain source (bottom center)
this.vel = createVector(targetX - x, targetY - y);- Creates a velocity vector by subtracting the fountain position from the mouse position, giving a direction toward the mouse
this.vel.normalize();- Converts the velocity vector to a unit vector (length of 1) so it only contains direction information, not speed
let speed = random(8, 18);- Generates a random number between 8 and 18 to control how fast this specific particle will move
this.vel.mult(speed);- Multiplies the normalized direction vector by the random speed to create the final velocity
this.acc = gravityForce.copy();- Copies the gravity vector so this particle has its own acceleration that changes independently
this.lifespan = 255;- Sets the particle's initial transparency to 255 (fully opaque). This decreases over time to fade the particle out
this.size = random(4, 10);- Gives each particle a random size between 4 and 10 pixels for visual variety
this.initialSpeed = this.vel.mag();- Stores the particle's initial speed magnitude so the display() function can map colors consistently
