Implementazione delle regole con una classe

Se sono necessarie più istanze dello stesso oggetto è utile definire e usare una classe:

// height100 lines=auto
class Cerchio {
    constructor() {  // PROPRIETÀ
        this.pos = createVector(random(width),random(height));   
        this.vel = createVector( 1.7, 1.9 );
    }
    display() {      // VISUALIZZAZIONE
        circle( this.pos.x, this.pos.y, 6 );
    }
    update() {       // AGGIORNAMENTI
        this.pos.add( this.vel );
        if (this.pos.x < 0 || this.pos.x > width) {
            this.vel.x = -this.vel.x;
        }
        if (this.pos.y < 0 || this.pos.y > height) {
            this.vel.y = -this.vel.y;
        }
    }
}

let cerchio1;  // istanze della classe
let cerchio2;

function setup() {
    cerchio1 = new Cerchio();  // creazione istanze
    cerchio2 = new Cerchio();
}

function draw() {
    background(220);
    cerchio1.display();  // visualizzazione e aggiornamento istanze
    cerchio1.update();
    cerchio2.display();
    cerchio2.update();
}

Quando i codici non sono particolarmente complessi, le operazioni di aggiornamento vengono spesso inserite nel metodo display() (a volte chiamato anche render() o draw()). Conviene però tenere separate le operazioni perché potrebbe essere utile o necessario utilizzare le proprietà delle istanze per visualizzazioni alternative.

    let p1 = cerchio1.pos;
    let p2 = cerchio2.pos;
    line(p1.x, p1.y, p2.x, p2.y);
    cerchio1.update();
    cerchio2.update();