Ce titre sonne comme le début d'une blague, mais je vous assure, cet article est très sérieux. Pour la fête de la science 2018, nous avons décidé de nous lancer dans la création d'un atelier autour de la programmation numérique. Mais avec une particularité, découvrir différents aspects de ce domaine, de manière déconnectée, sans outils numériques. Depuis, cette animation a évoluée et fonctionne plutôt bien avec le public (à partir de 7 ans environ). Allez, on vous explique tout ici.

Photo de chaton, ©Pixabay

Oui, on est tous d'accord, ce chaton est trop mignon ! Mais cette photo, telle que vous la voyez, n'est qu'un code informatique qui, lorsque vous avez ouvert cet article, s'est exécuté afin d'allumer les pixels de votre écran pour faire apparaître l'image. Derrière cet affichage, se cache diverses prouesses technologiques, dont les bases ne sont, vous allez le voir, pas si compliquées que ça ! Nous proposons donc 3 missions au public afin d'y aller étape par étape.

Mission n°1 : Qu'est-ce qu'un programme

Activité 1 de l'atelier déconnecté, © Kimiyo

Pour cette première étape, nos futurs experts informaticiens vont découvrir ce qu'est un programme. Leur mission sera de sauvegarder cette sublime photo de chaton depuis une clef USB sur le disque dur de l'ordinateur, puis de l'afficher à l'écran. Mais souvenez-vous, ils font cela sans objets connectés, donc sans ordinateur. Le but en réalité, est de créer un "programme" à l'aide d'un tapis quadrillé et de cartes actions. Il s'agit d'une succession de cartes actions, qui reprend le principe d'un programme.

Tapis de programmation numérique, © Kimiyo

Ils ont en leur possession 3 cartes action différentes : "Avance", "Droite" et "Gauche". Tel le premier Mario à la recherche de sa princesse, ils vont devoir réaliser le parcours sur ce tapis en utilisant le moins de cartes possibles et en évitant les cartons rouges (erreurs, bugs, débranchement...). Attention une contrainte leur est imposée : ils doivent préparer le programme complet, sur table, avant de pouvoir le tester, d'un coup, sur le tapis une fois terminé.

Ainsi, ils sont mis dans les même conditions que les programmeurs/développeurs informatiques. En effet, lorsque l'on créé un programme, il faut en écrire toutes les lignes de codes avant de l'exécuter... et espérer que tout fonctionne ! Sinon, il faut revenir sur ce que l'on a créé et chercher d’où vient l'erreur. Cette contrainte leur permet de se rendre compte de la complexité du travail réalisé sur nos outils connectés.

Classe de CM1 lors du festival Scientilivre, 06/03/2020, Castelnaudary, ©Kimiyo

Bon mais ce n'est pas tout, lorsqu'ils ont réussi à écrire un programme qui fonctionne, une deuxième tâche les attends. Oui comme on le sait, plus un programme sera court, plus il sera exécuté rapidement. Les ordis sont comme nous, vous lirez plus vite un livre de 10 pages qu'un livre de 100 pages. Pour eux c'est pareil. Nos informaticiens en herbe devront donc réécrire un programme sur le même trajet en y insérant une quatrième carte action : la "Boucle". Cette super invention permet aux programmes d'exécuter un nombre de fois donné une même action et ainsi réduire le nombre de lignes de code d'un programme. À eux donc, de l'utiliser à bon escient pour créer un programme, le plus court possible. Une fois cette étape réalisée, la mission 1 est accomplie. La photo de notre chaton a bien été enregistrée et affichée sur l'écran (oui on ne l'oublie pas lui hein, c'est la base de tout!) Et bien entendu, la création de programme n'est plus un secret pour eux.

Enfin presque ! Nos informaticiens ont entre leurs mains le principe de la programmation... Mais pour pouvoir programmer sur ordinateur, il faut parler le même langage qu'eux. Et on le sait, c'est à nous de nous adapter à eux et d'apprendre leur langue : le binaire.  C'est donc le moment de passer à la deuxième étape.

Mission  2 : Du décimal au binaire, et vice-versa.

Activité 2 de l'atelier déconnecté, © Kimiyo

Cette étape, propose au public de s'approprier différentes méthodes qui peuvent exister pour passer d'un système à l'autre de manière assez simple. Leur objectif est donc de s'entrainer à convertir des nombres du système décimal en binaire avec la méthode de leur choix. Je vous propose de découvrir 2 méthodes que nous leur présentons.

Technique n°1 : les bouliers

Activité 2 de l'atelier déconnecté, © Kimiyo

Nous avons fabriqués des bouliers en base 2, afin d'aider nos apprentis informaticiens. Le principe est simple. Il doivent représenter les nombres en système décimal sur le boulier. Puis, ils se retrouvent avec des lignes possédant une bille sur la droite et des lignes sans billes. Enfin, pour trouver la correspondance en binaire, il suffit de lire le boulier, cette fois-ce de haut en bas. Lorsqu'une bille est présente on le lit "1", lorsqu'il n'y a pas de bille on le lit "0". Ainsi chaque nombre en décimal possède un équivalent en binaire, avec une succession de 0 et de 1. Une exemple peut être ? Ca vous aidera à y voir plus clair.

Vous avez ici le nombre 35 représenté sur le boulier (en système binaire puisqu'il n'y a que 2 billes par ligne). Une bille sur la ligne 32, une sur la ligne 2 et une sur la ligne 1, soit 32 + 2 + 1 = 35. Ça va vous suivez ?

Bon ensuite on regarde la partie droite du boulier et on la lit de haut en bas. On ne met pas tous les 0 qu'il y a devant (c'est comme pour notre système décimal, le nombre 35 ne vas pas s'écrire 00035 !) On obtient donc 100011. Voilà, vous avez votre correspondance du nombre 35 depuis le système décimal, en binaire. Et je vous l'assure, chaque nombre n'a qu'une seule possibilité de représentation sur le boulier. Plusieurs ont essayé de me piéger mais ils n'y sont pas parvenus.

Mais cette technique n'est pas la seule que l'on peut utiliser. Je vous propose de découvrir la technique n°2 (ma préférée !).

 

Technique n°2 : Compter en binaire avec ses doigts.

Cette technique est basée sur le même principe que le boulier, sauf que nos doigts remplacent les lignes du boulier. Je laisse ce jeune rockeur blondinet, plein d'entrain et d'énergie vous donner un exemple concret.

Rockeur en concert, © Pixabay

On commence avec la main droite. Le pouce vaut 1, l'index vaut 2, le majeur 4, l'annulaire 8 et l'auriculaire 16 (on multiplie par 2 à chaque, comme pour le boulier !). On va s'arrêter là pour l'instant. Ici, notre ami rockeur a l'auriculaire et l'index levé. Il représente donc le nombre 16 + 2 = 18 en système décimal. Pour trouver la correspondance en binaire, lorsqu'un doit est levé, on le lit 1, lorsqu'il est baissé, on le lit 0. Et là, on lit de gauche à droite. On a donc 10010. Cette succession de 1 et de 0 est la correspondance en binaire du nombre 18.

Allez, un exemple un peu plus complexe ! Un rappeur Français (dont le nom se résume aux trois premières lettre du plus célèbre dictateur romain) marque sa gestuelle d'un signe des mains qui lui est propre. (Si vous ne connaissez pas, ce n'est pas grave...!)

Sans commentaires, © Kimiyo

Par ce geste, il affiche non seulement son nom de scène, mais également, sans le savoir, le nombre 903 pour un informaticien qui s'amuserait à compter avec ses doigts. Si l'on regarde de plus près, les doigts levés sont ceux ayant les valeurs : 512 + 256 + 128 + 4 + 2 + 1 = 903. Aux vues des doigts levés et baissés, nous pouvons en conclure que la correspondance en binaire du nombre 903 est 1110000111. Qui a dit que ce monsieur détruisait la culture ? Grâce à lui vous savez passer d'un système à l'autre uniquement avec vos doigts. Merci Jul. (Oups)

Cette technique vous permet également de compter jusqu'à 31 avec une seule main (ou 1023 avec les deux). Balèze hein !

Cadre "Compter jusqu'à 31 avec ses doigts, © Kimiyo

Bon trêve de plaisanterie revenons à nos moutons. Voici les 2 techniques que nous proposons à nos futurs spécialistes de la programmation afin de convertir les différents cartons qui leur sont proposés. Et voilà, mission accomplie, ce n'était pas si compliqué 😊 Il est temps de passer à la troisième et dernière mission.

 

Mission 3 : Allumer et éteindre des pixels.

🎵🎵Allumer des pixels, Allumer des pixels, et afficher, des dessins à l'écran-an.... 🎵🎵

Activité 3 de l'atelier déconnecté, © Kimiyo

Pour cette troisième mission, nos informaticiens vont devoir décoder des lignes de codes écrites en binaire. Ce faisant, ils sauront quels pixels allumer et quels pixels éteindre afin de faire apparaître des dessins. Pour cela, ils ont à leur disposition des ardoises avec 5 lignes et 6 colonnes de pixels à colorier. Pour s'aider, ils pourront toujours utiliser des bouliers ou leurs doigts. Trois petites choses sont à savoir avant de démarrer.

1) Une ligne de code correspond à une ligne de pixels.

2) Chaque morceau de code correspond à un nombre de pixels allumé ou éteint. On les écrits séparés par un -tiret-, on peut donc les décoder séparément les uns des autres.

3) Lorsqu'un morceau de code commence par un 0, cela signifie que le pixel est éteint. On ne le colorie donc pas. Lorsqu'il n'y a rien devant, cela signifie que le(s) pixel(s) sont allumés, donc, on le colorie.

Pour y voir plus claire on fait une première ligne ensembles.

01 - 100 - 01

- 01. Le 0 devant signifie que les pixels concernés seront éteints (on ne les colorie pas). Et afin de savoir combien de pixels sont concernés on regarde le code derrière. Ici, 1 signifie qu'il n'y a qu'un seul pixel éteint.

- 100. Il n'y a pas de 0 devant, les pixels seront donc allumés. En binaire, 100 correspond au chiffre 4 dans notre système décimal. On aura donc 4 pixels allumés.

- 01. Comme pour le premier, il y aura un pixel éteint.

Cette ligne de code nous donne donc le coloriage suivant :

Allé je vous met un code complet pour aller plus loin, à vous de jouer ! (Réponse à la fin de l'article)

01 - 100 - 01

01 - 1 - 010 - 1 - 01

01 - 100 - 01

01 - 1 - 010 - 1 - 01

10 - 01 - 10 - 01 

Une fois cette technique maîtrisée, les joueurs ont le droit à une petite épreuve bonus pour celles et ceux qui le souhaitent. Des quadrillages vides leurs sont proposés afin qu'il écrivent, en suivant l'alphabet pixelisé ci-dessous, leurs initiales. Puis, leur but est de trouver le code qui permettrait d'allumer leurs initiales. Ainsi, ils peuvent repartir chez eux ce code. Oui, ça ne sert a rien, mais c'est la classe ! D'ailleurs, si ce concept vous inspire, un petit défi arrive sur nos réseaux sociaux Facebook et Twitter !

Notre succession de missions touche à sa fin. Grâce à ces trois étapes nos ex-futurs experts informaticiens ont pu découvrir le principe du fonctionnement d'un programme, apprendre la langue binaire des ordinateurs et s'initier au fonctionnement des pixels (en noir et blanc). Et grâce à cela, l'affichage de notre magnifique chaton sur un écran n'a plus de secret pour eux. Enfin, avec ce qu'ils ont appris durant ces missions, le chaton s'afficherait plutôt comme ca (et encore pas exactement mais si je ne le met qu'en noir et blanc, on ne le voit plus, ce serait dommage!)

Photo de chaton pixelisé, ©Pixabay

Bien entendu il y aurait encore des choses à faire sur ce principe. On pourrait aller encore plus loin pour aborder les couleurs des pixels par exemple... Mais chaque chose en son temps. En attendant, nous sommes entrain de développer des grands panneaux pour chaque missions afin de les rendre complètement autonomes. Cet article sera d'ailleurs mis à jour lorsque les panneaux seront terminés afin de les mettre en téléchargement libre pour que vous puissiez, à votre tour faire découvrir la programmation numérique de manière déconnectée... To be continued 😊

Réponse :

Oui on reste dans le thème et grâce à ce code vous faites apparaître une jolie note de musique 😊