Corpo a segmenti

Catena di cerchi in cui la testa segue il mouse e ogni segmento segue quello che lo precede, sempre alla stessa distanza ma con un certo ritardo. Quando la testa si ferma, il resto del corpo continua a muoversi per un istante e poi si assesta: sono i principi del follow through e dell’overlapping action, con le parti che non partono e non si fermano tutte insieme.

Passare il cursore del mouse sopra il canvas.

    let x = [];          // coordinate dei segmenti, dalla testa alla coda
let y = [];
let distanza = 16;   // distanza fra due segmenti vicini

function setup() {
    createCanvas( 670, 240 );
    for (let i = 0; i < 12; i++) {
        x[i] = width/2;
        y[i] = height/2;
    }
}

function draw() {
    background( 255 );
    x[0] = lerp( x[0], mouseX, 0.1 );
    y[0] = lerp( y[0], mouseY, 0.1 );
    for (let i = x.length - 1; i > 0; i--) {
        let a = atan2( y[i] - y[i-1], x[i] - x[i-1] );
        x[i] = lerp( x[i], x[i-1] + cos( a ) * distanza, 0.3 );
        y[i] = lerp( y[i], y[i-1] + sin( a ) * distanza, 0.3 );
        circle( x[i], y[i], 30 - i*2 );
    }
    circle( x[0], y[0], 30 );
}

Algoritmo

all'avvio:                                                        setup()
    mettere tutti i segmenti nello stesso punto                   for()

a ogni fotogramma:                                                draw()
    avvicinare la testa al mouse di un decimo della distanza      lerp()
    per ogni segmento dopo la testa, dalla coda in avanti:        for()
        trovare la direzione che viene dal segmento precedente    atan2()
        avvicinarsi di 3 decimi al punto che sta a distanza       lerp()
        fissa da quel segmento, in quella direzione
        disegnare il segmento                                     circle()
    disegnare la testa

Istruzioni

atan2() restituisce l’angolo, in radianti, della direzione che va dal segmento precedente a quello attuale. Riceve prima la differenza fra le y, poi quella fra le x.

x[i-1] + cos( a ) * distanza è la x del punto che sta a distanza pixel dal segmento precedente, nella direzione a; la riga dopo fa lo stesso per la y, con sin(). lerp() porta il segmento solo per tre decimi verso quel punto, e il resto del percorso lo fa nei fotogrammi successivi: da questo ritardo nasce il follow through.

Il ciclo va dalla coda alla testa, quindi ogni segmento si disegna sopra quello che lo segue, più piccolo, e la testa, che non ha un segmento davanti, si disegna per ultima, fuori dal ciclo. Andando all’indietro, ogni segmento segue la posizione che il precedente aveva nel fotogramma prima, e il ritardo cresce un poco verso la coda.

Variazioni

Con 1 al posto di 0.3 nelle due lerp() dentro il for() ogni segmento raggiunge subito il suo posto: il corpo diventa rigido e si ferma insieme alla testa.

Con questa riga dopo quella con atan2() il corpo ondeggia anche con la testa ferma, come la coda di un pesce, in un’azione secondaria:

Approfondimenti: