Movimento lineare e oscillante

Le due forme più semplici di animazione, ottenute ricavando la posizione da frameCount, che conta i fotogrammi disegnati da draw(): il cerchio in alto avanza a velocità costante e riparte da sinistra, quello in basso oscilla intorno al centro, rallentando vicino agli estremi.

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

function draw() {
    background( 255 );
    let x1 = (frameCount * 2) % width;
    circle( x1, 60, 30 );
    let x2 = width/2 + sin( frameCount * 0.03 ) * 300;
    circle( x2, 140, 30 );
}

Algoritmo

a ogni fotogramma:                                                draw()
    cancellare la tela
    spostare il primo cerchio a destra di 2 pixel per fotogramma,
    e farlo ripartire da sinistra quando arriva in fondo          %
    far oscillare il secondo cerchio intorno al centro            sin()

Istruzioni

Il resto della divisione per la larghezza va da 0 a 668, e torna a 0 quando frameCount * 2 raggiunge un multiplo di 670: il cerchio riparte da sinistra circa ogni 5 secondi e mezzo, a 60 fotogrammi al secondo.

sin() restituisce valori fra -1 e 1, che moltiplicati per 300 spostano il cerchio fino a 300 pixel a destra e a sinistra del centro. Con 0.03 un’oscillazione completa dura circa 210 fotogrammi, cioè tre secondi e mezzo.

Variazioni

Con 30 + sin( frameCount * 0.1 ) * 10 al posto del diametro del primo cerchio, il cerchio pulsa mentre avanza.

Con circle( width/2, 185 - abs( sin( frameCount * 0.05 ) ) * 150, 30 ) al posto del secondo circle() il cerchio rimbalza come una palla, veloce in basso e lento in alto: abs() rende positivi i valori negativi di sin().

Approfondimenti: