Atelier d’informatique débranchée

Cette page présente le déroulement possible d’un atelier d’informatique débranchée sur le thème du codage par plage ou RLE pour run-length encoding. Il est largement inspiré de l’activité Poster collaboratif imaginée par le groupe Informatique Sans Ordinateur de l’IREM de Clermont-Ferrand.

Afin d’approcher le sujet d’une manière graphique et collaborative, l’idée est d’amener à appliquer ce codage sur des images en noir et blanc, que les participants auront à décrire (encodage) ou à reconstituer collectivement (décodage).

Cet atelier a notamment été donné dans le cadre d’une sortie scolaire pour la Fête de la science 2024 à l’Université Paris 8, avec 2 intervenant·es, une classe de 28 élèves, un accompagnateur non-expert (enseignant du secondaire), dans une salle équipée d’un projecteur, d’un tableau et d’un ordinateur.

Résumé de la trame de l’atelier.

  1. Vers la représentation bitmap : comment transmettre précisément une image ? (30min.)
  2. Encodage RLE : comment faire plus efficace ? (20min.)
  3. Décodage du RLE par un dessin collaboratif. (30min.)

Vers la représentation bitmap

L’idée de cette première partie de l’atelier est d’amener les élèves à comprendre la nécessité d’avoir un format d’encodage d’image qui soit systématique, simple et précis.

Matériel et outils nécessaires/utiles.

Un projecteur et un écran, un ordinateur, suffisamment de petites images imprimées (elles peuvent être distribuées par groupe de 2-3 élèves), du type de la Figure 1.

Dispositif.

Un·e élève volontaire (de préférence, qui aime bien dessiner) est placé·e devant un ordinateur, face à ses camarades, dos au tableau où est projeté l’écran de l’ordinateur.

Consigne.

Le groupe des élèves voyant le dessin (appelons-les les dicteur·ices) doivent dicter à l’oral l’image à leur camarade, afin que ce·tte dernier·ère puisse la représenter exactement sur son logiciel de dessin.

Suggestions.

  1. De préférence, l’image doit être "figurative", afin que les élèves commencent par décrire des formes ou des attributs de l’image. Par exemple, sur l’image de la Figure 1, les élèves ont commencé par décrire “c’est un Minion”, puis dire “il a un œil au milieu”, puis ont commencé à préciser la taille et la forme de l’œil, etc.
  2. Il est bon de laisser les élèves se tromper (beaucoup), et perdre du temps à remplir cette "mission". Ce n’est pas grave ! Ces imprécisions et ces échanges entre dicteur·ices et dessinateur·ice leur montre l’intérêt d’avoir un algorithme pré-établi pour décrire une image.
Figure 1: Une figure pixelisée de Minion, appropriée pour l’activité de dictée d’image

Temps d’échange / conclusion.

À la fin de cette activité, il est possible d’échanger avec les élèves sur les sujets suivants :

On finit par donner le nom de la représentation : bitmap.

Encodage RLE

Dans cette deuxième partie, on repart de ce que l’on a compris : une image peut-être représentée par une suite ordonnée de bits, c’est-à-dire de 0 et de 1.

Matériel et outils nécessaires/utiles.

Un tableau blanc et un feutre effaçable. Un ordinateur et un projecteur, si besoin, en débit d’activité.

Le Minion de la Figure 1 étant probablement une image trop complexe/grande pour cette activité, on peut repartir d’une image plus petite, par exemple le point d’interrogation de la Figure 2.

Figure 2: Une figure pixelisée plus petite, pour le passage de l’encodage bitmap à l’encodage RLE.

Dispositif.

Sur un tableau, on écrit la grille de 0 et de 1 représentant la Figure 2.

0 0 0 0 0 0 0 0 0
0 0 0 1 1 1 0 0 0
0 0 1 0 0 0 1 0 0
0 0 0 0 0 0 1 0 0
0 0 0 0 0 1 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0
0 0 0 0 0 0 0 0 0

Puis :

Laisser quelques propositions, puis amener les élèves vers l’idée de description par plages de valeurs consécutives. On pourra par exemple suivre les étapes suivantes :

Étape 1 : Pour chaque ligne de la représentation binaire de l’image, on peut donner le nombre de 0 et le nombre de 1 consécutifs. Au total : 24 × 2 = 48 instructions.

0 0 0 0 0 0 0 0 0 \(\quad\to\; 9\) fois 0
0 0 0 1 1 1 0 0 0 \(\quad\to\; 3\) fois 0, \(3\) fois 1, \(3\) fois 0
0 0 1 0 0 0 1 0 0 \(\quad\to\; 2\) fois 0, \(1\) fois 1, \(3\) fois 0, \(1\) fois 1, \(2\) fois 0
0 0 0 0 0 0 1 0 0 \(\quad\to\; 6\) fois 0, \(1\) fois 1, \(2\) fois 0
0 0 0 0 0 1 0 0 0 \(\quad\to\; 5\) fois 0, \(1\) fois 1, \(3\) fois 0
0 0 0 0 1 0 0 0 0 \(\quad\to\; 4\) fois 0, \(1\) fois 1, \(4\) fois 0
0 0 0 0 0 0 0 0 0 \(\quad\to\; 9\) fois 0
0 0 0 0 0 0 0 0 0 \(\quad\to\; 9\) fois 0
0 0 0 0 1 0 0 0 0 \(\quad\to\; 4\) fois 0, \(1\) fois 1, \(4\) fois 0
0 0 0 0 0 0 0 0 0 \(\quad\to\; 9\) fois 0

Étape 2 : On n’est pas obligé de raisonner ligne par ligne ! En regroupant les plages de 0 et de 1 qui se suivent, on obtient 15 × 2 = 30 instructions.

0 0 0 0 0 0 0 0 0 \(\quad\to\; 12\) fois 0
0 0 0 1 1 1 0 0 0 \(\quad\to\; 3\) fois 1, \(5\) fois 0
0 0 1 0 0 0 1 0 0 \(\quad\to\; 1\) fois 1, \(3\) fois 0, \(1\) fois 1, \(8\) fois 0
0 0 0 0 0 0 1 0 0 \(\quad\to\; 1\) fois 1, \(7\) fois 0
0 0 0 0 0 1 0 0 0 \(\quad\to\; 1\) fois 1, \(7\) fois 0
0 0 0 0 1 0 0 0 0 \(\quad\to\; 1\) fois 1, \(26\) fois 0
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0 \(\quad\to\; 1\) fois 1, \(13\) fois 0
0 0 0 0 0 0 0 0 0

Étape 3 : Après une plage de 0, suit nécessairement une plage de 1… pas besoin de le préciser à chaque fois ! On obtient le code RLE à 15 instructions 12, 3, 5, 1, 3, 1, 8, 1, 7, 1, 7, 1, 26, 1, 13 qui décrit parfaitement l’image.

0 0 0 0 0 0 0 0 0 \(\quad\to\; 12\)
0 0 0 1 1 1 0 0 0 \(\quad\to\; 3\), \(5\)
0 0 1 0 0 0 1 0 0 \(\quad\to\; 1\), \(3\), \(1\), \(8\)
0 0 0 0 0 0 1 0 0 \(\quad\to\; 1\), \(7\)
0 0 0 0 0 1 0 0 0 \(\quad\to\; 1\), \(7\)
0 0 0 0 1 0 0 0 0 \(\quad\to\; 1\), \(26\)
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0
0 0 0 0 1 0 0 0 0 \(\quad\to\; 1\), \(13\)
0 0 0 0 0 0 0 0 0

Remarque.

Le fait que ce sont uniquement des nombres qui sont utilisés pour représenter des images peut soulever quelques questions. Ne pas hésiter à prendre deux minutes pour un point étymologique sur le “numérique”.

Décodage RLE

Dans cette troisième partie, on souhaite amener les élèves à décoder un code RLE.

Pour rendre l’atelier plus interactif, on choisit une “grande” image, que l’on partitionne en (au moins) autant de sous-images qu’il y aura de participant·es à l’atelier. Puis, on fournit à chaque participant·e le code RLE de la sous-image, ainsi qu’une grille vide.

Pour chaque participant·e, le but est dessiner la sous-image sur sa grille, en décodant le code RLE qu’on lui propose.

Puis, on regroupe les sous-images dessinées pour former un grand dessin collaboratif.

Matériel et outils nécessaires/utiles.

Cette partie a besoin de davantage de préparation/matériel que les précédentes.

Préparation.

Pour le choix de grande image, sa pixelisation, son découpage, le calcul des encodages RLE de chaque sous-image et l’impression des grilles, on peut utiliser l’outil en ligne disponible ici : lvzl.fr/other/rle/transmettre.html.

Un exemple de découpage d’une image et de production de codes RLE est donné dans les Figures 345, et 6.

Figure 3: Image de Mario originale.
Figure 4: Découpage de Mario en \(4 \times 5 = 20\) grilles grâce à l’outil en ligne.
Figure 5: Sous-image A1

Code RLE : 90, 1, 11, 1, 11, 1, 12, 1, 11, 1, 12, 1, 11, 1, 4

Figure 6: Sous-image A2

Code RLE : 7, 3, 8, 2, 4, 2, 3, 2, 4, 2, 4, 1, 5, 1, 5, 1, 5, 1, 2, 2, 1, 1, 6, 1, 2, 2, 7, 1, 3, 3, 6, 1, 2, 2, 1, 1, 6, 1, 2, 2, 1, 1, 6, 1, 2, 2, 9, 1, 11, 7, 3, 3, 7