13. Pixel Art

On trouve aujourd’hui des articles de mode, vêtements et accessoires qui permettent d’afficher un logo, ou un message personnalisé. Ces articles embarquent un écran LED, que l’on peut commander à l’aide d’un smartphone par exemple. Ce sont des Objets Connectés.  Comment parvient-on à dessiner sur ce type d'écran ?



(sac à dos connecté avec écran LED – u-delight.fr/produit/sac-a-dos-led-connecte-interactif/)

1. Formation d’une image
Une image numérique est constituée de pixels dont on règle l’intensité lumineuse. 
Une image numérique constituée de pixels de 5 pixels * 6 pixels peut-être modélisée par une grille de 5 cases par 6 cases. 
L’’image suivante est en noir et blanc. Les pixels d’intensité lumineuse égale à 0 sont noirs. Ceux à 1 sont blancs.



On pourrait représenter chaque ligne de cette image par une liste de valeurs 0 ou 1 :
ligne 1 = [1, 0, 0, 0, 1]

L’image entière serait alors une liste de listes (une liste contenant les listes de chaque ligne).
On donne ci-contre un extrait :
image = [[1, 0, 0, 0, 1], [1, 1, 1, 1, 0], … [1, 0, 0, 0, 0] ]

2. L’écran LED de la carte micro:bit
La grille de LED de la carte micro:bit est constituée d’une matrice de 5 * 5 LED. L’intensité lumineuse peut prendre une valeur entre 0 à 9.On a donc 10 valeurs possibles. La valeur 0 correspondant à la LED éteinte, 9, allumée au maximum.

Nous souhaitons créer une image de bateau comme ci-dessous.I Les mâts devront être  moitié moins lumineux que la coque.

• Question 1 : Proposer la liste bateau permettant de stocker les informations de cette image. Il faudra utiliser la structure de données vue au paragraphe précédent.

• Question 2 : Comment accéder à l’intensité d’un pixel situé à la colonne j, et la ligne i à partir de cette liste?

3. Affichage de l’image sur la carte micro:bit

La librairie MB_DISP.8xv fournit la fonction display.set_pixel(x,y,intensité)
Ce que produit cette fonction pourrait être écrit en langage naturel :

Eclaire le pixel de la colonne x et de la ligne y avec la valeur intensité

Les coordonnées des lignes et colonnes de l’écran LED sont illustrées sur l’image ci-dessous :



L’algorithme qui permet l’affichage de toutes les LED à partir d’une liste L est présenté ici :
Pour i qui va de 0 à 4    
Pour j qui va de 0 à 4        
 Eclaire le pixel de la colonne j et de la ligne x avec la valeur intensité

• Question 3 : Ecrire une fonction affiche qui affiche l’image à partir d’une liste de pixels mise en paramètre. Cette liste aura la structure vue plus haut.

4. Crée ton propre logo animé
A partir des documents précédents, et des corrections données aux questions préliminaires :

•  Utiliser la grille vide pour créer un dessin personnel, puis représenter par une liste en Python.

• Terminer le script pour afficher l’image sur la carte micro:bit.

• Ajouter une nouvelle fonction à ce programme que l’on appellera reverse. Cette fonction doit retourner l’image haut <-> bas en modifiant les éléments de la liste.

• Créer une boucle dans le script qui alternera les affichages de l’image et de son retourné, pour créer l’illusion d’un mouvement, du type FLIP CARD.

• Module général de gestion de la carte micro:bit : MICROBIT.8xv
• Module permettant d’utiliser les boutons A et B de la carte : MB_BUTNS.8xv
  
• Module pour gérer l’affichage des DEL : MB_DISP.8xv

Remarque : le fichier TI_Runtime_for_Microbit_ver_2.x.hex est à télécharger dans la carte micro:bit en connectant celle-ci directement à l’ordinateur (via le port USB).

Correction des questions préliminaires
Réponse 1 : bateau = [[0,5,0,5,0],[0,5,0,5,0],[0,5,0,5,0],[9,9,9,9,9],[0,9,9,9,0]]

Réponse 2 : Il faudra utiliser en Python : bateau[j]

Réponse 3 : fonction affiche
On a vu dans le paragraphe précédent, que la valeur de l’intensité d’un pixel en x,y était accessible par L[x][y] à partir de la liste L.
Cette liste contient une liste par ligne, constituée de 5 valeurs correspondant aux intensités.
def affiche(L):    
for i in range(5):    
 for j in range(5):         
   display.set_pixel(j,i,L[j])


## Création d’une fonction reverse
Cette fonction prendra une liste de 5 listes en paramètre. Et elle devra retourner les éléments de la liste : le premier élément deviendra le dernier, le 2e deviendra l’avant dernier…
Voici le script Python proposé :
def reverse(L):
L2 = [[],[],[],[],[]]
for l in range(5):
L2[l] = L[4-l]
return L2

## Construction du programme
Il reste à appeler la fonction reverse et stocker la liste retournée dans une nouvelle variable :

img = [[0,5,0,5,0],[0,5,0,5,0],[0,5,0,5,0],[9,9,9,9,9],[0,9,9,9,0]]
img_rever = reverse(img)

Puis à créer une boucle qui affiche indéfiniment les deux images, l’une après l’autre, avec un temps de pause suffisant entre les affichages pour pouvoir les distinguer