L’inchiostro che scopre

/* L'inchiostro che scopre
   Una parola nera stampata su carta bianca. Il puntatore ci passa sopra come un pennello bagnato:
   dove passa, la carta diventa inchiostro nero e sotto compare la stessa parola gonfia, come un
   palloncino d'argento. Dopo qualche secondo l'inchiostro si ritira e la carta si richiude.
   L'inchiostro è un fluido vero, risolto in WebGL2 su una griglia: il puntatore spinge la velocità
   e versa colore, la velocità trasporta il colore, la pressione tiene il fluido senza compressioni,
   e a ogni fotogramma velocità e colore sbiadiscono un poco. Il bordo netto viene da una soglia.
   La parola gonfia nasce da una mappa d'altezza (la parola sfocata): le sue pendenze danno le
   normali, e le normali riflettono un orizzonte come fa il metallo. */

/* ---- valori da cambiare ---- */
const TOCCO = matchMedia('(hover: none), (pointer: coarse)').matches;
const GRIGLIA = TOCCO ? 128 : 256;        /* celle del fluido sul lato corto */
const RIS_INCHIOSTRO = TOCCO ? 384 : 512; /* risoluzione dell'inchiostro sul lato corto */
const ITERAZIONI = TOCCO ? 12 : 20;       /* passi per la pressione: più passi, fluido più preciso */
const SPINTA = 6;                         /* quanto il pennello spinge il fluido (per ogni cella di movimento) */
const PENNELLO = 0.075;                   /* raggio del pennello, in frazioni del corpo della parola */
const RESTA_VELOCITA = 0.962;             /* quanto resta della velocità a ogni sessantesimo di secondo */
const RESTA_INCHIOSTRO = 0.988;           /* quanto resta dell'inchiostro: più vicino a 1, più dura la traccia */
const RICCIOLI = 12;                      /* quanto il fluido si arriccia (0 = niente vortici) */
const SOGLIA = 0.5;                       /* dove l'inchiostro diventa netto */
const DENSITA = 3.9;                      /* moltiplica l'inchiostro prima della soglia */
const GONFIO = 5;                         /* quanto è bombata la parola d'argento */
const ATTESA_FANTASMA = 2500;             /* millisecondi senza gesti prima che il pennello dipinga da solo */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.