Des images et des fantasticodeurs : 1ère partie, pixels et vecteurs
Ces dernières séances, au club du mercredi, ont été consacrées aux images. Voici comment nous avons abordé ce thème :
Un petit jeu pour se mettre dans l’ambiance
Nous avons commencé par un jeu tout simple, mais drôlement intéressant : Pixels au paravent (trouvé sur cette mine d’informations qu’est le site de Pixees). A travers ce jeu, les enfants (re)découvrent la notion de pixels et d’encodage. C’est l’occasion de leur parler du bon vieux temps et de pixel art. A partir de là, la question de la couleur arrive d’elle-même, et du coup on recommence le jeu, cette fois avec des feutres de couleurs et quelques bits en plus. Au fait, comment ça marche en vrai sur un écran ?
Passons sur l’ordi : les images “bitmap”
On a ouvert ensemble une image “bitmap”, puis zoomé jusqu’à voir apparaître les pixels. “Comme dans le jeu !” Puis on a jeté un oeil sur l’encodage du fichier en hexadécimal (avec un éditeur hexadécimal) : finalement ça ressemble assez à ce qu’on a fait en début de séance !
Bon, parfois c’est un peu plus compliqué que ça, car certains formats d’images “compressent” l’information. Cet autre jeu, proposé par CSUnplugged, propose d’ailleurs un encodage plus économe que notre “Pixels au paravent”.
C’est le moment de parler de formats d’images, donc, et finalement les enfants en connaissent pas mal. Pour les mini-geeks qui aiment surtout mettre les mains à la pâte, j’explique comment je choisis le format à utiliser : jpg pour les photos, ou si le poids est le plus important ; png s’il y a de la transparence, ou bien s’il y a de grands aplats, des contours nets ou du texte par exemple. Gif pour les gifs animés uniquement.
On reparle de code : les images vectorielles
Mais à côté des bitmaps, il existe d’autres images qui n’ont rien à voir : les images vectorielles. Ce ne sont pas des pixels, mais du code, des fonctions mathématiques, et ça, ça plaît beaucoup aux fantasticodeurs :-)
Premier intérêt des images vectorielles : on peut les agrandir et les réduire sans perdre en qualité. Démonstration : j’affiche une image vectorielle et son export bitmap côte à côte, et je zoome :
Deuxième intérêt : c’est du code, et donc on va pouvoir jouer avec !
Pour prouver mes dires : j’ouvre dans mon éditeur de texte une image toute simple, un rectangle et un cercle, et on peut voir (au milieu d’un tas de lignes bizarres) :
<rect id=”Rectangle” fill=”#FF4700" x=”0" y=”0" width=”41" height=”27"></rect>
<circle id=”Oval” fill=”#D1C7C7" cx=”18.5" cy=”21.5" r=”10.5"></circle>Comme nos fantasticodeurs ont déjà fait du processing js avec Khanacademy, ils sont en terrain connu !
La suite au prochain épisode :-)
