Array di oggetti in movimento
// height=100 lines=auto
class Cerchio {
constructor( posX, posY ) {
this.pos = createVector( posX, posY );
this.vel = createVector( random(-1,1), random(-1,1) );
}
display() {
this.pos.add( this.vel );
circle( this.pos.x, this.pos.y, 10 );
}
}
let cerchi = []; // array con le istanze dei cerchi
function setup() {
// creazione di 50 cerchi al centro del canvas
for (let i=0; i<50; ++i) {
let c = new Cerchio( width/2, height/2 );
cerchi[i] = c;
}
}
function draw() {
background(220);
// aggiornamento e visualizzazione di tutti i cerchi
for (let i=0; i<cerchi.length; ++i) {
cerchi[i].display();
}
}
Attraverso il metodo mult()
della classe p5.Vector è possibile moltiplicare ma anche invertire il vettore di spostamento di ogni cerchio:
cerchi[i].vel.mult(-1);
Per far tornare indietro i cerchi con un clic del mouse, definire il gestore dell'evento mouseClicked()
, dopo il draw()
, inserendo un for()
simile a quello di visualizzazione dei cerchi ma con l'istruzione appena citata al posto di cerchi[i].display()
.