vitrine-pixels/8x32 PI/GUIDE_KRITA.md

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.

En une phrase : un document vertical de 8 × 32 pixels (8 de large, 32 de haut), 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 »
2. Créer le document
3. Dessiner en pixel art
4. Animer
5. Ce qui change entre l'écran et les LED
6. Exporter
7. Prévisualiser sur son ordinateur
8. Déposer l'animation
9. Conseils de composition pour une vitrine
10. Liste de contrôle avant de rendre une animation

---

1. Comprendre la « toile »

La matrice est posée debout dans la vitrine : c'est un écran de 8 colonnes × 32 lignes = 256 pixels, comme une enseigne verticale. Chaque pixel est une LED, et les LED sont espacées de 1 cm : la matrice mesure 8 cm de large et 32 cm de haut.

   x → 0 . . . . . . 7
 y ↓ ┌─────────────────┐
   0 │ ■ ■ ■ ■ ■ ■ ■ ■ │
     │ ■ ■ ■ ■ ■ ■ ■ ■ │
     │        …        │     32 lignes
     │ ■ ■ ■ ■ ■ ■ ■ ■ │
  31 │ ■ ■ ■ ■ ■ ■ ■ ■ │
     └─────────────────┘
          8 colonnes

Quelques ordres de grandeur pour se repérer :

• un caractère lisible fait 5 pixels de large × 7 de haut. Deux façons d'écrire :

  • lettres empilées, les unes sous les autres, comme une enseigne d'hôtel : 4 lettres visibles à la fois (4 × 8 = 32) ;
  • texte couché, qui se lit en penchant la tête, comme le titre au dos d'un livre : 5 lettres à la fois.

  Un texte plus long doit défiler (vers le haut) ;

• un visage simple tient dans 8 × 8 : il y a la place pour 4 visages l'un au-dessus de l'autre ;

• une ligne de 1 pixel d'épaisseur se voit très bien : c'est une rangée de LED ;

• jouez avec la verticalité : ce qui monte, tombe, coule, grimpe, se remplit (une pluie, une bulle, un thermomètre, une fusée, une liane…).

Dessiné couché par erreur ? Une image de 32 × 8 (couchée) est quand même jouée : le lecteur la fait tourner d'un quart de tour, et elle se lit alors de bas en haut. Pratique pour un texte « dos de livre », mais pensez en vertical dès le départ, c'est plus beau.

La matrice finale fera 39 × 7 (ou 7 × 39 si elle est aussi verticale) : on vous le précisera. Le lecteur centre les images qui n'ont pas la bonne taille, et coupe ce qui dépasse.

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	8 pixels
Hauteur	32 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 480 × 1920 réduite à 8 × 32 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 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 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 8 × 32.
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 8 × 32. 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

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      : 8 × 32  ✓
  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 8 × 32	mauvaise taille de document : l'image sera centrée et coupée (ou tournée si elle est couchée, 32 × 8)
⚠ 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

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 :

• Par la page web (le plus simple) : ouvrez http://172.16.50.27 (depuis le Wi-Fi) dans un navigateur, sur le même réseau que le Pi, et déposez vos fichiers. On y choisit aussi l'ordre et les animations jouées. Voir INTERFACE_WEB.md. Les noms y sont nettoyés et numérotés automatiquement.
• 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.
• Par le réseau : voir MODE_VITRINE.md.

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 : 4 lettres empilées (ou 5 couchées) 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 vertical en 8 × 32 pixels
• 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