Écrits · 11 août 2025
Willemstagram
Un panneau photo 3D à lamelles qui raconte des histoires
La semaine dernière, j'étais assis avec un client devant la nouvelle page d'accueil de willem.com, où je raconte ce que je fais sous forme de récit. Ce client est l'un des penseurs créatifs et visionnaires les plus doués que je connaisse, et pourtant mon texte ne semblait pas lui parler. En y réfléchissant, je me suis souvenu d'une leçon de psychologie importante de l'université : il me fallait quelque chose de différent, de non linéaire. Cet article parle d'un coup de poing visuel !
Penser avec le cerveau gauche ou le cerveau droit
L'un des aspects géniaux de mes études à l'université d'Amsterdam, c'est que nous suivions des cours de différentes facultés, ce qui donnait un mélange intéressant de sciences interdisciplinaires. Un livre classique que nous avons étudié était « Mintzberg on Management », où l'auteur explique pourquoi les gens préfèrent des choses différentes, cette dichotomie classique étant souvent simplifiée en penseurs du cerveau gauche contre penseurs du cerveau droit :
- Le penseur linéaire (le cerveau gauche) : c'est l'état naturel des gens qui apprécient un récit logique qui va de A à B puis à C. Les conteurs, les architectes et les programmeurs sont typiquement de ce genre.
- Le penseur non linéaire (le cerveau droit) : ce sont des gens qui ne suivent pas une ligne droite. Ils balayent les impressions, les ambiances et les émotions qui restent. Les artistes et les penseurs visionnaires sont typiquement de ce genre.
Ma nouvelle page d'accueil willem.com fonctionnait bien pour les penseurs linéaires comme moi : le récit textuel convient au cerveau gauche. Mais mon design laissait de côté ceux qui fonctionnent mieux avec des impressions non linéaires, pleines d'ambiance. Il me fallait quelque chose qui expose les nombreuses images de façon riche et dynamique, vivante, avec une bonne dose de plaisir interactif.
Le tableau Solari
Il y a bien longtemps, j'ai rencontré ma femme à la gare d'Utrecht Centraal, juste sous le gigantesque panneau d'affichage des départs. Ce panneau bleu iconique de 7x4,20 M, qui pesait environ 3000 kilos, était fait de lamelles mécaniques qui produisaient un bruit reconnaissable, que tu entendais à peu près chaque minute dans le hall central de la gare. Ce type d'affichage s'appelle souvent un « tableau Solari », du nom de Solari di Udine, l'entreprise italienne qui a produit ces icônes. Aujourd'hui, la gare d'Utrecht a des écrans numériques, mais si tu veux, tu peux encore le voir au Het Spoorwegmuseum.
En grand amateur de métaphores (conseil de lecture : Les métaphores dans la vie quotidienne), je me suis dit que le tableau Solari, avec son cliquetis de lamelles, serait une façon sympa de laisser les visiteurs de willem.com « partir » vers différentes « destinations » (les histoires) du site. Au lieu de texte, j'ai délibérément choisi d'utiliser les photos et les images des articles du blog comme portes d'entrée vers la section insights de willem.com. Les nouvelles destinations apparaissent au hasard, ce qui est parfaitement non linéaire, et comme c'est interactif (on peut cliquer et toucher), c'est plus engageant qu'un simple texte. Chaque destination ouvre un « billet » qui explique un peu ce que tu regardes. Si ça te plaît, tu peux appuyer sur le gros bouton pour ouvrir l'histoire exactement à l'endroit de l'image, ce qui peut être au milieu d'un article. Les histoires s'ouvrent dans de nouvelles fenêtres de navigateur, pour que tu puisses revenir à la « gare » chercher une nouvelle destination.
Réalisation : ThreeJS et une API d'images sur mesure
J'avais déjà expérimenté le moteur graphique 3D ThreeJS pour visualiser des données d'entraînement. C'est une bibliothèque qui utilise l'élément standard canvas de HTML5 pour produire des graphiques générés grâce au calcul spatial, une façon sophistiquée de dire qu'elle te permet de dessiner en trois dimensions (x, y, z) au lieu de deux, d'où son nom. Elle offre des contrôles de caméra, de lumière et de brouillard, et elle est conçue pour des animations basées sur une position et une rotation simulées. C'est très sympa à utiliser et plutôt puissant. Voici mes deux articles précédents sur mes expériences avec ThreeJS :
Le minimaliste en moi a brièvement envisagé des animations, transformations et transitions CSS. Mais je me suis dit que la perspective réaliste, où les panneaux extérieurs tournent de façon plus oblique, et le choix aléatoire de nouvelles images m'obligeraient de toute façon à utiliser JavaScript. Pour en tirer le maximum, je voulais l'intégrer directement sur ma page d'accueil. Mais charger un moteur 3D complet n'est pas à prendre à la légère. Pour limiter son effet sur le temps de chargement de la page d'accueil, je l'ai soigneusement conçu pour se charger de façon asynchrone et entièrement optionnelle (pour les gens qui ont désactivé JS).
Pour alimenter le « Visual Journal », j'ai conçu une API sur mesure qui sert des images très optimisées, mises à l'échelle en 400x400px. Chaque image a un titre localisé et un lien profond avec une ancre (slug) en hashtag, qui permet de plonger dans les histoires. Je m'appuie sur ma propre plateforme Lemmid pour l'infrastructure nécessaire. En arrière-plan, un service NodeJS optimisé génère les images avec imagemagick, jpegoptim et pngquant. Tu peux consulter l'API toi-même sur https://willem.com/en/images.json, qui renvoie un tableau JSON comme celui-ci :
[
{
"url": "/fr/2020-07-30_faire-passer-un-imac-5k-de-27-pouces-a-14-teraoctets/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
"title": "An average fly is bigger than most screws inside the iMac",
"target": "/fr/2020-07-30_faire-passer-un-imac-5k-de-27-pouces-a-14-teraoctets/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
},
{
"url": "/fr/2019-06-25_monter-un-velo-cargo/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
"title": "Using filler plates to make up for Chinese Precision",
"target": "/fr/2019-06-25_monter-un-velo-cargo/#using-filler-plates-to-make-up-for-chinese-precision"
},
{
"url": "/fr/2021-01-14_j-abandonne-mon-propre-systeme-de-tablette/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
"title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
"target": "/fr/2021-01-14_j-abandonne-mon-propre-systeme-de-tablette/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
},
...
]
Pour que le tout ne soit pas un simple générateur de liens aléatoires, j'y ai volontairement ajouté une petite fenêtre qui s'ouvre quand tu touches ou cliques sur une image. J'utilise les légendes d'images que mon gestionnaire de contenu Lemmid tient à jour pour te donner un peu d'info, afin que tu puisses juger si l'histoire vaut la peine d'être ouverte.
Publier le code source (AGPL)
Je suis très content du fonctionnement du Visual Journal sur mon site, mais je crois fermement au partage. Il y a de bonnes chances que tu aies une idée encore meilleure pour un cliquetis à la Solari. C'est pourquoi je publie le tout comme logiciel libre sous la licence GNU Affero General Public License (AGPL). Tu peux donc l'utiliser, le modifier et le distribuer toi-même. Tu trouveras le code source, le readme et des exemples sur https://source.willem.com/visual-journal/
Conclusion
Vu à quel point il captive la curiosité de mes enfants, je suis très content du Visual Journal, que j'ai baptisé en plaisantant Willemstagram. Mais contrairement à l'Instagram de Meta, il ne sert que du visuel pour raconter mes histoires, et sa source est libre. Tu peux le découvrir sur la page d'accueil ou en appuyant sur le bouton ci-dessous. Quelle destination vas-tu choisir ?
Ceci a été écrit à la main. À une époque de textes générés par l'IA, c'est ma façon toute simple de montrer la réflexion et l'effort humains derrière ces mots. Pour les curieux, le manuscrit original (en anglais) est disponible au téléchargement.
Ceci a été écrit à la main. À l'ère des textes générés par l'IA, le manuscrit original (PDF) montre la réflexion et l'effort humains derrière ces mots.