← Travaux · RAVERSE · Studio + Lab

Comment on a construit une rave en 3D

raverse.art montre 3 500 œuvres numériques nées dans les raves européennes du début des années 90. Pas de vidéo, pas de fichier son : tout ce que vous voyez et entendez est calculé en direct par le navigateur. Voici les pièces du mécanisme, démontées une par une.

Secteur Art numérique · ArchivesPôles Studio + LabAnnée 2026raverse.art ↗

420écrans en 3D, une seule scène

0fichier audio ou vidéo

128BPM, le tempo de tout le site

1appel de dessin par image

01 / 07

L'écran de démarrage

Studio · l'intention

Avant la première image, le site démarre comme un PC de 1992 : test mémoire, lecteur d'archives, chargement de RAVERSE.EXE. Le visiteur entre dans l'époque avant d'entrer dans la collection. C'est aussi là qu'on lui propose le son, au bon moment : la musique fait partie de l'œuvre.

Lab · la fabrication

Le texte s'écrit deux caractères toutes les 9 ms, avec une pause de 160 ms avant chaque OK et 70 ms entre les lignes. Une touche multiplie la vitesse par 4, jusqu'à 64. La sortie imite l'extinction d'un tube cathodique : l'écran s'écrase en une ligne (scaleY 0,004), s'illumine (brightness 5), puis s'éteint en 0,6 s. Le bouton « Entrer avec le son » crée le contexte audio dans le clic, seule façon d'obtenir le son sans être bloqué par le navigateur.

9 ms par paire de caractèresx64 accélération maxVT323 police bitmap

02 / 07

Un titre qui bat la mesure

Studio · l'intention

RAVERSE se lit en deux couleurs : RAVE en jaune acide, RSE en chrome. À chaque coup de grosse caisse, le titre se dédouble en rouge et en bleu glacé, comme une image mal réglée sur un vieux téléviseur. Une identité qui ne tient pas en place, à l'image de la musique.

Lab · la fabrication

Aucun shader ici : tout est en CSS. Une variable --pulse, mise à jour à chaque image par exp(-(temps mod 1) x 6), pilote deux calques ::before et ::after (rouge #ff1e3c et glace #7df9ff) décalés de ±0,035 em, fusionnés en mode screen. Le titre grossit de 2,5 % au maximum. Les lignes de balayage viennent d'un dégradé répété : 1 px sombre tous les 3 px, plus une vignette radiale.

0 shader tout en CSS±0,035 em décalage RVBSyne 800 typographie

03 / 07

Le tunnel infini

Studio · l'intention

L'entrée est un couloir de vieux téléviseurs qui défile vers vous. Spirales, smileys, damiers, plasma : les motifs du début des années 90, joués par des centaines d'écrans à la fois. Plus vous descendez vite, plus le tunnel accélère, jusqu'à l'effet de vitesse lumière.

Lab · la fabrication

416 écrans en 26 anneaux de 16, rayon 3,3, un anneau tous les 1,5. La position en profondeur boucle sur 39 unités : le tunnel n'a pas de fin. Les écrans apparaissent au loin par un fondu d'échelle et se fondent dans un brouillard de 8 à 32. Aucun écran ne lit de vidéo : chaque dalle calcule son motif dans un shader, choisi parmi 6 par une graine aléatoire. La vitesse de défilement s'ajoute à la vitesse de base ; au-delà de 18, le champ de vision s'ouvre de 35° au maximum.

416 écrans, 1 seul objet 3D6 motifs calculés, 0 vidéo+35° d'ouverture en warp

04 / 07

Vera Molnar, redessinée à chaque temps

Studio · l'intention

Le chapitre Cyberpunk rend hommage à (Dés)Ordres de Vera Molnar, pionnière de l'art par ordinateur : des carrés concentriques qui se dérèglent de gauche à droite. Ici, l'œuvre change à chaque temps de la musique, et elle s'affiche sur un mur d'écrans comme une projection dans un club.

Lab · la fabrication

Une seule image de 512 x 300 px, dessinée dans un canvas : 16 x 9 cases, 4 carrés par case, 6 % de cases vides. Le désordre croît vers la droite, en (colonne / 16) puissance 1,6. Le hasard n'en est pas un : un générateur Park-Miller amorcé par le numéro du temps, donc la même œuvre revient au même moment. L'image est redessinée une fois par temps seulement, puis découpée sur tous les écrans du mur par leurs coordonnées dans l'espace.

1 image pour tout le mur1 / temps fréquence de redessin16807 multiplicateur Park-Miller

05 / 07

Les mêmes écrans, de scène en scène

Studio · l'intention

Le site ne charge pas une scène par chapitre. Ce sont toujours les mêmes 420 téléviseurs qui s'envolent pour former une sphère, un mur de club, un robot, une spirale. Le visiteur voit la collection se recomposer sous ses yeux, et la couleur du fond suit le chapitre.

Lab · la fabrication

Un seul InstancedMesh de 420 moniteurs, dessiné en un appel. Chaque chapitre est une liste de 420 poses. Au défilement, chaque écran part avec un retard aléatoire (t = k x 1,6 - hasard x 0,6), suit une courbe cubique, décrit un arc de 1,5 à 4 unités et fait pivoter son orientation par interpolation sphérique. Le défilement est lissé par 1 - exp(-dt x 7), indépendant de la fréquence d'image. Fond, brouillard et caméra suivent le même fondu.

420 écrans réutilisés12 formations sur le site1 appel de dessin

06 / 07

Une sculpture que l'on touche

Studio · l'intention

Robot NJP salue Nam June Paik, qui sculptait des robots avec des téléviseurs. La collection devient une statue de 41 écrans, un par œuvre. On tourne autour en faisant glisser, chaque écran survolé s'éclaire et dit son numéro : la sculpture est aussi le sommaire.

Lab · la fabrication

Un rayon part de la souris et touche une instance : son numéro passe au shader, qui éclaircit cette seule dalle (x1,3 et teinte) et colore son caisson. Glisser donne une vitesse de 0,008 rad par pixel, freinée de x0,94 par image ; au repos, la sculpture tourne seule à 0,12 rad/s. Au sol, une grille anticrénelée dans le shader, et un anneau qui s'élargit à chaque temps.

41 écrans, 41 œuvresx0,94 inertie par image1 rayon par image pour le survol

07 / 07

Une musique qui se construit en descendant

Studio · l'intention

Pas de playlist : une seule boucle acid techno, comme en 1992, qui s'étoffe à mesure que l'on avance. En haut de page, une grosse caisse seule. Puis le charleston, la ligne acide, le clap. Arrivé au live, le filtre s'ouvre en grand. La bande-son raconte la progression dans la collection.

Lab · la fabrication

Aucun fichier audio : un synthétiseur Web Audio. Une horloge à 128 BPM programme les notes 120 ms à l'avance, toutes les 25 ms, dans l'horloge audio du navigateur. La ligne acide imite la TB-303 : dent de scie, filtre résonant (Q 16), saturation tanh. La progression p règle deux valeurs : energy = 0,2 + p x 1,2, qui fait entrer les couches, et cutoff = 0,08 + p x 0,8, qui ouvre le filtre. Son coupé, l'horloge continue sur performance.now() pour que l'image garde le rythme.

0 Ko de fichier audio120 ms d'anticipation5 couches qui entrent

Le site en mouvement

Le parcours complet de raverse.art, de l'écran d'entrée au documentaire, en défilement continu.

Un projet immersif ?

Le Studio a donné la direction artistique, le Lab l'a rendue jouable dans un navigateur, sur ordinateur comme sur téléphone. Si vous avez une collection, une marque ou un lieu à faire vivre en 3D, parlons-en.

Écrivez-nous →raverse.art ↗MACHAC, l'artiste →

← Tous les travaux Un projet similaire ? Écrivez-nous →