Classe minima di un agente autonomo: uso

Codice che crea a caso gli agenti facendoli partire dal centro ed eliminando i primi quando diventano troppi.

// height=400 lines=24
let agenti = [];                             // array degli agenti
let agentiMax = 500;
let centro;

function setup() {
    createCanvas(400, 400);
    centro = createVector(width/2, height/2);
    background(220);
}

function draw() {
    if (random() < 0.2) {
        agenti.push( new Agente(centro) );   // aggiungi agenti
        if (agenti.length > agentiMax) {
            agenti.shift();                  // togli se troppi
        }
    }
    for (let i=0; i<agenti.length; ++i) {
        agenti[i].display();                 // disegna agenti
    }
}

// DEFINIZIONE DELLA CLASSE Agente
class Agente {
    constructor( partenza ) {
        this.pos = partenza.copy();          // proprietà
        this.vel = p5.Vector.random2D();
    }
    display() {                                 
        circle( this.pos.x,this.pos.y, 6 );  // visualizzazione

        if (random() < 0.33) {               // aggiornamento
            this.vel.rotate( random(-0.4,0.4) );
        }
        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;
        }
    }
}   
if (random() < 0.2) {
    agenti.push( new Agente(centro) );
    ...
}

Con una probabilità del 20% (0.2), aggiunge un nuovo agente al centro del canvas.

if (agenti.length > agentiMax) {
    agenti.shift();
}

Elimina il primo agente (shift()) se il loro numero supera quello massimo impostato (agentiMax).

Per orientare l'agente nella direzione dello spostamento si può utilizzare il metodo heading() del vettore vel. L'angolo ottenuto può essere quindi utilizzato come parametro dell'istruzione rotate(). Si può quindi provare a sostituire il codice di visualizzazione della classe:

        circle( this.pos.x,this.pos.y, 6 );

con le seguenti istruzioni:

        push();
        translate(this.pos.x,this.pos.y);
        rotate(this.vel.heading());
        ellipse( 0,0, 25,5 );
        pop();