Dessine-moi un pixel !
Les
documents disponibles sur cette page ainsi que le contenu de la page
sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International 
Cette activité est très fortement inspirée d'un travail de collègues de l'IREM de Clermont-Ferrand.
Notions abordées :
Avec cette activité, tout en réalisant une fresque collaborative, on parle de différentes façons de représenter une information (ici une image) et de l'efficacité de ces représentations. En d'autres mots on parle de codage d'image et de compression.
Public :
Cette activité a été testée plusieurs années en mode tout public à la fête de la science. Le plus jeune participant était en maternelle et l'a réalisé avec aide. Elle est également réalisable en classe dès le primaire.
Matériel :
Pour réaliser cette activité il vous faut :
- Du papier quadrillé (on peut prendre des feuilles classiques petits ou grands carreaux, mais attention, la marge des feuilles grands carreaux fait perdre de la surface utile)
- Des crayons ou feutres, si possible tous de la même couleur, un par participant.e.
- Le code de l'image (à faire vous-même à la main, à récupérer dans la section Liens ou à créer à partir d'une image noir & blanc que vous dessinez).
Principe :
Cette activité permet de parler de codage d'une image, de comprendre un codage particulier et de coder/décoder une image, ainsi que de travailler la collaboration en réalisant une image commune.
Le format le plus basique pour une image est de stocker une par une les couleurs de chaque point de l'image appelé pixel. Si on zoome sur ce type d'images appelées "matricielles", on voit qu'elles sont composées de plein de petits carrés de couleur. Dans le cas de cette activité, comme on n'a que deux couleurs (blanc et noir), il nous suffit de deux valeurs (mettons 0 et 1) pour représenter une image. Le code 00100110 décrit une image composée de 2 pixels blanc, puis 1 noir, deux blancs, deux noirs et un blanc.
Seulement ce format n'est pas très performant. Il permet de coder toutes les images noir et blanc, mais il prend beaucoup de place. En effet une image de 100 x 100 pixels tous blancs nécessiterait 10 000 zéros pour la coder. Le codage RLE (pour Run Length Encoding) permet de compresser de telles images en ne stockant plus chaque pixel un par un, mais en donnant la longueur des plages de pixels consécutifs de la même couleur.
Attention :- on ne se préoccupe pas dans le codage RLE des retours à la ligne. Si votre image fait 10 pixels de large et que le code vous indique de colorier 12 pixels, vous coloriez toute la ligne plus les deux premiers pixels de la suivante,
- il faut une convention pour savoir par quelle couleur (blanc ou noir) commencer. J'ai choisi le blanc. Ainsi si une image commence par 3 pixels blancs, mon codage RLE commence par "3", et si on image commence par 3 pixels noirs, mon codage RLE va commencer par "0 3". On a en effet 0 pixels blancs suivis de 3 pixels noirs.
Le contexte étant posé, l'activité se déroule comme suit :
- On distribue à chaque participant.e le codage RLE d'une partie d'une grande image (dans la photo ci-contre ce serait une des lignes)
- On explique le codage RLE et plus particulièrement comment décompresser ce codage pour obtenir l'image
- On les laisse reconstituer chacun.e leur partie et on les met ensemble pour reconstituer l'image globale
Attention à bien indiquer sur chaque petite image à quel morceau de la grande il correspond, et comment l'orienter. De même il faut bien insister sur le fait que le codage RLE se moque des retours à la ligne. Si je dois colorier 8 pixels et qu'il n'en reste que 6 sur la ligne en cours, je colorie les 6 et continue avec les deux de la ligne suivante.
Extensions :
Une fois que le principe de décompression RLE est bien compris, on peut demander aux participant.e.s d'inventer une image (sur une grille qu'on leur donne, puis de la compresser avec le codage RLE, puis de la transmettre à un.e camarade qui reconstituera l'image à partir du code.
Afin d'adapter l'image à sonpublic (d'une part une image qui leur plairait, d'autre part le bon nombre de petites images à reconstituer), il est intéressant de construire soi-même son codage RLE à partir d'une image. Je fournis dans la section Liens un programme que j'ai écrit et qui permet de faire ce boulot.
Pour un séminaire en ligne, j'ai fait une version rebranchée de l'activité. Avec une image coupée en 4 codes RLE, nous avons utilisé un tableur partagé (framacalc). J'avais délimité sur l'écran 4 zones de 10x10 pixels et redimensionné les lignes/colonnes pour que mes pixels soient carrés. Quatre personnes ont chacune utilisé un code RLE et rempli leur carré (à l'aide de l'outil "inverser la couleur"). J'ai ensuite masqué les colonnes qui séparaient mes 4 carrés et l'image était reconstituée. Voir la secion Liens pour une illustration.
Liens :
- Pour faire participer les gens, j'imprime et je découpe les grilles disponibles dans ce fichier
- Voici le programme que j'utilise pour produire le code RLE d'une image. Il est pour le moment commenté en anglais, et nécessite avant d'être lancé de produire une image pbm (possible avec Gimp mais également avec ImageMagick sous Windows à ce qu'il paraît), puis de mettre dans le code de mon programme python la largeur de votre image (attention, pour le moment elle doit être carrée), en combien de morceaux vous voulez couper la largeur de l'image, et le chemin vers le fichier contenant votre image à traiter.
- Pour l'image du lapin (voir photos du rendu final après décodage et image d'origine dans la section Photos), voici l'image au format pbm et le codage RLE correspondant
- Pour le logo informagicien.ne (voir également dans la section Photos), voici l'image au format pbm et le codage RLE correspondant
- Et enfin, pour l'image spéciale saveur des maths utilisée aux journées APMEP 2019 à Dijon, voici l'image au format pbm et le codage RLE correspondant (sans bug cette fois-ci, pas besoin de faire du découpage :o) ).
- Pour la version rebranchée, j'ai utilisé ces codes et en particulier les quatre premières images pour reconstituer Pikachu. Vous pouvez voir le résultat, en cours de reconstitution et après fusion des images.
Photos :
Exemples d'images pixellisées noir et blanc et de résultats obtenus en dessinant à la main collaborativement. Le lapin fait 5 * 5 = 25 petites images, et le logo informagicienne en fait 10*10=100 (moins les quelques images totalement blanches que l'on colle avant que le public n'arrive, ici une petite vingtaine à vue de nez).
