Juste au-dessus, il y a un tableau. Un coucher de soleil sur un lac, avec des collines et trois oiseaux. Il se peint tout seul, puis il se numérise, se change en caractères et finit en code source. Le code s’exécute et redonne le tableau. C’était l’accueil de ce site à son lancement. L’accueil actuel pousse la même idée plus loin : toute la page est une toile qui se numérise pendant que tu défiles.
Je voulais une image qui dise ce que je suis sans que j’aie à l’écrire. J’ai passé des années dans les arts visuels avant d’ouvrir mon premier éditeur de code. L’animation raconte ce trajet en vingt secondes.
Un pinceau, c’est une poignée de lignes
Il n’y a aucune image dans l’animation. Tout est dessiné au moment où tu regardes, avec l’API Canvas du navigateur.
Un coup de pinceau commence par quelques points de contrôle. Je les relie avec une courbe de Catmull-Rom, puis je la rééchantillonne à tous les 3,5 pixels. Ensuite, chaque trait reçoit entre 3 et 26 poils. Chaque poil est une ligne décalée du centre, avec sa propre teinte et sa propre opacité.
Le détail qui change tout, c’est que chaque poil manque de peinture à un endroit différent. Un poil s’arrête à 70 % du trait, un autre va jusqu’au bout. C’est ce qui donne l’effet de pinceau sec qu’on voit sur une vraie toile. Sans ça, on dirait un dessin vectoriel.
La toile elle-même est du bruit. Un fond beige, des milliers de petites variations de couleur et quelques fibres horizontales et verticales. Assez pour que l’œil y croie.
Peindre dans le bon ordre
Un peintre ne fait pas le ciel après les collines. J’ai donc gardé l’ordre de l’atelier : le ciel de haut en bas, une reprise croisée pour casser les bandes, le soleil en spirale, les collines lointaines puis les proches, le lac, les reflets. Les oiseaux et la signature arrivent en dernier.
Les collines sont peintes à grands traits horizontaux, coupés par la forme de la crête. Puis un trait plus fin repasse sur la crête pour casser la ligne trop propre. C’est exactement ce que je ferais avec un vrai pinceau.
Numériser, c’est faire une moyenne
Quand le tableau est fini, une ligne de scan descend. Derrière elle, la toile devient une grille de 80 sur 50. Chaque cellule prend la couleur moyenne des pixels qu’elle couvre. J’obtiens cette moyenne en réduisant l’image en deux étapes, ce qui laisse le navigateur faire le calcul.
Ensuite chaque cellule devient un caractère. Plus la cellule est claire, plus le caractère est dense : un point pour le ciel sombre, un @ pour le cœur du soleil. C’est le vieux principe de l’art ASCII, avec la couleur en prime.
Les caractères savent où aller
Le passage au code est la partie que je préfère. Le fichier painting.js qui apparaît à la fin contient près de 500 caractères visibles. La grille en a 4 000. J’associe chaque caractère du code à une cellule de la grille dans l’ordre de lecture. Le haut du tableau devient le haut du fichier.
Chaque caractère suit une courbe de Bézier vers sa place, change de forme à mi-chemin et prend la couleur de la coloration syntaxique. Les cellules qui n’ont pas de destination s’éteignent en tombant un peu. Les couleurs du code viennent du tableau : l’orange des mots-clés, c’est le soleil.
Rapide, même avec un tableau qui se peint
Une animation comme celle-là peut ruiner la vitesse d’un site. Elle démarre seulement quand la page a fini de charger et que le navigateur a du temps libre. Elle s’arrête dès qu’elle sort de l’écran ou que l’onglet est caché. La texture de lin est calculée à demi-résolution, puis agrandie. Et si ton système demande moins de mouvement, tu vois directement l’image finale et c’est toi qui lances l’animation.
Le site est en Astro, compilé en pages statiques et servi par Cloudflare. C’est la même approche que j’utilise chez Radiko pour les PME. J’en parle plus en détail dans pourquoi un site compilé.
Ce que ça dit de moi
Je suis un artiste qui a appris à coder, et les deux ne se sont jamais vraiment séparés. Quand je bâtis un site pour une entreprise, je pense encore en composition, en lumière et en contraste. La différence, c’est que mon pinceau compile.
Si tu veux un site qui a cette attention-là pour ta PME, ça se passe chez Radiko. Et si tu veux savoir comment je suis passé de l’atelier à l’éditeur, mon parcours est ici.