Uso di array di oggetti

Cliccare sul canvas per creare i cerchi.

    class Cerchio {
    constructor( x, y ) {
        this.x = x;
        this.y = y;
    }    
    display() {
        circle( this.x, this.y, 10 );
    }
}

let cerchi = [];  // array per istanze della classe Cerchio

function draw() {
    background(220);
    // visualizzazione dei cerchi creati
    for (let i=0;  i<cerchi.length;  ++i) {
        cerchi[i].display();
    }
}

function mousePressed() {
    // aggiunta di un cerchio
    cerchi.push( new Cerchio( mouseX,mouseY ) );
}

Lo stesso effetto si potrebbe ottenere disegnando direttamente i cerchi senza cancellare tutto a ogni fotogramma. L’uso di un array di oggetti permette però di avere un miglior controllo di tutte le istanze.

Provare a far incrementare le proprietà x di ogni cerchio inserendo:
  cerchi[i].x += 0.5;
prima dell’istruzione cerchi[i].display().