Regole di simulazione implementate con una classe

L’uso di più istanze dello stesso elemento si può semplificare definendo e usando una classe:

    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.

Provare a far disegnare solo una linea di connessione fra i due cerchi, sostituendo le chiamate ai metodi display() con un’istruzione line():