Vitrine pixels — l'électronique
Workshop « Vitrine pixels », ESADHaR, 2026-2027.
Le but : fabriquer un écran de pixels lumineux pour une vitrine, une matrice de LED de couleur de 7 × 39 pixels, avec un écart de 1 cm entre les pixels. Des étudiantes et étudiants en art y affichent leurs animations, dessinées dans Krita ou écrites en code.
Ce dossier rassemble tout le volet électronique : montages, programmes, schémas et modes d'emploi. Il est écrit pour des débutants : pas besoin de savoir souder, programmer ou lire un schéma pour commencer, tout est expliqué pas à pas, en français.
Sommaire
- Le parcours en trois étapes
- Par où commencer ?
- Les trois dossiers
- Les idées à retenir
- Les règles de sécurité communes
- Les logiciels utilisés
- Où en est le projet ?
- Vers la matrice finale 7 × 39
- Organisation des fichiers
1. Le parcours en trois étapes
On ne construit pas un écran de 273 pixels du premier coup. Le projet avance par étapes, chacune avec son dossier, sa documentation et son programme :
| Dossier | Quoi | Cerveau | On apprend… | |
|---|---|---|---|---|
| 1 | matrice_3x3/ |
9 pixels soudés à la main : LED RGB classiques, transistors, résistances | Arduino Uno | souder, lire un schéma, le multiplexage (allumer une ligne à la fois, très vite) |
| 2 | matrice_8x32/ |
un panneau souple de 256 LED « intelligentes » (WS2812B), 5 fils à brancher | Arduino Uno | les LED adressables, la chaîne de LED, l'alimentation, dessiner en code |
| 3 | 8x32 PI/ |
le même panneau, posé debout, piloté par un ordinateur | Raspberry Pi | jouer les animations Krita telles quelles, une page web pour gérer la vitrine, le mode « vitrine » autonome |
Chaque étape s'appuie sur la précédente : la fonction XY() qui retrouve une
LED à partir de sa position, par exemple, apparaît à l'étape 2 en C++ et est
reprise telle quelle, en Python, à l'étape 3.
2. Par où commencer ?
| Vous êtes… | Lisez d'abord | Puis |
|---|---|---|
| dans l'équipe design (Krita) | Guide Krita : dessiner en 8 × 32 pour des LED | Interface web : déposer et ordonner vos animations |
| dans l'équipe électronique | Maquette 3 × 3, puis panneau 8 × 32 avec Arduino | Raspberry Pi : montage et installation |
| curieux de code | les programmes Arduino matrice_3x3.ino et matrice_8x32.ino, très commentés |
Coder en Python |
| responsable de la vitrine | Mode vitrine : démarrage automatique, coupures de courant, horaires | Interface web |
Vous voulez juste mettre une animation en vitrine ? Exportez-la de Krita en GIF de 8 × 32 pixels, ouvrez http://172.16.50.27 depuis le Wi-Fi de l'école, et déposez-la. C'est tout.
3. Les trois dossiers
Étape 1 — matrice_3x3/ : la maquette multiplexée
9 LED RGB à cathode commune, soudées sur une plaque à pastilles, et 3 transistors qui allument les lignes une par une. L'Arduino balaie les 3 lignes environ 333 fois par seconde : l'œil voit une image fixe.
- Mode d'emploi :
README.md(matériel, reconnaître les composants, souder pas à pas, dépannage). - Programme :
matrice_3x3.ino, 6 animations (test des pixels, aplats, chenille, damier, balayages, scintillement). - Schémas : schéma électrique, plan d'implantation recto-verso, fichier
Fritzing
matrice_3x3.fzz; régénérables par les scripts du dossieroutils/.
Étape 2 — matrice_8x32/ : le panneau WS2812B et l'Arduino
Un panneau souple de 256 LED WS2812B : chaque LED contient une puce, et toutes sont reliées en une seule chaîne. Un seul fil de données suffit. L'énergie vient d'une alimentation d'établi réglée sur 5 V.
- Mode d'emploi :
README.md(repérer les fils, régler l'alimentation, brancher, téléverser, vérifier l'orientation). - Programme :
matrice_8x32.ino, avec la bibliothèque FastLED : arc-en-ciel, pluie, pixel art qui défile, étincelles.
Étape 3 — 8x32 PI/ : le Raspberry Pi, Krita et la vitrine
Le même panneau, posé debout (8 de large, 32 de haut), piloté par un Raspberry Pi. Le Pi sait lire des fichiers : les animations Krita sont jouées sans conversion, et une page web permet de les déposer et de les ordonner depuis un téléphone.
| Document | Pour qui | Contenu |
|---|---|---|
README.md |
électronique | Arduino ou Pi, montage, le problème des 3,3 V, test, interface web, dépannage |
INSTALLATION_PI.md |
électronique | de la carte SD vide à la matrice allumée |
GUIDE_KRITA.md |
design | dessiner, animer, exporter et vérifier pour les LED |
INTERFACE_WEB.md |
tous | la page web : déposer, ordonner, jouer |
MODE_VITRINE.md |
vitrine | démarrage automatique, coupures de courant, horaires, entretien |
CODER_EN_PYTHON.md |
code | Python pour qui connaît l'Arduino, exercices |
Les programmes : lecteur.py (joue les animations),
serveur_web.py (la page web),
matrice.py (le moteur, avec un simulateur pour
travailler sans matériel), test_matrice.py,
mes_animations.py, et des outils pour vérifier
un export Krita ou redessiner les schémas.
4. Les idées à retenir
Le multiplexage (étape 1) : avec peu de fils, on commande beaucoup de LED en n'allumant qu'une ligne à la fois, très vite. L'œil, trop lent, voit une image fixe : c'est la persistance rétinienne. Simple pour 9 pixels, trop lourd pour 273 (il faudrait 117 fils de couleur et de gros transistors).
Les LED adressables (étapes 2 et 3) : chaque LED a sa puce. On envoie une
longue liste de couleurs dans un seul fil ; la 1re LED garde la 1re
couleur et passe le reste à la suivante, et ainsi de suite. Les LED sont
câblées en serpentin (une colonne descend, la suivante remonte) : la
fonction XY() traduit une position (x, y) en numéro de LED.
L'énergie et l'information sont séparées : l'Arduino ou le Pi envoient les couleurs, mais l'énergie vient d'une alimentation à part. 256 LED en blanc à fond demandent plus de 15 A ; un port USB en donne 0,5. Le programme limite le courant pour ne jamais dépasser ce que l'alimentation fournit.
L'écran et les LED ne voient pas les couleurs pareil : les couleurs sombres disparaissent, les couleurs saturées rendent très bien, le noir est une LED éteinte. Le programme applique une correction gamma pour que la matrice ressemble au dessin de Krita.
Microcontrôleur ou ordinateur : l'Arduino exécute un seul programme, sans système, et démarre instantanément ; idéal pour apprendre. Le Raspberry Pi est un vrai ordinateur (Linux, fichiers, réseau) ; idéal pour diffuser les créations d'une équipe.
5. Les règles de sécurité communes
- 5 volts, pas plus pour les LED WS2812B. On règle l'alimentation avant de brancher, et on n'y touche plus.
- Jamais le 5 V de l'Arduino ou du Pi vers le panneau : il est alimenté uniquement par son alimentation.
- Toutes les masses (GND) reliées ensemble : sinon le signal de données n'est pas compris.
- On câble hors tension, et on fait vérifier avant d'allumer.
- Jamais de 5 V sur une broche du Raspberry Pi : elles supportent 3,3 V au maximum.
- Le 230 V (alimentation fixe de la vitrine) est câblé ou vérifié par une personne compétente.
- Pas plus de 3 flashs par seconde dans les animations : une vitrine est vue par tout le monde, y compris des personnes épileptiques.
En cas de chaleur ou d'odeur de brûlé : on coupe tout et on appelle l'encadrant.
6. Les logiciels utilisés
| Logiciel | Pour quoi | Étapes |
|---|---|---|
| IDE Arduino | écrire et téléverser les programmes Arduino | 1, 2 |
| Bibliothèques TimerOne et FastLED | multiplexage par interruption ; pilotage des WS2812B | 1 ; 2 |
| Krita | dessiner et animer en pixel art | 3 |
| Python 3 + Pillow | lecteur, outils de vérification, simulateur | 3 |
| rpi_ws281x, Flask | pilotage des LED par le Pi ; la page web | 3 |
| Raspberry Pi Imager | préparer la carte SD du Pi | 3 |
| Fritzing (facultatif) | ouvrir le schéma de la maquette 3 × 3 | 1 |
Tout est libre et gratuit.
7. Où en est le projet ?
Mis à jour le 8 octobre 2026.
- ✅ Maquette 3 × 3 : programme et documentation prêts.
- ✅ Panneau 8 × 32 avec Arduino : programme et documentation prêts.
- ✅ Raspberry Pi : un Pi 3 Model B (Raspbian 11) est installé et mis à jour ; le lecteur, la page web et les exemples y tournent. Adresse Wi-Fi : http://172.16.50.27 (câble : 172.16.7.199). L'équipe design y dépose déjà ses premières animations.
- ✅ Matrice debout : tout le logiciel travaille en 8 × 32 (
ROTATION = 90). - ⏳ Premier test sur la vraie matrice avec le Pi : régler le sens de
l'image (
INVERSER_X/INVERSER_Y) avectest_matrice.py, puis activer le lecteur au démarrage. - ⏳ Adaptateur de niveau 74AHCT125 : pas disponible pendant le workshop ; on utilise le montage A (panneau alimenté en 4,4 V) ou le montage B (un transistor). Voir le README du Pi, partie 4.
- ⏳ Mode vitrine : protection contre les coupures de courant (overlay), mot de passe de la page web, adresse fixe à demander au service informatique.
8. Vers la matrice finale 7 × 39
Pistes et décisions à ce jour (le détail technique est dans
CLAUDE.md) :
- LED WS2812B plutôt que du multiplexage : à 273 pixels, le multiplexage demanderait 117 fils de couleur, des circuits spécialisés et de gros transistors, pour une image 7 fois moins lumineuse.
- Format envisagé : un panneau 8 × 32 + un panneau 8 × 8, chaînés, au pas de 10 mm (soit 8 × 40, dont on n'utilise que 7 × 39). La 8e rangée reste éteinte : on ne la coupe pas, ça casserait la chaîne.
- Alimentation : 5 V, environ 10 A, réinjectée à plusieurs endroits de la chaîne ; limite de courant réglée dans le programme.
- Cerveau : le Raspberry Pi de l'étape 3 ; le programme s'adapte en
changeant quelques réglages dans
matrice.py. - À préciser : sens de pose (couché ou debout) de la matrice finale, choix définitif des panneaux (ou d'une bande à 100 LED/m).
9. Organisation des fichiers
vitrine pixel electronique/
├── README.md ← ce document
├── CLAUDE.md ← notes techniques du projet (décisions, chiffres clés)
│
├── matrice_3x3/ ← étape 1 : maquette multiplexée, Arduino
│ ├── README.md
│ ├── matrice_3x3.ino
│ ├── matrice_3x3.fzz (Fritzing)
│ ├── schemas/ schéma électrique, plan d'implantation
│ └── outils/ scripts qui redessinent les schémas
│
├── matrice_8x32/ ← étape 2 : panneau WS2812B, Arduino
│ ├── README.md
│ ├── matrice_8x32.ino
│ ├── schema_branchement.svg
│ └── photos du panneau
│
└── 8x32 PI/ ← étape 3 : panneau WS2812B debout, Raspberry Pi
├── README.md montage, test, interface web, dépannage
├── INSTALLATION_PI.md GUIDE_KRITA.md INTERFACE_WEB.md
├── MODE_VITRINE.md CODER_EN_PYTHON.md
├── matrice.py le moteur (+ simulateur)
├── lecteur.py joue les animations en boucle
├── serveur_web.py la page web (+ dossier web/)
├── test_matrice.py mes_animations.py
├── animations/ exemples (GIF, APNG, séquence de PNG)
├── krita/ palette de couleurs pour les LED
├── outils/ vérifier un export, générer exemples et schémas
├── schemas/ branchements, brochage, chaîne Krita → matrice
└── installation/ script d'installation et services du Pi