✨ All About Classes & the Particle Class

When you click the canvas in origBomb.html, 150 glowing sparks fly outward, slow down, fade, and disappear. Each spark is a Particle object, born from the Particle class at the bottom of origBombSketch.js.

That class was written with AI help, which is completely legitimate — professional developers use AI every day. But there’s a critical difference between using AI output and understanding AI output. If you can’t explain what the code does, you can’t debug it, extend it, or reuse the technique in your next project.

This tutorial fixes that. By the end you will be able to:

• Explain what a class is in plain English (and in code).
• Define constructor, property, method, and instance.
• Walk through every line of the Particle class and explain exactly what it does.
• Explain why a class was the right tool for this animation.
• Modify the explosion yourself with confidence.

A class is a blueprint. A blueprint is not a building; it is the plan that tells you how to build a building.

In origBombSketch.js, the Particle class is written once. Every time you click, 150 new Particle objects (instances) are built from that one blueprint — each in its own random position, heading in its own random direction.

Imagine tracking just five sparks without a class. You’d need separate variables for every piece of data:

let spark1x, spark1y, spark1vx, spark1vy, spark1alpha, spark1size;
let spark2x, spark2y, spark2vx, spark2vy, spark2alpha, spark2size;
let spark3x, spark3y, spark3vx, spark3vy, spark3alpha, spark3size;
let spark4x, spark4y, spark4vx, spark4vy, spark4alpha, spark4size;
let spark5x, spark5y, spark5vx, spark5vy, spark5alpha, spark5size;
// ... and we need 150 sparks, not 5 ... nightmare.

function draw() {
  // Update spark 1
  spark1vx *= 0.95;
  spark1x  += spark1vx;
  spark1alpha -= 4;
  // Draw spark 1
  fill(255, 100, 0, spark1alpha);
  ellipse(spark1x, spark1y, spark1size);

  // Update spark 2 — copy/paste 148 more times ...
}

That is clearly unworkable. A class lets us package all of a spark’s data and behaviour together, then stamp out as many copies as we need:

let particles = [];    // one array holds ALL the sparks

function mousePressed() {
  for (let i = 0; i < 150; i++) {
    particles.push(new Particle(mouseX, mouseY));  // stamp: new instance
  }
}

function draw() {
  // Update & draw every spark — doesn't matter if there are 3 or 3000
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();   // each spark updates ITSELF
    particles[i].show();     // each spark draws ITSELF
    if (particles[i].finished()) {
      particles.splice(i, 1);
    }
  }
}

Every JavaScript class is built from the same four ingredients:

Here is the simplest possible class — a coin that knows its value and can report it:

class Coin {            // ← class declaration: names the blueprint

  constructor(value) {  // ← constructor: runs when we write 'new Coin(...)'
    this.value = value; // ← property:    'this' means "this specific coin"
    this.flipped = false;
  }

  flip() {             // ← method:      a function the coin can perform
    this.flipped = !this.flipped;
  }

  report() {           // ← another method
    return `I am worth ${this.value} cents.`;
  }

}                      // ← end of class definition

// ── Using the blueprint ───────────────────────────────────────────────────
let penny  = new Coin(1);   // 'new' stamps out an instance; constructor runs
let quarter = new Coin(25); // a completely separate instance

penny.flip();
console.log(penny.report());    // "I am worth 1 cents."
console.log(quarter.report());  // "I am worth 25 cents."
console.log(penny.flipped);     // true  — penny was flipped
console.log(quarter.flipped);   // false — quarter was NOT affected

Here is the complete Particle class from origBombSketch.js, exactly as written. We will dissect it section by section below.

class Particle {

  constructor(x, y) {
    this.pos   = createVector(x, y);
    this.vel   = p5.Vector.random2D().mult(random(5, 20));
    this.acc   = createVector(0, 0.15);
    this.alpha = 255;
    this.size  = random(4, 120);
    this.color = color(random(200, 255), random(0, 100), 0);
  }

  update() {
    this.vel.mult(0.95);
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.alpha -= 4;
  }

  show() {
    noStroke();
    fill(red(this.color), green(this.color), blue(this.color), this.alpha);
    ellipse(this.pos.x, this.pos.y, this.size);
  }

  finished() {
    return this.alpha < 0;
  }

}

Four sections: one constructor and three methods (update, show, finished). Let’s take them one at a time.

The constructor runs once per particle, the instant new Particle(mouseX, mouseY) is called. Its job: give the new spark its starting values.

constructor(x, y) {
  this.pos = createVector(x, y);
  // pos = position: a p5 Vector storing (x, y) as one object.
  // x and y come from the mouse click — every spark starts at the cursor.

  this.vel = p5.Vector.random2D().mult(random(5, 20));
  // vel = velocity: direction + speed.
  // random2D() picks a random direction (any angle, 0–360°).
  // mult(...) scales that unit vector to a random speed between 5 and 20.
  // Result: each spark blasts off in a unique direction at a unique speed.

  this.acc = createVector(0, 0.15);
  // acc = acceleration: a constant downward push each frame.
  // x=0 means no left/right push.  y=0.15 means a small, steady pull DOWN.
  // This IS gravity. It's constant, so it never changes after construction.

  this.alpha = 255;
  // alpha = opacity. p5 uses 0 (invisible) to 255 (fully solid).
  // Starting at 255 means the spark is born fully visible.

  this.size = random(4, 120);
  // size = diameter of the spark circle.
  // The wide range (4–120) is deliberate: a mix of tiny sparks and
  // big glowing blobs makes the explosion feel more natural.

  this.color = color(random(200, 255), random(0, 100), 0);
  // color = the spark's RGB color, stored as a p5 color object.
  // Red channel: 200–255   → always warm/hot
  // Green channel: 0–100   → some sparks lean yellow/orange, some are deep red
  // Blue channel: 0        → no blue — fire never looks icy cold
}

draw() in p5 runs roughly 60 times per second. Each time, every living particle calls update() to advance its physics and fade a little.

update() {
  this.vel.mult(0.95);
  // Air drag: multiply the velocity by 0.95 each frame.
  // After 1 frame:   vel × 0.95¹ = 95% of original speed
  // After 10 frames: vel × 0.95¹⁰ ≈ 60% of original speed
  // After 30 frames: vel × 0.95³⁰ ≈ 21% of original speed
  // The spark decelerates naturally, just like a real object in air.

  this.vel.add(this.acc);
  // Apply gravity: add the downward acceleration to the velocity.
  // Every frame the downward component of vel grows by 0.15.
  // Sparks shot upward eventually stop, then fall — just like physics.

  this.pos.add(this.vel);
  // Move: add the current velocity to the position.
  // This is the Euler integration step — the single most common
  // physics update pattern in game programming.

  this.alpha -= 4;
  // Fade: subtract 4 from opacity each frame.
  // 255 ÷ 4 ≈ 64 frames ≈ 1 second at 60fps.
  // Each spark lives for roughly one second.
}

After physics, each particle draws itself. show() knows exactly where to draw, what color, and how transparent because all that information lives in the particle’s own properties.

show() {
  noStroke();
  // Explicitly clear any stroke left over from previous draw calls.
  // Never rely on inherited drawing state — own it, declare it.

  fill(red(this.color), green(this.color), blue(this.color), this.alpha);
  // p5's color() object doesn't accept a fourth alpha argument directly
  // in fill(), so we unpack the RGB channels with red(), green(), blue()
  // and supply this.alpha as the fourth argument to fill().
  // As this.alpha counts down from 255→0, the spark fades to invisible.

  ellipse(this.pos.x, this.pos.y, this.size);
  // Draw a circle at the particle's current (x, y) position.
  // this.pos.x and this.pos.y are the numeric coordinates inside
  // the p5 Vector we stored in the constructor.
}

Each particle needs a way to announce “I’m invisible — remove me.” finished() is a simple predicate method: it asks a yes/no question and returns a boolean.

finished() {
  return this.alpha < 0;
  // Returns true when alpha has been decremented below zero.
  // At that point the particle is completely invisible.
  // The main draw loop uses this signal to remove the particle
  // from the array, freeing memory.
}

Here is how the main draw() loop uses all four parts together:

// Iterate backwards! When we splice() an element out mid-loop,
// iterating forward would skip the element that slides into its spot.
// Going backwards means the already-checked items are the ones we skip.
for (let i = particles.length - 1; i >= 0; i--) {

  particles[i].update();   // physics: move + fade
  particles[i].show();     // drawing: paint on canvas

  if (particles[i].finished()) {
    particles.splice(i, 1); // remove dead spark from the array
  }
}

Every single spark in the explosion follows the same lifecycle. Reading the flow helps you see why each part of the class exists:

1. Click! — mousePressed() fires. A loop runs 150 times, each iteration calling new Particle(mouseX, mouseY).
2. Birth — For each new, the constructor runs instantly. It gives the spark its position (at the cursor), a random velocity (random direction and speed), gravity (constant downward acceleration), full opacity (alpha = 255), a random size, and a random reddish-orange color.
3. Living — Every frame, draw() loops through the particles array. For each surviving spark it calls update() (move + fade) then show() (draw).
4. Fading — alpha drops by 4 each frame. The spark grows dimmer every frame until it is completely invisible.
5. Death — Once alpha < 0, finished() returns true. The main loop removes the particle from the array with splice(). JavaScript will garbage-collect the object. Memory is reclaimed.

Object-Oriented Programming (OOP) is a design philosophy, not a rule. Here are the three specific reasons a class was the right choice for this explosion:

💬 “A class is the right tool when you have multiple things of the same type that each need their own independent data and behavior.” That sentence describes this explosion perfectly.

Use S.P.A.R.K. as a mental checklist whenever you design a new class:

• Clean up the magic numbers. The Particle constructor still contains bare literals (5, 20, 0.15, 0.95, 4, 4, 120…). The Stage 2 Laundry List shows exactly how to name them all.
• Design your own class. Pick something in your own sketch that you have multiple copies of (stars, bubbles, raindrops, cars). Apply S.P.A.R.K. to design a class for it. If you get stuck, use this Particle class as your starting template.
• Add a new method. What if each Particle also knew how to shrink() — reducing this.size each frame as well as fading? Try adding that method. Call it inside the draw loop after update().
• Explore the SketchWave shape classes. The shapes in shapeClasses/ (like swCircle.js, swPolygon.js) are professional examples of the same class design principles you just learned. Read one with fresh eyes — you’ll recognize the pattern.
• See the professional version of this exact idea: SWParticle. Everything you learned in this tutorial — constructor, update(), draw(), an array of instances — was the direct inspiration for SWParticle, a class now built in to the SketchWave JS library. It supports multiple shapes (circle, square, star, mix), HSB color, gravity, drag, auto-emit, and even a spin speed for square and star particles.
  • SWParticle Live Demo — play with every parameter in real time.
  • SWParticle Reference Page — full constructor options, properties, methods, and source code.