Macchina a stati

Il sistema si trova sempre in uno solo di un numero limitato di stati, e passa da uno all’altro quando si verificano certe condizioni. Ogni stato ha il suo comportamento. Qui la creatura ha tre stati, ognuno con il suo colore:

Passare il cursore del mouse sopra il canvas, prima lontano dalla creatura e poi più vicino.

    let stato = "calma";   // "calma", "curiosa" o "spaventata"
let inizioPaura = 0;   // inizio della paura, in millisecondi
let x = 335;           // posizione della creatura
let y = 120;

function setup() {
    createCanvas( 670, 240 );
}

function draw() {
    background( 255 );
    let d = dist( x, y, mouseX, mouseY );
    if (stato == "spaventata") {
        if (millis() - inizioPaura > 2000) {
            stato = "calma";
        }
    } else if (d < 50) {
        stato = "spaventata";
        inizioPaura = millis();
    } else if (d < 200) {
        stato = "curiosa";
    } else {
        stato = "calma";
    }

    if (stato == "calma") {
        fill( 150 );
    } else if (stato == "curiosa") {
        x = lerp( x, mouseX, 0.02 );
        y = lerp( y, mouseY, 0.02 );
        fill( 0, 120, 255 );
    } else {
        x = lerp( x, mouseX, -0.05 );
        y = lerp( y, mouseY, -0.05 );
        fill( 255, 50, 0 );
    }
    x = constrain( x, 20, width - 20 );
    y = constrain( y, 20, height - 20 );
    circle( x, y, 40 );
}

Algoritmo

a ogni fotogramma:                                                draw()
    misurare la distanza dal mouse                                dist()
    scegliere lo stato:
        se è spaventata da più di 2 secondi, calmarsi             millis()
        altrimenti, con il mouse a meno di 50 pixel,
            spaventarsi e memorizzare il momento                  millis()
        altrimenti, con il mouse a meno di 200, incuriosirsi
        altrimenti, calmarsi
    muoversi secondo lo stato:                                    if()
        calma: restare ferma
        curiosa: avvicinarsi al mouse, lentamente                 lerp()
        spaventata: allontanarsi dal mouse, in fretta             lerp()
    restare nella tela, e disegnarsi del colore dello stato       constrain()

Istruzioni

Lo stato di paura si controlla per primo: così dura i suoi due secondi anche se nel frattempo il mouse si allontana.

millis() restituisce i millisecondi passati dall’avvio dello sketch: togliendo il momento in cui è cominciata la paura si ottiene da quanto tempo dura. A differenza di frameCount, non dipende dal numero di fotogrammi al secondo.

Con un valore negativo lerp() va dalla parte opposta: la creatura si allontana dal mouse del 5% della distanza a ogni fotogramma, sempre più in fretta. La curiosità, con 0.02, la avvicina invece del 2%, sempre più piano.

Variazioni

Con questa riga dopo circle() si legge lo stato accanto alla creatura:

Con 5000 al posto di 2000 la paura dura cinque secondi, e la creatura sembra più timida.

Approfondimenti: