Projets / Outil · Application · Atelier · Visuels
Chipgrid
Ouvrir
- ChipgridS’ouvre sur le tutoriel. Sur ordinateur ou téléphone, rien à installer.Lancer
À propos
Pourquoi
Chipgrid a été conçu pour un atelier 8 bits. On y fait de la chip music et des images en pixels à partir de rien, sans logiciel à installer ni solfège : on ouvre la page, on suit le tutoriel, et on change des nombres pendant que ça joue.
Le langage s’inspire d’Orca, la grille de live coding, mais avec ses propres opérateurs, pensés pour les puces sonores et les écrans des années 1980. Il a les quatre voix de la NES et leurs bizarreries, comme un triangle sans réglage de volume et un bruit tiré d’un registre de 15 bits, plus les palettes d’époque et les astuces des démos : barres copper, cycle de palette, miroirs.
Atelier
La grille s’explique elle-même. Pointer une case montre son rôle, ses entrées s’allument, et chaque exemple a un court texte. L’onglet Pourquoi 8 bits ? raconte l’histoire : les puces, les compositeurs et les techniques inventées pour contourner les limites.
Une version multijoueur, jusqu’à dix personnes sur une grande grille partagée avec une vue pour le vidéoprojecteur, tourne sur un ordinateur portable, sur le Wi-Fi de l’atelier. Tout le monde entend la même musique et voit la même image. La grille se sauvegarde seule, et qui décroche retrouve sa place en revenant.
Fabriqué avec
Un seul fichier HTML : JavaScript, la Web Audio API avec un audio worklet pour la puce, canvas 2D pour la grille et l’écran. Sans framework ni dépendance. Le serveur multijoueur est un petit programme Node, lui aussi sans dépendance.
Fonctionnalités
- 01
La grille est le programme
Chaque lettre est un opérateur. À chaque tick, une double croche, il lit ses voisins et écrit son résultat en dessous. Horloges, séquences, nombres au hasard et mobiles font les motifs, et un bang (*) déclenche les sons.
- 02
Une puce comme la NES
Deux ondes carrées à quatre largeurs, un triangle 4 bits et un canal de bruit avec son mode métallique, 16 niveaux de volume, arpèges rapides pour les accords, chutes de hauteur pour les percussions.
- 03
Des images en code aussi
Un écran de 160 × 120 avec des palettes d’époque (NES, C64, Game Boy, CGA) et trois calques. Pixels, barres, sprites, lignes, anneaux, texte, fonds animés, défilement, zoom, miroirs, ondulations et cycle de palette. Rien n’apparaît si la grille ne le dessine pas.
- 04
Des images qui écoutent
Un opérateur lit le volume de n’importe quel canal de la puce : barres, anneaux et paillettes suivent la batterie et la mélodie.
- 05
Disposer son code librement
Les mobiles suivent des voies tracées sur la grille, avec virages et rails. Des liens nommés portent une valeur d’un coin à l’autre, et des portes ne se déclenchent qu’à l’arrivée d’un signal. Le code prend la forme que l’on veut.
- 06
Un code qui est aussi une image
Les sprites s’écrivent dans la grille en chiffres, et la maison du code est celle de l’écran. Des exemples entiers sont dessinés ainsi, comme une ville, un mandala et un circuit imprimé, et tous jouent.
- 07
Un tutoriel qui vérifie
Vingt courts chapitres, de ce qu’est le 8 bits et comment compter en base 36 et en hexadécimal, en passant par le dessin, les effets et la construction d’un morceau, jusqu’au jeu à plusieurs. On tape tout soi-même ; des caractères lumineux montrent où, et chaque étape avance quand c’est juste.
- 08
Des exemples à démonter
Morceaux, rythmes, visuels, routes, code comme art et petits mondes, plus de courtes recettes à copier, comme un flash sur la grosse caisse ou des notes au hasard qui restent dans la gamme.
- 09
Survoler pour comprendre
Pointer une case dit ce qu’elle est, ce qu’elle lit et ce qu’elle produit à cet instant. Le manuel et une courte histoire de la chip music sont dans le panneau latéral.
- 10
Modifier pendant que ça joue
Sélectionner un bloc et le déplacer, zoomer sur la grille, ou revenir au début sans perdre son code. Le travail reste gardé dans le navigateur.
- 11
Téléphones, deux langues
Fonctionne sur téléphone avec un clavier à l’écran. En français et en anglais, d’un bouton.
- 12
Enregistrer et partager
Enregistrer le son et l’écran en vidéo, sauvegarder la grille dans un fichier ou la partager par un lien.
Images
Mandala. Huit roues de rails, en miroir dans le code et à l’écran. 
Ville de nuit. La ligne de toits est écrite dans le code, et deux fenêtres clignotent.
Documentation
Pour commencer
Guides
Référence
Pour aller plus loin
Crédits
- Conception, puce sonore, code — SVDK