What is money?
L'histoire de l'argent en neuf stations peintes, défilées comme un film.
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
Une page épinglée, cinquante-cinq écrans de course
Un seul écran collant et douze tableaux qui s'y succèdent : rien n'entre ni ne sort du flux de la page, tout est placé image par image par une caméra commune, en fonction de la seule position de défilement. Sur un écran de bureau, 44 700 px de course pour une page qui ne bouge jamais.
Le défilement est amorti à la main, et la page peut se lire seule
Aucune bibliothèque : une cible, une position courante, un rattrapage exponentiel indépendant de la cadence d'écran, et la position réelle de la page tenue à jour derrière. La molette, le clavier, la barre de défilement et le doigt entrent par la même porte. La lecture automatique donne 3 min 10 aux neuf stations, et le moindre geste rend la main au visiteur.
Chaque tableau est une pile de plans, jamais une image
Cinq à neuf plans par station, mesurés une fois pour toutes dans un fichier de positions, chacun avec son coefficient de profondeur : c'est lui qui décide de combien le plan répond à la caméra et au curseur. La parallaxe du curseur est proportionnelle à la largeur de la fenêtre et retenue à 35 % en vertical, pour que rien ne se décolle.
Le vernis craquelé est cuit dans les 1 155 fichiers
Le réseau de craquelures est calculé en coordonnées de tableau, pas d'écran : au repos les fissures de tous les plans se rejoignent en une seule toile craquelée, et quand la parallaxe sépare les plans chacun emporte les siennes. Bordures de cellules à deux échelles, tordues par un bruit, filet sombre à lèvre claire, trame de toile et marbrures d'ambre. Les calques nus sont conservés à part, les calques vernis se reconstruisent en une commande.
Six nuanceurs écrits pour ce site
La trame de points des nuages, la gravure de la pièce, deux incendies, la sortie en fumée et le craquelé en direct sont des fragment shaders WebGL, dessinés dans un canvas à la place de leur plan, jamais des filtres d'image. Le rendu plafonne à 1,5 fois la densité de l'écran.
Trois films défilés image par image
541 images (240, 180 et 121), en deux largeurs selon l'écran, demandées six à la fois en commençant par les deux bouts puis par pas dyadiques : le plan est jouable avant d'être entièrement arrivé, dans les deux sens. La caméra de chaque film est mesurée image par image, donc les cartels et leurs fils suivent le paysage au lieu de disparaître avec lui.
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 son en-tête complet, où le tableau répond au curseur. Pour la grille, le site retient ses trois films et les plans de ses stations : 800 Ko au lieu de vingt-deux mégaoctets, et l'en-tête est exactement le même.
- En quelle langue est le site ?
- En anglais, et il n'en change pas.
- D'où viennent les tableaux ?
- De douze images produites pour ce film, puis découpées en plans au studio et mesurées une à une. Le vernis, les craquelures et la trame de toile ne sont pas dans les images d'origine : ils sont ajoutés par-dessus, toujours reconstructibles.
- Ça se lit sur téléphone ?
- Oui. Le défilement amorti laisse la place à celui du système, les films passent sur leur variante de 768 px, et le cadrage se recentre : sur un écran large la pièce est poussée aux deux tiers pour laisser le ciel au titre, sur un écran haut elle revient au milieu. Le mouvement réduit du système supprime l'ouverture et les boucles. L'aperçu de cette page, lui, ne se charge qu'à partir d'un écran d'ordinateur.
Stack technique
- HTML
- CSS
- JavaScript
- WebGL
- Canvas
- SVG
- Vercel