bsc/vitrine-pixels
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8x32 PI

Browse Source
This commit is contained in:
bach
2026-10-08 15:25:14 +02:00
parent 32e617f67b
commit da4fac3af7
64 changed files with 3921 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
8x32 PI/GUIDE_KRITA.md
+367
View File
@@ -0,0 +1,367 @@
# Guide Krita : dessiner pour la matrice LED
Pour **l'équipe design**. Pas besoin de matériel ni de programmation : on
dessine dans Krita, on exporte, on vérifie sur son ordinateur, et on dépose
le fichier dans le dossier des animations.
![De Krita à la matrice](schemas/chaine_krita_matrice.svg)
> **En une phrase** : un document de **32 × 8 pixels**, un pixel = une LED,
> des couleurs **franches**, un fond **noir**, et un export en **séquence de
> PNG** (ou en GIF).
---
## Sommaire
1. [Comprendre la « toile »](#1-comprendre-la--toile-)
2. [Créer le document](#2-créer-le-document)
3. [Dessiner en pixel art](#3-dessiner-en-pixel-art)
4. [Animer](#4-animer)
5. [Ce qui change entre l'écran et les LED](#5-ce-qui-change-entre-lécran-et-les-led)
6. [Exporter](#6-exporter)
7. [Prévisualiser sur son ordinateur](#7-prévisualiser-sur-son-ordinateur)
8. [Déposer l'animation](#8-déposer-lanimation)
9. [Conseils de composition pour une vitrine](#9-conseils-de-composition-pour-une-vitrine)
10. [Liste de contrôle avant de rendre une animation](#10-liste-de-contrôle-avant-de-rendre-une-animation)
---
## 1. Comprendre la « toile »
La matrice est un écran de **32 colonnes × 8 lignes** = 256 pixels. Chaque
pixel est une LED, et les LED sont espacées de **1 cm** : la matrice mesure
32 × 8 cm.
```
x → 0 31
y ↓ ┌────────────────────────────────┐
0 │■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ │
│ │ 8 lignes
7 │■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ │
└────────────────────────────────┘
32 colonnes
```
Quelques ordres de grandeur pour se repérer :
- un caractère lisible fait **5 pixels de large × 7 de haut** : on écrit
**5 lettres** à la fois, pas plus. Un texte plus long doit **défiler** ;
- un visage simple tient dans **8 × 8** ;
- une ligne de 1 pixel d'épaisseur se voit très bien : c'est une rangée de LED.
> **La matrice finale fera 39 × 7.** Si vous préparez déjà des animations
> pour elle, créez des documents de **39 × 7** : sur la matrice d'essai, le
> lecteur les centrera (et coupera ce qui dépasse sur les côtés).
---
## 2. Créer le document
1. **Fichier → Nouveau** (*File → New*) → **Document personnalisé**.
2. Réglages :
| Réglage | Valeur |
|---|---|
| Largeur | **32** pixels |
| Hauteur | **8** pixels |
| Résolution | peu importe (72 ppp) |
| Modèle de couleur | **RVB/Alpha**, **8 bits** entier, profil **sRGB** (celui par défaut) |
| Contenu / arrière-plan | **noir** (ou transparent : le transparent devient noir, donc éteint) |
3. **Zoomez** énormément (touche `+`, ou la molette avec `Ctrl`) : à 3200 %,
chaque pixel fait environ 3 cm à l'écran.
4. **Grille de pixels** : Krita dessine une fine grille quand on zoome
beaucoup. Si elle n'apparaît pas : **Configuration → Configurer Krita →
Affichage → Grille de pixels**, et baissez le seuil d'affichage.
> ⚠️ **Ne dessinez pas en grand pour réduire ensuite.** Une image de 1920 ×
> 480 réduite à 32 × 8 devient une bouillie floue. Dessinez **directement à
> la taille réelle** : c'est le principe du pixel art.
### Importer la palette « Vitrine pixels »
Le fichier [`krita/palette_vitrine_pixels.gpl`](krita/palette_vitrine_pixels.gpl)
contient 37 couleurs choisies pour bien rendre sur les LED (couleurs pures,
moyennes, sombres et pastel, plus noir, gris et blanc).
1. **Configuration → Gérer les ressources…** → **Importer des ressources**.
2. Type de ressource : **Palettes** ; choisissez le fichier `.gpl`.
3. Dans le panneau **Palette** (*Configuration → Panneaux → Palette*),
sélectionnez « Vitrine pixels (LED) ».
---
## 3. Dessiner en pixel art
La règle d'or : **pas de flou, pas de pixels « intermédiaires »**. Chaque
pixel a une couleur franche, choisie exprès.
| Outil | Réglage |
|---|---|
| **Brosse** | un préréglage **pixel art** (tapez « pixel » dans la recherche du panneau *Préréglages de brosses*), taille **1 px** |
| **Gomme** | même brosse, touche `E` pour basculer en mode gomme |
| **Remplissage** (pot de peinture) | décocher **Anticrénelage** (*Anti-aliasing*) dans les options de l'outil |
| **Sélections** | décocher **Anticrénelage** dans les options de l'outil |
| **Transformation** (déplacer, tourner, agrandir) | Filtre : **Plus proche voisin** (*Nearest neighbour*) ; sinon les bords deviennent flous |
| **Image → Mettre à l'échelle** | Filtre : **Boîte / Plus proche voisin** (*Box / Nearest neighbour*) |
**Comment savoir s'il y a du flou ?** L'outil
[`verifier_animation.py`](#7-prévisualiser-sur-son-ordinateur) compte les
couleurs différentes : au-delà de 64, il y a sans doute de l'anticrénelage
ou un dégradé non voulu.
---
## 4. Animer
1. **Fenêtre → Espace de travail → Animation** : Krita affiche le
**montage** (*timeline*) et les **pelures d'oignon** (*onion skin*, qui
montrent en transparence l'image d'avant et d'après).
2. **Images par seconde** : réglez-les dans le panneau *Animation* (ou
*Montage*) **dès le début**. Conseils :
- **12 i/s** : le rythme classique du dessin animé, idéal en pixel art ;
- **24 i/s** : pour des mouvements fluides (deux fois plus d'images à dessiner) ;
- un **texte qui défile** d'1 pixel par image : 12 à 20 i/s.
3. Pour créer une image : clic droit sur une case du montage → **Créer une
image vide** ou **Dupliquer l'image**.
4. **Durée** : réglez la plage de lecture (début / fin) pour qu'elle
corresponde exactement à votre animation. Une animation **en boucle**
doit avoir une dernière image qui « enchaîne » bien avec la première.
> **Animation courte ?** Pas de souci : le lecteur rejoue chaque animation
> jusqu'à ce qu'elle ait duré au moins **10 secondes**. Un cœur qui bat en
> 1 seconde battra 10 fois.
---
## 5. Ce qui change entre l'écran et les LED
L'écran de votre ordinateur et la matrice ne produisent pas la lumière de la
même façon. Le programme compense au mieux (c'est la **correction gamma**),
mais certaines choses ne passent pas :
### Les couleurs très sombres disparaissent
En intérieur, la matrice tourne à environ **15 % de sa puissance** (sinon elle
éblouit). Chaque LED n'a que 256 niveaux de lumière ; à 15 %, il n'en reste
qu'une quarantaine, et les plus sombres valent **zéro**.
| Couleur dans Krita (valeur, V de TSV) | Sur la matrice |
|---|---|
| 100 % à 60 % | ✅ bien visible |
| 60 % à 35 % | ✅ visible, sombre |
| 35 % à 20 % | ⚠️ très faible, les nuances se mélangent |
| moins de 20 % | ❌ **éteint** |
**Conséquence** : les dégradés subtils, les ombres légères, les fonds
« presque noirs » ne se voient pas. Travaillez par **aplats** francs, comme
une affiche sérigraphiée.
### Les couleurs saturées rendent mieux
- Les LED excellent dans les **couleurs pures** : rouge, vert, bleu, et leurs
mélanges vifs (jaune, cyan, magenta, orange, violet).
- Les **marrons**, les **beiges**, les **gris colorés** sont décevants : ils
ressemblent à de l'orange terne ou à du blanc sale.
- Le **blanc** tire souvent un peu vers le bleu. Un « blanc chaud »
(255, 200, 140) est plus agréable.
### Le noir n'est pas du noir, c'est de l'éteint
Sur la matrice, le noir = LED éteinte = on voit la surface du panneau (ou ce
qu'il y a derrière la vitrine). **Le fond noir est la norme.** Un grand fond
coloré est possible, mais il éblouit et consomme beaucoup.
### La consommation électrique
Plus il y a de pixels allumés et clairs, plus la matrice consomme. Une image
**entièrement blanche** dépasse ce que l'alimentation peut fournir : le
programme baisse alors automatiquement la luminosité de cette image. Ce n'est
pas dangereux, mais l'image paraîtra plus terne que les autres.
`verifier_animation.py` vous le signale.
---
## 6. Exporter
**Fichier → Rendu de l'animation…** (*File → Render Animation*).
### Méthode conseillée : séquence de PNG
C'est la plus fiable : pas de perte de couleurs, pas de logiciel
supplémentaire.
1. Choisissez **Séquence d'images** (*Image Sequence*), format **PNG**.
2. **Dossier** : créez un dossier **au nom de l'animation**, par exemple
`05_feu_de_camp`.
3. **Nom de base** : `feu` → Krita crée `feu_0000.png`, `feu_0001.png`…
4. Taille : laissez **32 × 8**.
5. **Rendu**.
6. Dans ce dossier, créez un fichier texte **`images_par_seconde.txt`** qui
contient seulement le nombre d'images par seconde de votre animation,
par exemple `12`. (Sans ce fichier, le lecteur joue à 12 i/s.)
Résultat :
```
05_feu_de_camp/
├── feu_0000.png
├── feu_0001.png
├── …
└── images_par_seconde.txt ← contient « 12 »
```
### Autre méthode : GIF animé
Un seul fichier, pratique à partager, et la vitesse est enregistrée dedans.
1. Choisissez **Vidéo** et le format **GIF**.
2. Krita a besoin du logiciel gratuit **FFmpeg** pour ça. S'il le demande :
téléchargez-le (<https://ffmpeg.org/download.html>) et indiquez son
emplacement dans la fenêtre de rendu.
3. Taille **32 × 8**. Nommez le fichier, par exemple `05_feu_de_camp.gif`.
> **Limites du GIF** : 256 couleurs maximum (largement assez ici), et une
> durée d'image arrondie au centième de seconde. Le **PNG animé (APNG)** et le
> **WebP animé** fonctionnent aussi, si vous préférez.
### Ce qui ne marche pas
- Les fichiers **`.kra`** (le format de travail de Krita) : exportez toujours.
- Les **vidéos MP4, WebM, MKV** : ce sont des formats compressés qui abîment
les pixels. Utilisez PNG ou GIF.
### Une image fixe
Un logo, une affiche : **Fichier → Exporter…** en **PNG**. Le lecteur
l'affiche 10 secondes.
---
## 7. Prévisualiser sur son ordinateur
Deux outils, qui fonctionnent sans la matrice. Il faut **Python** et la
bibliothèque **Pillow** (une seule fois) :
| Système | Installer Python | Puis installer Pillow |
|---|---|---|
| **Windows** | <https://www.python.org/downloads/> (cochez **« Add python.exe to PATH »**) | `py -m pip install pillow` |
| **macOS** | <https://www.python.org/downloads/> | `python3 -m pip install pillow` |
| **Linux** | déjà installé | `sudo apt install python3-pil python3-tk` |
Ensuite, ouvrez un terminal **dans le dossier `8x32 PI`** (sous Windows,
remplacez `python3` par `py` dans les commandes ci-dessous).
### Le vérificateur
```bash
python3 outils/verifier_animation.py chemin/vers/05_feu_de_camp
```
Il affiche un rapport :
```
05_feu_de_camp
Type : séquence de 24 fichiers (12 images/s)
Taille : 32 × 8 ✓
Images : 24, durée 2.00 s (≈ 12.0 images/s)
Couleurs : 9 différentes ✓
Trop sombre : aucune ✓
Courant : moyen 0.61 A, maximum 0.84 A ✓
Aperçu : apercus/05_feu_de_camp_apercu.png et apercus/05_feu_de_camp_apercu.gif
```
Et il fabrique dans le dossier `apercus` une **planche** (toutes les images
l'une sous l'autre) et un **GIF agrandi « façon LED »**, à partager avec
l'équipe.
| Message | Signification |
|---|---|
| `⚠ attendu 32 × 8` | mauvaise taille de document : l'image sera centrée et coupée |
| `⚠ beaucoup ! anticrénelage ?` | plus de 64 couleurs : du flou s'est glissé dans le dessin |
| `Trop sombre : N couleur(s) seront ÉTEINTES` | des couleurs trop foncées (partie 5) |
| `⚠ limité par le logiciel` | image trop claire et trop remplie : elle sera assombrie |
### Le simulateur
```bash
python3 lecteur.py --simulateur chemin/vers/05_feu_de_camp
```
Une fenêtre s'ouvre et joue l'animation **en boucle, à la bonne vitesse**,
avec 256 ronds qui imitent les LED. Sans chemin, il joue tout le dossier
`animations`. Fermez la fenêtre pour arrêter.
> Le simulateur montre les couleurs **telles que dans Krita**. Il ne montre
> pas la disparition des couleurs très sombres : pour ça, le vérificateur ou,
> mieux, **la vraie matrice**. Testez sur la matrice le plus tôt possible.
---
## 8. Déposer l'animation
Le lecteur joue **tout ce qui se trouve dans le dossier des animations**, par
**ordre alphabétique**. Pour choisir l'ordre, commencez les noms par un
numéro : `01_`, `02_`, `03_`…
**Noms de fichiers** : sans accent, sans espace, sans caractère spécial.
✅ `07_pluie_de_coeurs.gif` ❌ `Pluie de cœurs (v2 finale!!).gif`
Selon l'organisation de l'équipe :
- **Carte SD** : on éteint le Pi, on sort la carte, on la met dans
l'ordinateur, on copie les animations dans le dossier `animations` du
lecteur nommé **`bootfs`**, on remet la carte. Voir
[MODE_VITRINE.md](MODE_VITRINE.md#3-changer-les-animations).
- **Par le réseau** : voir [MODE_VITRINE.md](MODE_VITRINE.md#3-changer-les-animations).
Pour **retirer** une animation de la boucle sans la supprimer : déplacez-la
dans un sous-dossier dont le nom commence par un point, par exemple
`.archives` (les noms en « . » sont ignorés).
---
## 9. Conseils de composition pour une vitrine
- **Lisibilité depuis la rue** : à 3 mètres, un pixel isolé est un point
lumineux. Les formes de 3 pixels et plus se lisent bien. Un contraste fort
(couleur vive sur noir) se lit de loin.
- **Le mouvement attire l'œil** : une animation lente et régulière se regarde
longtemps ; une image fixe passe inaperçue.
- **Texte** : 5 lettres visibles à la fois. Un défilement d'**1 pixel toutes
les 50 à 80 ms** se lit confortablement. Plus vite, on ne lit plus.
- **Boucles** : soignez la jonction fin → début. Un saut se remarque
beaucoup plus sur 256 pixels que sur un écran.
- **Diffuseur** : si la matrice est placée derrière un matériau diffusant
(calque, plexiglas dépoli), les pixels se fondent et les détails d'un pixel
disparaissent. Testez avec le diffuseur réel.
- **Variété** : alternez animations chargées et calmes, couleurs chaudes et
froides. L'ordre des numéros, c'est votre montage.
### ⚠️ Sécurité : pas de flashs rapides
Une vitrine est vue par **tout le monde**, y compris des personnes
**épileptiques photosensibles**. Les règles d'accessibilité (WCAG) demandent :
- **pas plus de 3 flashs par seconde** (un flash = passage brusque du sombre
au clair puis retour) ;
- surtout **pas de grands aplats rouges** qui clignotent ;
- pas de clignotement de toute la matrice à la fois.
Un stroboscope est très efficace pour attirer l'œil… et peut provoquer une
crise. On s'en passe.
---
## 10. Liste de contrôle avant de rendre une animation
- [ ] Document en **32 × 8** pixels (ou 39 × 7 pour la matrice finale)
- [ ] Pas de flou : **moins de 64 couleurs** (vérificateur)
- [ ] Pas de couleurs **trop sombres** (vérificateur)
- [ ] Fond **noir** ou transparent
- [ ] Vitesse choisie : `images_par_seconde.txt` présent (séquence) ou GIF
- [ ] La boucle s'enchaîne bien (simulateur)
- [ ] **Pas plus de 3 flashs par seconde**
- [ ] Nom de fichier : `NN_nom_sans_accent`
- [ ] Testé sur la vraie matrice au moins une fois