Étude de cas · Projet personnel · 2025 — 2026
Offbeat
Le son, avec des points.
01 — L’idée
Le son met de l’ordre.
J’écoute beaucoup de musique, et ce que je préfère, c’est la chercher : fouiller des bacs de vinyles, retourner les pochettes, poser l’aiguille sur un disque que je ne connais pas. Offbeat est né de l’envie de retrouver ça sur le web. Le projet a commencé en 2025 sous le nom de Soundwave, une démo three.js ; je l’ai refait de zéro en septembre 2026.
On y suit le chemin d’un disquaire : on fouille un bac par genre, on pose l’aiguille, et on regarde le son. En silence, des points de trame dérivent sur l’encre ; quand le disque joue, ils se rangent en paysage et prennent les couleurs de son énergie. Ce sont les mêmes points que sur ce site ; là-bas, c’est la musique qui les range.
02 — Comment ça marche
Un spectre, éclairé comme un paysage.
Le navigateur sait écouter : à chaque image, son analyseur audio donne l’énergie du son, fréquence par fréquence. Je la regroupe en 96 bandes, des graves à gauche aux aigus à droite, espacées comme l’oreille les entend. Toutes les 160 ms, la ligne recule d’un cran : le paysage montre les quatre dernières secondes du morceau, les plus récentes devant.
Le plus dur, c’était la lisibilité. J’ai d’abord essayé une surface éclairée, le choix évident : on n’y voyait qu’un tas informe. Ce qui a marché, c’est de traiter chaque ligne comme un voile opaque, éclairé par le haut. Je les dessine du fond vers l’avant ; chacun cache celui de derrière, et chaque crête se lit seule. Un shader pose ensuite un point de trame par case : sa taille suit la lumière, sa couleur l’énergie.
03 — La pochette
Des pochettes que personne n’a dessinées.
Une graine par disque
Chez un disquaire, on choisit d’abord à la pochette. Dans Offbeat, aucune n’est une image : chacune est générée de façon procédurale à partir des métadonnées du disque. Son identifiant Audius, hashé, sert de graine à un générateur pseudo-aléatoire qui place trois ou quatre pôles autour du centre et donne à chacun une énergie. L’humeur du morceau, choisie par l’artiste sur Audius, fixe deux réglages : l’énergie moyenne, qui situe la palette du pêche pour un disque calme au violet pour un disque intense, et une tension. Pour chacun des 56 × 56 points, la couleur vient d’une moyenne des pôles pondérée par la distance, sur un champ que du bruit déforme d’autant plus que la tension est forte. Rien n’est stocké : même graine, même pochette, à chaque visite.
04 — Le tirage
Chaque disque laisse un tirage.
Un vinyle, ça se tient en main ; une écoute en streaming ne laisse rien. Offbeat en fait donc un tirage, comme on fait tirer une photo. Une fois le morceau décodé, il le replie en entier sur 48 crêtes, le début en haut, sur une affiche au format 4:5 datée du jour de l’écoute. On choisit l’encre ou le papier (un papier qui a de la matière, un grain fin et quelques fibres), puis on la garde ou on la partage.
