Comment sonne la typographie, au fait ?

Tu peux tester l’écran d’accueil interactif de HALMA directement ici dans l’illustration !

Place au spectacle : grand cinéma sur l’écran

La base de l’écran de démarrage HALMA est un élément HTML canvas sur lequel l’animation est projetée. Pour la réalisation de l’effet souhaité, nous avons opté pour l’utilisation du moteur physique Matter.js.

Exemple de moteur physique

Dans un premier temps, le soulignement du texte doit être animé. Pour cela, des billes individuelles ont été créées avec Matter.js, maintenues en place par plusieurs « ressorts ». Une fonction assure le positionnement correct le long des jambages du texte – c’est là qu’un soulignement doit apparaître plus tard – en plaçant automatiquement ces corps à intervalles réguliers entre deux coordonnées.

Que la force soit avec toi – et ton curseur de souris

Avec une sorte de « champ de force » qui entoure la position du curseur de la souris, les corps peuvent maintenant être mis en vibration. Comme ils sont connectés les uns aux autres, ils commencent à osciller. C’est ainsi que l’effet de « tremblement » souhaité est créé. Pour éviter un comportement trop chaotique, nous limitons la distance maximale par rapport au point d’origine avec un simple calcul vectoriel.

Réglage, ou : « Bricolage »

Grâce à l’interaction de différents paramètres tels que la masse, la gravité, la force de traction et l’amortissement, nous pouvons influencer et affiner la simulation de manière ciblée.

Ici, tu vois la première construction des différents points vectoriels.

À l’écran : le rendu commence

Les animations ainsi calculées ne sont pas encore visibles, elles n’existent jusqu’à présent que virtuellement sous forme de coordonnées et de vecteurs. Pour que le tout se manifeste concrètement à l’écran sous forme d’une jolie animation, il faut ensuite en faire des pixels concrets. Pour cela, nous n’utilisons pas le moteur de rendu intégré à Matter.js, mais la bibliothèque P5.js, car elle permet de dessiner des splines.

Avec les coordonnées des différents corps, une ligne peut être affichée sur l’élément Canvas, mais elle serait très anguleuse sans calculs supplémentaires. Les premières tentatives pour lisser les bords avec des courbes de Bézier ont montré que les courbes de Bézier sont mieux adaptées à un petit nombre de points d’ancrage. Elles nécessitent la position des trois coordonnées suivantes, ce qui rend les calculs très complexes et chronophages.

Pour générer une courbe courbée, nous avons donc utilisé à la place la formule de la spline cubique de Hermite, qui est plus facile à appliquer aux points vectoriels individuels de la ligne. Comme elle doit être recalculée à chaque image et qu’elle doit fonctionner sur chaque appareil avec une fréquence d’images d’au moins 30 FPS, il est très important que cette fonction reste aussi performante que possible. Nous faisons tourner le moteur physique dans sa propre boucle d’animation, ce qui nous rend indépendants de la fréquence d’images et nous permet d’éviter les comportements douteux de la simulation.

Le contenu généré dynamiquement par Javascript doit maintenant être mis à l’échelle en fonction de la taille et de la résolution de l’écran, correctement placé sur le Canvas et recalculé à chaque redimensionnement de la fenêtre du navigateur.

Application finalisée dans le frontend

Pas de son, pas de fausse note

Enfin, dès que le champ de force de la souris entre en collision avec l’un des corps, « il ne reste plus qu’à » jouer un son. Comme les éléments <audio> traditionnels mettent en mémoire tampon avant de lire le son, une autre solution était nécessaire. Pour que l’ensemble fonctionne sur tous les navigateurs, tous les sons sont joués silencieusement une fois lors du chargement de la page, réalisant ainsi un préchargement efficace. Le chargement et la mise en mémoire tampon des fichiers sonores sont ainsi, pour ainsi dire, anticipés.

Il est bien connu que c’est une bonne pratique de ne pas jouer de son sans le consentement explicite de l’utilisateur. Dans certains navigateurs et sur presque tous les appareils mobiles, cela est même imposé et le son ne peut être lu qu’après une interaction de l’utilisateur. Nous ajoutons donc un bouton qui permet d’activer et de désactiver la sortie audio.

Un bug gênant : si tu ne veux pas être « dérangé », tu dois le sentir

L’écran de démarrage était enfin prêt, nous avons lancé la phase de test. Il est rapidement apparu que la mise en œuvre visuelle fonctionnait comme souhaité sur presque tous les appareils. Cependant, des indices se sont accumulés de la part de testeurs individuels qui ne pouvaient pas entendre de son sur leurs appareils iOS. Quel revers, le son étant un élément fondamental de toute l’idée ! Des semaines d’énigmes et de débogage ont suivi : le problème ne pouvait pas être reproduit ni circonscrit, il semblait apparaître de manière totalement aléatoire. Le seul point commun était son apparition sur les appareils iOS, mais ni la version iOS, ni la version de Safari, ni l’appareil lui-même ne semblaient avoir d’influence.

De nombreuses lignes de code frustrées ont été écrites. À la recherche de réponses ou au moins de petits indices sur la façon dont le bug pourrait être reproduit, des documentations ont été consultées et des forums Internet ont été fouillés. Tous les HALMA et finalement même leurs cercles familiaux et d’amis ont été recrutés comme testeurs, des séries de tests approfondies ont été effectuées. Tout cela sans succès. Nous avons failli abandonner toute l’idée. Mais ensuite, plutôt par hasard, nous avons pu identifier l’erreur : tout à fait selon la devise « Ce n’est pas un bug, c’est une fonctionnalité », la lecture des sons dynamiques sur iOS ne passe pas par le canal multimédia comme sur les autres appareils, mais par le canal des sonneries ! Cela signifie qu’aucun son ne peut être lu tant que le téléphone est en mode silencieux ou que le mode « Ne pas déranger » est actif. C’est pourquoi, pour tous les utilisateurs d’iPhone et d d’iPad, la règle est désormais : Désactive le mode « Ne pas déranger » et active le son !

L’écran d’accueil finalisé sur un iPad avec l’indication correspondante de désactiver la sourdine dans les réglages de l’appareil