Sistemi particellari in p5.js

Per implementare un sistema particellare si può usare una sola classe con le regole di comportamento della singola particella ma a volte si preferisce creare un'ulteriore classe che gestisca l'array contenente tutte le particelle [vedi ParticleSystem scorrendo il codice].

// height=400 lines=22
class Particle {
    constructor(position) {
        this.acceleration = createVector(0, 0.05);
        this.velocity = createVector(random(-1, 1), random(-1, 0));
        this.position = position.copy();
        this.lifespan = 255;
    }
    update() {
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        this.lifespan -= 2;
    }
    display() {
        stroke(200, this.lifespan);
        fill(127, this.lifespan);
        circle(this.position.x, this.position.y, 10);
    }
    isDead() {
        return this.lifespan < 0;
    }
}

class ParticleSystem {
    constructor(position) {
        this.origin = position.copy();
        this.particles = [];
    }
    addParticle() {
        this.particles.push(new Particle(this.origin));
    }
    run() {
        for (let i = this.particles.length-1; i >= 0; i--) {
            let p = this.particles[i];
            p.update();
            p.display();
            if (p.isDead()) {
                this.particles.splice(i, 1);
            }
        }
    }
}

let particleSystem;

function setup() {
  createCanvas(670, 400);
  particleSystem = new ParticleSystem(createVector(width / 2, 50));
}

function draw() {
  background(51);
  particleSystem.addParticle();
  particleSystem.run();
}

L'esempio è una versione aggiornata (al nuovo modo di definire le classi) di Particle System creato da Daniel Shiffman per il sito di p5.js.

Sul p5.js Web Editor si può trovare un esempio differente con comportamenti diversi suddiviso in più file e con molti commenti in italiano.