Come suona la tipografia?

Puoi provare la schermata iniziale interattiva di HALMA direttamente qui nell’immagine!

Si alzi il sipario: grande cinema sullo schermo

La base per la schermata iniziale di HALMA è un elemento HTML canvas su cui viene proiettata l’animazione. Per realizzare l’effetto desiderato, abbiamo optato per l’utilizzo del motore fisico Matter.js.

Esempio di motore fisico

Nel primo passaggio, l’obiettivo è animare la sottolineatura del testo. A tal fine, sono state create singole sfere con Matter.js, tenute in posizione da diverse “molle”. Una funzione che posiziona automaticamente questi corpi a intervalli regolari tra due coordinate assicura il corretto posizionamento lungo le discendenti del testo, dove in seguito si troverà una sottolineatura.

Che la forza sia con te – e con il tuo puntatore del mouse

Con una sorta di “campo di forza” che circonda la posizione del puntatore del mouse, i corpi possono ora essere messi in vibrazione. Poiché sono collegati tra loro, iniziano a oscillare. In questo modo si crea l’effetto “wobble” desiderato. Per evitare che ciò porti a un comportamento caotico, limitiamo la distanza massima dal punto di origine con un semplice calcolo vettoriale.

Tuning, o anche: “smanettare”

Attraverso l’interazione di vari parametri come massa, gravità, forza di trazione e smorzamento, possiamo influenzare e affinare la simulazione in modo mirato.

Qui vedi la prima costruzione dei singoli punti vettoriali.

Sullo schermo: ora si renderizza

Le animazioni così calcolate non sono ancora visibili, esistono finora solo virtualmente sotto forma di coordinate e vettori. Affinché il tutto si manifesti concretamente sullo schermo in una bella animazione, nel passo successivo devono essere renderizzati pixel concreti. Per questo non usiamo il renderer integrato in Matter.js, ma la libreria P5.js, poiché con essa è possibile disegnare spline.

Con le coordinate dei singoli corpi, una linea può essere visualizzata sull’elemento Canvas, che senza ulteriori calcoli sarebbe inizialmente molto spigolosa. I primi tentativi di levigare i bordi con le curve di Bézier hanno mostrato che le curve di Bézier sono più adatte per pochi punti di ancoraggio. Richiedono la posizione delle tre coordinate successive, il che rende i calcoli molto complessi e dispendiosi in termini di tempo.

Per generare una curva, abbiamo quindi utilizzato la formula della spline cubica di Hermite, che è più facile da applicare ai singoli punti vettoriali della linea. Poiché questa deve essere ricalcolata ad ogni frame e dovrebbe funzionare su ogni dispositivo con un framerate di almeno 30 FPS, è molto importante che questa funzione rimanga il più performante possibile. Facciamo girare il motore fisico in un proprio ciclo di animazione, siamo così indipendenti dal framerate e possiamo evitare comportamenti dubbi della simulazione.

I contenuti generati dinamicamente da Javascript devono ora essere scalati in base alle dimensioni dello schermo e alla risoluzione, posizionati correttamente sul Canvas e ricalcolati ad ogni ridimensionamento della finestra del browser.

Applicazione finita nel frontend

Nessun suono è di buon gusto

Infine, non appena il campo di forza del mouse collide con uno dei corpi, “solo” un suono deve essere riprodotto. Poiché gli elementi <audio> tradizionali bufferizzano prima che il suono venga riprodotto, era necessaria una soluzione diversa. Affinché il tutto funzioni su tutti i browser, tutti i suoni vengono riprodotti silenziosamente una volta al caricamento della pagina, ottenendo così un precaricamento efficace. In questo modo, il caricamento e il buffering dei file audio vengono anticipati.

È risaputo che è buona pratica non riprodurre suoni senza l’esplicita richiesta dell’utente. In alcuni browser e su quasi tutti i dispositivi mobili, questo viene anche imposto e il suono può essere riprodotto solo dopo un’interazione dell’utente. Aggiungiamo quindi un pulsante con cui l’output audio può essere attivato e disattivato.

Un bug fastidioso: chi non vuole essere disturbato, deve sentire

La schermata iniziale era finalmente pronta, abbiamo avviato la fase di test. Si è subito visto che l’implementazione visiva funzionava come desiderato su quasi tutti i dispositivi. Tuttavia, si sono accumulate segnalazioni da parte di singoli tester che non riuscivano a sentire alcun suono sui loro dispositivi iOS. Che battuta d’arresto, dato che il suono era una parte fondamentale dell’intera idea! Sono seguite settimane di enigmi e debug: il problema non poteva essere riprodotto o circoscritto, sembrava presentarsi in modo completamente casuale. L’unica cosa in comune era la sua comparsa sui dispositivi iOS, ma né la versione di iOS, né quella di Safari, né il dispositivo stesso sembravano avere alcuna influenza.

Sono state scritte numerose righe di codice frustrate. Alla ricerca di risposte o almeno di piccoli indizi su come il bug potesse essere riprodotto, sono state consultate documentazioni e setacciati forum su Internet. Tutti gli HALMA e infine anche i loro familiari e conoscenti sono stati reclutati come tester, sono state condotte ampie serie di test. Tutto senza successo. Abbiamo quasi scartato l’intera idea. Ma poi, più per caso, siamo riusciti a individuare l’errore: proprio secondo il motto “Non è un bug, è una funzionalità”, la riproduzione di suoni dinamici su iOS non avviene, come su altri dispositivi, tramite il canale multimediale, ma tramite il canale delle suonerie! Ciò significa che nessun suono può essere riprodotto finché il telefono è silenziato o la modalità “non disturbare” è attiva. Pertanto, ora vale per tutti gli utenti di iPhone e iPad: Disattiva “non disturbare” e attiva l’audio!

La schermata iniziale finita su un iPad con la relativa indicazione di disattivare la modalità silenziosa nelle impostazioni del dispositivo