Schiacciamento e allungamento

Primo dei dodici principi dell’animazione (squash and stretch): un corpo flessibile si allunga nella direzione del movimento quando è veloce e si schiaccia negli urti, conservando sempre lo stesso volume. Qui la deformazione dipende dalla velocità, ricavata dalla posizione del fotogramma precedente.

    let basePallaPrima = 0;  // base della palla nel fotogramma precedente

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

function draw() {
    background( 255 );
    let basePalla = 260 - abs( sin( frameCount * 0.03 ) ) * 200;
    let velocita = abs( basePalla - basePallaPrima );
    basePallaPrima = basePalla;

    let k = map( velocita, 0, 6, 1, 1.5 );  // allungamento
    if (basePalla > height) {
        k = map( basePalla, height, 260, 1, 0.5 );  // schiacciamento
        basePalla = height;
    }
    let h = 40 * k;
    let w = 40 / k;
    ellipse( width/2, basePalla - h/2, w, h );
}

Algoritmo

a ogni fotogramma:                                                  draw()
    calcolare l'altezza della base della palla, come in un rimbalzo sin()
    ricavare la velocità dallo spostamento rispetto a prima
    allungare la palla in proporzione alla velocità                 map()
    se la palla scende oltre il bordo inferiore della tela:         if()
        schiacciarla in proporzione a quanto scende                 map()
        riportarla sul bordo
    disegnarla stretta quanto è alta, o larga quanto è bassa        ellipse()

Istruzioni

sin() va da -1 a 1, e abs() lo rende sempre positivo: il valore sale da 0 a 1 e torna a 0 come l’altezza di un rimbalzo, veloce in basso e lento in cima. Moltiplicato per 200 e sottratto da 260, porta la base della palla da 260 a 60 pixel. Gli ultimi 20 pixel, oltre il bordo inferiore della tela, diventano schiacciamento.

La velocità è lo spostamento rispetto al fotogramma precedente, sempre positivo, e arriva a circa 6 pixel per fotogramma al momento del contatto. La posizione attuale viene poi memorizzata per il fotogramma successivo.

L’altezza viene moltiplicata per k e la larghezza divisa per lo stesso valore: l’area dell’ellisse resta quella del cerchio di 40 pixel, e la palla sembra conservare il suo volume.

Variazioni

Con 1 come ultimo parametro di tutte e due le map() la palla resta rigida, e il rimbalzo sembra quello di un oggetto duro.

Con 2 e 0.3 al posto di 1.5 e 0.5 la deformazione diventa quasi caricaturale: è l’esagerazione, un altro dei dodici principi.

Approfondimenti: