Est-ce que vous avez déjà eu cette envie soudaine de composer de la techno tout en ayant l'air d'un hacker qui pirate le Pentagone dans un film des années 90 ?

Si oui, j'ai le truc parfait pour vous : Strudel .

Pour ceux qui débarquent, le live coding musical dont je vous ai déjà parlé y'a pas longtemps avec Loopmaster , c'est l'art de créer du son en écrivant du code en temps réel.

En gros, on tape des lignes, on valide, et hop le rythme change en direct. Strudel rend ce concept ultra accessible puisqu'il tourne entièrement dans votre navigateur préféré, sans chichi et surtout sans avoir besoin d'installer des usines à gaz comme SuperCollider ou de configurer des environnements de dev à n'en plus finir.

L'interface de Strudel - sobre mais efficace ( Source )

Le projet est d'ailleurs un port officiel du langage de patterns de TidalCycles vers JavaScript. TidalCycles , c'est un peu la référence absolue dans le monde du live coding, mais ça demandait pas mal de bidouille (Haskell, etc.) pour fonctionner correctement. Avec Strudel, vous ouvrez une page web, vous tapez du code et c'est parti mon kiki !

Le principe repose sur des motifs rythmiques qui occupent toujours le même espace temporel (appelé "cycle"). Contrairement à un séquenceur classique où on empile des notes, ici on définit des structures qui se compressent ou s'étirent automatiquement. C'est un peu déroutant au début mais une fois qu'on a pigé le truc, on peut sortir des beats qui tabassent en seulement trois lignes de code. Perso, je trouve ça assez hypnotique (oui j'aime le comique de répétition).

Côté technique, l'outil s'appuie sur l'API Web Audio et intègre un synthé/sampler baptisé Superdough. C'est assez costaud et ça permet déjà de s'amuser avec plein d'effets sans quitter le browser. Et pour les plus barbus d'entre vous qui voudraient piloter leur propre setup SuperCollider , c'est possible aussi via OSC , mais attention, il faudra quand même lancer un petit serveur relais en Node.js pour faire le pont entre le navigateur et votre machine.

Y'a même un workshop interactif vraiment bien foutu pour apprendre les bases. En quelques minutes, vous allez comprendre comment balancer des snares et des kicks avec une précision chirurgicale. Et le petit plus qui fait plaisir, vous pouvez partager vos chefs-d'œuvre en copiant simplement l'URL, puisque tout votre code est encodé dedans. C'est direct in the pocket !

La Reine de Strudel c'est évidemment Switch Angel :

Alors si vous cherchez un truc pour procrastiner intelligemment ce soir ou demain, j’ai exactement ce qu’il vous faut. Play.ertdfgcvb.xyz , c’est un terrain de jeu ASCII interactif où vous pouvez coder des animations directement dans votre navigateur. Et c’est hyper hypnotisant, vous allez voir !

Derrière ce nom imprononçable “ertdfgcvb” se cache Andreas Gysin , un artiste suisse basé à Lugano qui fait du code et du design et son playground ASCII, c’est une interface épurée au maximum composée d’un éditeur de code à gauche, d’une fenêtre de prévisualisation à droite, et c’est tout. Pas de fioritures, pas de boutons partout, juste l’essentiel. Vous tapez Cmd+Enter (ou Ctrl+Enter sur PC) et votre code s’exécute en temps réel.

Le principe de son code en live est inspiré des fragment shaders GLSL , sauf qu’au lieu de pixels colorés, vous manipulez des caractères. Vous avez accès à des fonctions spécifiques telle que boot() qui s’exécute une fois au démarrage, pre() pour préparer vos données, main() qui est appelée pour chaque cellule de l’écran, et post() pour les modifications finales.

Voici un exemple simple en javascript pour comprendre le délire :

export function main(coord, context){ return String.fromCharCode((coord.y + coord.x) % 32 + 65) }

Ce bout de code génère un pattern de lettres qui change selon la position X et Y sur l’écran. C’est tout con mais c’est beau.

Le playground propose également des dizaines d’exemples triés par catégorie. Vous avez les basiques pour apprendre, des démos plus complexes comme “Doom Flame” qui recrée l’effet de flamme du jeu Doom en ASCII, ou encore “Donut” qui fait tourner un donut en 3D avec juste des caractères. Y’a même une section “camera” où vous pouvez manipuler votre webcam et la transformer en ASCII art en temps réel.

D’après le GitHub du projet , Andreas a créé ça comme un hommage à tous les artistes, poètes et designers qui utilisent le texte comme medium. C’est un projet minimaliste, avec presque pas d’interface, juste le code et le résultat. Même les marges et les numéros de ligne ont été virés.

Et tout ça tourne de manière fluide dans le navigateur et pour les dev qui veulent comprendre comment ça marche sous le capot, tout le code source est sur GitHub, et vous pouvez vraiment faire des trucs de ouf avec, par exemple des fractales, des simulations de fluides…etc. C’est complètement barré.

Mais pour commencer, le plus simple c’est d’explorer les exemples. Le classique “10 PRINT” recrée le fameux one-liner du Commodore 64 qui génère un labyrinthe infini. Les exemples SDF (Signed Distance Fields) montrent comment faire de la 3D avec des maths et des caractères. Et si vous êtes chaud, vous pouvez lui envoyer vos propres créations qui rejoindront la section “contributed”.

Andreas enseigne ces techniques dans ses cours, et apparemment les étudiants adorent. C’est vrai que c’est une approche super pédagogique du creative coding où on se prend pas la tête avec du WebGL ou des frameworks complexes… Non, faut juste pondre du code simple qui produit des résultats visuels immédiats.

Bref, play.ertdfgcvb.xyz c’est le genre de site qu’on bookmark et qu’on ressort quand on veut se vider la tête en codant des trucs rigolos. C’est gratuit, c’est open source, et c’est une belle démonstration que l’art et le code peuvent cohabiter sans avoir besoin de millions de polygones et de shaders complexes.

Un grand merci à Lorenper pour m’avoir fait découvrir cette pépite !