Images¶
MicroPython est à peu près aussi bon en art que tu pourrais l’être si la seule je que tu avais était une grille de LED de 5x5. MicroPython te donne pas mal de contrôle sur l’affichage de façon à ce que tu puisses créer toute sorte d’effets intéressants.
MicroPython est fourni avec beaucoup d’images intégrées à montrer sur l’affichage. Par exemple, pour que l’appareil ait l’air heureux, tape:
from microbit import *
display.show(Image.HAPPY)
J’imagine que tu peux te rappeler ce fait la première ligne. La seconde utilise
l’objet display
pour show
(montrer) une image intégrée. L’image heureux
que nous voulons afficher fait partie del’objet Image
et est appelée HAPPY
.
On écrit show
pour l’utiliser en la mettant entre parenthèses ((
et )
).
Voici la liste des images intégrées:
Image.HEART
Image.HEART_SMALL
Image.HAPPY
Image.SMILE
Image.SAD
Image.CONFUSED
Image.ANGRY
Image.ASLEEP
Image.SURPRISED
Image.SILLY
Image.FABULOUS
Image.MEH
Image.YES
Image.NO
Image.CLOCK12
,Image.CLOCK11
,Image.CLOCK10
,Image.CLOCK9
,Image.CLOCK8
,Image.CLOCK7
,Image.CLOCK6
,Image.CLOCK5
,Image.CLOCK4
,Image.CLOCK3
,Image.CLOCK2
,Image.CLOCK1
Image.ARROW_N
,Image.ARROW_NE
,Image.ARROW_E
,Image.ARROW_SE
,Image.ARROW_S
,Image.ARROW_SW
,Image.ARROW_W
,Image.ARROW_NW
Image.TRIANGLE
Image.TRIANGLE_LEFT
Image.CHESSBOARD
Image.DIAMOND
Image.DIAMOND_SMALL
Image.SQUARE
Image.SQUARE_SMALL
Image.RABBIT
Image.COW
Image.MUSIC_CROTCHET
Image.MUSIC_QUAVER
Image.MUSIC_QUAVERS
Image.PITCHFORK
Image.XMAS
Image.PACMAN
Image.TARGET
Image.TSHIRT
Image.ROLLERSKATE
Image.DUCK
Image.HOUSE
Image.TORTOISE
Image.BUTTERFLY
Image.STICKFIGURE
Image.GHOST
Image.SWORD
Image.GIRAFFE
Image.SKULL
Image.UMBRELLA
Image.SNAKE
Il y en a pas mal! Pourquoi ne pas modifier le code qui donne à micro:bit l’air
heureux pour voir à quoi ressemble les autres images intégrées ? (Il te suffit de
remplacer Image.HAPPY
par l’une des images intégrées de la liste ci-dessus.)
Images personnelles¶
Bien sûr, tu veux que ta propre image s’affiche sur le micro:bit, non ?
C’est facile.
Chaque pixel LED sur l’affichage physique peut prendre une parmi dix valeurs.
Si un pixel prend la valeur 0
(zéro) c’est qu’il est éteint. Litéralement,
il a une luminosité de zéro.En revanche, s’il prend la valeur 9
il est à la
luminosité maximale. Les valeurs de 1
à 8
représentent des niveaux de
luminosité entre éteint (0
) et « à fond » (9
).
Muni de ces informations, il est possible de créer une nouvelle image comme ça:
from microbit import *
boat = Image("05050:"
"05050:"
"05050:"
"99999:"
"09990")
display.show(boat)
(Une fois lancé, l’appareil devrait afficher un bateau à voile dont le mât est moins brillant que la coque).
As-tu compris comment dessiner une image ? As-tu remarqué que chaque ligne de
l’affichage physique est représentée par une line de nombres se terminant par :
et entourée de "
guillemets doubles ? Chaque nombre indique une luminosité.
Il y a cinq lignes de cinq nombres donc il est possible de spécifier la luminosité
individuelle de chacune des cinq LED sur chacune des cinq lignes sur l’affichage
physique. C’est comme ça qu’on créé une image.
Simple!
En fait, tu n’as pas besoin d’écrire tout ça sur plusieur lignes. Si tu te sent capable de garder la trace de chaque ligne, tu peux le ré-écrire comme ça:
boat = Image("05050:05050:05050:99999:09990")
Animation¶
Les images statiques sont amusantes, mais c’est encore plus amusant de les faire bouger. C’est aussi incroyablement facile à faire avec MicroPython ~ il suffit d’utiliser une liste d’images.
Voici une liste de courses:
Oeufs
Bacon
Tomates
Et voici comment la représenter en Python:
courses = ["Oeufs", "Bacon", "Tomates" ]
J’ai simplement créé une liste nommée courses
et elle contient trois éléments.
Python sait que c’est une liste car elle est contenue dans des crochets ([
et ]
). Les éléments de la liste sont séparés par des virgules (,
) et dans
cet exemple les éléments sont trois chaînes de caractères: "Oeufs"
, "Bacon"
et "Tomates"
. Nous savons que ce sont des chaînes de caractères parce qu’elles
sont contenues des guillemets "
.
Tu peux stocker n’importe quoi dans une liste en Python. Voici une liste de nombres:
premiers = [2, 3, 5, 7, 11, 13, 17, 19]
Note
Les nombres n’ont pas besoin d’être entre guillemets puisqu’ils représentent
une valeur (plutôt qu’une chaînes de caractères). C’est la différence entre
2
(la valeur numérique 2) et "2"
(le caractères, le chiffre, qui
représente le nombre 2). Ne t’inquiète pas si ce n’est pas très clair pour
l’instant. Tu t’y habitueras bientôt.
Il est même possible de stocker des choses de catégories différentes dans une même liste:
list_variee = ["salut!", 1.234, Image.HAPPY]
As-tu remarqué le dernier élément? C’était une image!
On peut dire à MicroPython d’animer une liste d’images. Par chance npus avons
deux listes d’images déjà prêtes. Elles s’appellent Image.ALL_CLOCKS
et
Image.ALL_ARROWS
:
from microbit import *
display.show(Image.ALL_CLOCKS, loop=True, delay=100)
Comme avec une seule image, on utilise display.show
pour la montrer sur
l’affichage du matériel. Mais ici on indique à MicroPython d’utiliser Image.ALL_CLOCKS
et il comprend qu’il doit montrer chaque image de la liste, l’une après l’autre.
On indique aussi à MicroPython de parcourir la liste d’images en boucle (pour
que l’animation se répète indéfiniment) en écrivant loop=True
. De plus, nous lui
indiquons que nous voulons un temps de 10 millisecondes entre chaque image avec
l’argument delay=100
.
Peux-tu trouver comment animer la liste Image.ALL_ARROWS
? Comment éviterais-tu
de la parcourir en boucle indéfiniment ? (Indice: le contraire de True
est
False
bien que la valeur par défaut de loop
soit False
)? Peux-tu changer
la vitesse de l’animation ?
Enfin, voici comment créer ta propre animation. Dans mon exemple, je vais faire couler mon bateau en bas de l’affichage:
from microbit import *
bateau1 = Image("05050:"
"05050:"
"05050:"
"99999:"
"09990")
bateau2 = Image("00000:"
"05050:"
"05050:"
"05050:"
"99999")
bateau3 = Image("00000:"
"00000:"
"05050:"
"05050:"
"05050")
bateau4 = Image("00000:"
"00000:"
"00000:"
"05050:"
"05050")
bateau5 = Image("00000:"
"00000:"
"00000:"
"00000:"
"05050")
bateau6 = Image("00000:"
"00000:"
"00000:"
"00000:"
"00000")
tous_les_bateaux = [bateau1,bateau2,bateau3,bateau4,bateau5,bateau6]
display.show(tous_les_bateaux, delay=200)
Voici comment le code marche:
- Je créé six images de
bateau
de la même façon que ce que j’ai décris au-dessus. - Ensuite, je les mets dans une liste que j’appelle
tous_les_bateaux
- Enfin, je demande
display.show
pour animer la liste avec un délai de 200 millisecondes - Puisque je n’ai pas déclaré
loop=True
, le bateau ne coulera qu’une fois
(rendant ainsi mon animation scientifiquement correcte). :-)
Que voudrais-tu animer ? Peux-tu animer un effet spécial ? Comment ferais-tu un fondu d’image en sortie et en ouverture ?