Files
vitrine-pixels/8x32 PI/GUIDE_KRITA.md
T
2026-10-08 15:25:14 +02:00

15 KiB
Raw Blame History

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

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 »
  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 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)
  1. Zoomez énormément (touche +, ou la molette avec Ctrl) : à 3200 %, chaque pixel fait environ 3 cm à l'écran.
  2. 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 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 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

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

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.
  • 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 : 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