Hors saison · Un herbier de l'impossible
Quatre fleurs qui n'attendent pas le printemps.
Le site, en direct
Le vrai site, dans le cadre : faites-le défiler pour le visiter. Sortez du cadre pour reprendre la lecture de cette page.
Points forts
La fleur est une photographie composée en WebGL
Un quadrilatère, un fragment shader, et l'arrière-plan de studio découpé à la luminance entre 0,16 et 0,31. La photo n'a pas de canal alpha : c'est le shader qui la détache, donc l'aubergine du site passe entre ses pétales et le titre s'y glisse. Respiration, rotation autour du cœur et déformation radiale sont calculées à chaque image, jamais préenregistrées.
Le curseur sait s'il est sur un pétale
Le test refait en JavaScript la transformation exacte du shader, zoom, rotation, respiration et déformation comprises, puis lit un masque de luminance de 256 px construit une seule fois au chargement en canvas 2D. Sans lui, les fenêtres s'ouvriraient sur le vide de l'arrière-plan, et le mouvement de la fleur suffirait à les décaler.
Neuf fenêtres radiographiques, reliées entre elles
Une seconde photographie, la radiographie de la fleur, ne se voit que dans ces rectangles : le shader reçoit leurs neuf coordonnées à chaque image et ne révèle rien en dehors, sans dégradé. Leurs bords, leurs légendes botaniques et les fils qui joignent leurs angles sont du DOM et du SVG posés par-dessus, à la même position au pixel.
Une exploration qui ne se répète pas
Chaque fenêtre satellite visite ses propres points de la fleur, tirés sans répétition immédiate, avec des pauses de 0,625 à 1,625 seconde et un remplacement instantané, fils compris, plutôt qu'une dérive. L'horloge de l'exploration n'avance que si le curseur est sur la fleur : hors de l'en-tête, tout s'arrête où il en est.
Un en-tête réglable, gardé par le navigateur
De 1 à 9 fenêtres, de 60 à 260 px de côté, densité des fils, vitesse de 0,25 à 4 fois. Les réglages s'appliquent en direct, se rangent en localStorage et s'exportent en JSON.
1,1 Mo, aucune dépendance, aucune compilation
Un fichier HTML, un CSS, un script, sept images WebP pour 686 Ko et cinq polices servies depuis le site pour 337 Ko. Le rendu plafonne à 1,5 fois la densité de l'écran et à 45 images par seconde, en contexte WebGL basse consommation. Sans WebGL la photographie reste en place, et le mouvement réduit du système immobilise tout.
Questions
- L'aperçu de cette page est-il le vrai site ?
- Oui, c'est le site lui-même, rendu dans le cadre : on le visite dedans, on en sort pour reprendre la lecture de cette page. Dans le catalogue, la carte montre le même en-tête, dépouillé de tout sauf la fleur et le titre, et l'interaction y répond au curseur comme ici.
- Que voit-on sans WebGL ?
- La photographie de la fleur, à la même place, avec le titre, la collection et le reste du site. Ce sont les fenêtres radiographiques qui n'apparaissent pas.
- D'où viennent les fleurs ?
- De nulle part : elles n'existent pas. Les cinq photographies, radiographie comprise, ont été produites pour l'exposition, et le site le dit lui-même dans son pied de page.
- Ça se lit sur téléphone ?
- Oui. La fleur change de photographie pour un cadrage vertical, la collection reprend une colonne, et les fenêtres au curseur ne s'installent pas, faute de curseur. L'aperçu de cette page, lui, ne se charge qu'à partir d'un écran d'ordinateur : un site de bureau réduit sur un téléphone ne se lirait plus.
Stack technique
- HTML
- CSS
- JavaScript
- WebGL
- SVG
- Vercel