Manipuler l'information

Dans Piskel, vous avez utilisé les outils proposés pour poser manuellement un à un (à peu de choses près) les carrés de base qui composent votre avatar. Ouvrez maintenant Scratch pour écrire un petit programme qui posera pour vous des carrés côte à côte, les uns après les autres, comme ceci :

Première étape : créez une mosaïque unicolore

Par où commencer ? Créez un nouveau projet, et supprimez le lutin de base.

Ajoutez un nouveau lutin en cliquant sur  "Dessiner un nouveau lutin".

Le lutin que vous allez dessiner sera un petit carré, unité de base de votre image, par exemple de 10x10 pixels, de la couleur de votre choix.

Votre premier défi : Une fois votre lutin-carré créé aux bonnes dimensions, débrouillez-vous pour le programmer afin que ce petit carré se déplace et s’estampille lui-même afin de composer une première mosaïque unicolore…

Mais estampiller, qu’est-ce que cela signifie dans Scratch ? Eh bien il existe justement un bloc  estampiller  dans la catégorie Stylo alors testez-le !

Placez votre carré à un endroit précis, estampillez-le et déplacez-le : vous devriez voir la trace de votre carré, comme si vous aviez posé un tampon. Avec un peu de réflexion et quelques essais, vous devriez trouver un algorithme permettant de dessiner une jolie mosaïque simple de la taille que vous souhaitez.

Un petit indice ? Le mieux, c’est quand même de commencer au bon endroit : placez votre lutin au point de départ, faites-le avancer en ajoutant une certaine valeur à x (11 par exemple) et estampillez-le : vous avez posé la deuxième trace de votre carré. Répétez l’opération autant de fois que vous le souhaitez pour faire une première ligne (oui, vous allez en effet devoir utiliser une boucle). Une fois la première ligne de petits carrés estampillée, il va falloir passer à la ligne pour estampiller la deuxième ligne… Et oui, vous allez devoir utiliser une deuxième boucle.

À vous de jouer pour ce premier défi !

Deuxième étape : changez les couleurs de votre mosaïque

Que se passe-t-il si vous modifiez la couleur du costume et que vous estampillez à nouveau ? Les prochaines étapes vont en effet consister à estampiller successivement différents costumes colorés de votre lutin "carré".

Votre deuxième défi : Débrouillez-vous pour que votre petit carré de base estampille à présent les différents costumes de votre lutin "carré", afin de créer une mosaïque un peu plus colorée…

Un petit indice ? Commencez déjà par créer les costumes de votre carré !

Reprenez donc votre algorithme, et insérez le bloc  basculer sur le costume suivant  avant ou après le bloc  estampiller .

Tout fonctionne comme vous voulez ?

Le pas à pas en vidéo

Si besoin, voici une petite vidéo de la façon dont j’ai réalisé mon propre programme :

Votre algo de mosaïque est prêt ? Si vous le souhaitez, retrouvez mon exemple de projet directement sur Scratch.

Et lancez-vous maintenant dans l’encodage de votre avatar !

Vous avez maintenant un petit algorithme qui vous permet de générer automatiquement une mosaïque très, très basique. Que diriez-vous de lui faire redessiner l’avatar que vous avez créé dans le chapitre précédent ? Vous vous souvenez, votre avatar devait faire une taille de 20x20 pixels et utiliser au maximum 8 couleurs : vous allez laborieusement comprendre pourquoi.

Voici une image de mon avatar :

Et donc, ce que mon nouveau programme Scratch devra pouvoir faire :

Le principe, ici, c’est que votre petit carré de base va continuer à s’estampiller, mais au lieu d’estampiller le "costume suivant" dans la liste des costumes, il devra pouvoir choisir le costume adéquat : dans l’exemple ci-dessus, le premier carré doit s’estampiller en gris, le deuxième aussi, le troisième aussi, et ainsi de suite. Au 86ème carré, il s’estampillera en noir. Et ainsi de suite.

Troisième étape : adoptez le bon format

Par où commencer ? Respectons déjà les quelques contraintes posées, et mettons votre mosaïque au bon format.

Votre troisième défi :

• Faites en sorte que votre mosaïque fasse 20 pixels de hauteur sur 20 pixels de largeur ;

• Faites en sorte que votre mosaïque ne soit composée que de huit couleurs.

Un petit indice ? Modifiez les costumes de votre carré de base pour qu’ils correspondent aux couleurs que vous avez utilisées pour votre avatar. N’oubliez pas de leur donner un nom explicite (le nom de la couleur par exemple…).

Le pas à pas en vidéo :

Quatième étape : encodez votre avatar dans une liste

Pour pouvoir estampiller les bonnes couleurs aux bons moments, il faut que votre programme sélectionne le bon costume à estampiller chaque fois que votre lutin « carré » s’est déplacé à un nouvel endroit donné dans l’image.

Aussi, quoi de mieux que de lui fournir une liste avec, dans l’ordre, les bons costumes à estampiller aux bons moments ? Il lui suffira simplement de lire la liste, de prendre les éléments dans l’ordre un par un et de choisir les costumes associés. Eh bien justement, dans Scratch, vous pouvez créer des listes, en allant dans la catégorie "Données" et "Créer une liste".

Vous allez, en somme, stocker chaque couleur de votre avatar dans une liste ordonnée. Autrement dit, lorsque votre programme lit le premier élément de la liste, il estampille le carré à la couleur indiquée, puis passe au deuxième élément de la liste, estampille le carré à la couleur indiquée, et ainsi de suite jusqu’à la fin de la liste…

En fait, vous allez encoder votre image, c’est-à-dire faire correspondre une « vraie » couleur (ici les différents costumes de couleur de votre lutin) avec un mot représentant cette couleur (par exemple "gris", "rouge", "bleu", etc…), et vous allez le faire pour chacun des carrés de votre image. 

Votre avatar fait 20x20 px. Cela signifie qu’en tout, 400 carrés de base composent votre image : votre liste contiendra donc 400 éléments, qui correspondent aux costumes successifs sur lesquels doit basculer votre lutin pour pouvoir redessiner l’image.

Votre quatrième défi : À vous de remplir votre liste avec les bons costumes pour pouvoir recréer l’image à l’étape suivante !

Un petit indice ? Pour cela, utilisez le bloc  ajouter “thing” à image  en remplaçant “thing” par le nom du bon costume (et "image" par le nom de votre liste si vous n'avez pas choisi le même nom que moi bien sûr). Allez-y, testez ! Ensuite, rien ne vous empêche bien sûr, de mettre ce bloc dans une boucle "répéter" et de le répéter autant de fois que nécessaire. Petite astuce : pour compter les carrés d’une même couleur, vous pouvez le faire sous Piskel, en chargeant votre avatar en .piskel : ce sera ainsi beaucoup plus facile de compter !

La pas-à-pas en vidéo :

Cinquième étape : écrivez un algorithme pour sélectionner le bon costume

Vous avez maintenant une liste avec 400 valeurs, correspondant à chacun des pixels de votre avatar. La dernière étape consistera donc à lire ces 400 valeurs, et à associer un costume à chacune de ces valeurs.

Autrement dit, au lieu de faire  basculer sur costume suivant , vous allez devoir sélectionner le bon costume à chaque fois : si l’élément 1 de la liste est égal à "vert", alors le lutin va devoir basculer sur le costume "vert" (oui, vous allez devoir utiliser une instruction conditionnelle) ; si l’élément 1 de la liste est égal à "jaune", alors le lutin doit basculer sur le costume "jaune". Et ainsi de suite pour vos huit couleurs.

Eh bien, petite astuce : plutôt que d’intégrer ces huit conditions dans votre code à la place du bloc "costume suivant", on va créer un nouveau bloc qui va nous permettre d’y voir plus clair.

Dans la catégorie "Ajouter blocs", créez un bloc que vous appellerez "mettre le costume à". Un bloc  définir "mettre le costume à" apparaît alors dans la zone de code. Vous pouvez maintenant définir ce que va faire le bloc mettre le costume à , en ajoutant les blocs nécessaires en dessous.

Votre cinquième défi : Codez sous le bloc  définir "mettre le costume à"  pour pouvoir remplacer le bloc  costume suivant  par le bloc  mettre le costume à . Pour l’instant occupez-vous seulement du premier élément de la liste !

Et si vous testiez ?

Le pas à pas en vidéo :

Sixième étape : parcourez toute la liste

Pour le moment, vous ne lisez que le premier élément de votre liste.

Aussi, il va falloir dupliquer les huit conditions précédentes, et modifier "élément 1" en "élément 2". Vous aurez donc les conditions : "Si l’élément 2 de la liste est égal à "violet", alors basculer sur le costume violet. Si l’élément 2 de la liste est égal à …" et ainsi de suite.

Vous devrez bien sûr faire la même chose pour l’élément 3, en dupliquant les huit conditions associées et en modifiant "élément 2" par "élément 3". Et ainsi de suite pour l’élément 4 de la liste, l’élément 5, etc. jusqu’à l’élément 400 de la liste.

…

Euh vous vous voyez faire 400 copies et changer les valeurs à la main ? Pas moi.

Heureusement, l’informatique permet justement d’automatiser certaines tâches !

Votre dernier défi : Créez un compteur qui parcourt tout seul les 400 éléments de la liste au fur et à mesure que le programme se déroule et qui enregistre à quelle position de la liste on se situe ! Cela devrait vous permettre de faire l’opération "mettre le costume à" automatiquement pour chaque élément de la liste.

Un petit indice ? Créez une variable qui compte où l’on se situe dans la liste, et qui associe l’élément courant de la liste au bon costume du carré.

Le pas à pas en vidéo :

‌Pas trop laborieux ? Voici mon exemple de projet sur Scratch. Si vous n'avez pas réussi du premier coup, pas de panique ! Observez mon programme, et regardez mes pas-à-pas pour comprendre comment je l'ai construit ! Vous pouvez même le remixer. Mais souvenez-vous, là encore, que l’algorithme proposé ici est loin d’être le seul pour parvenir au même résultat…

Ça y est ! Vous avez terminé ! Enfin presque…

Maintenant que vous avez encodé votre avatar et créé l’algorithme qui permet de l’afficher, stockez-le : faites un clic-droit sur votre liste, et cliquez sur "exporter".

Sauvegardez ensuite votre liste dans votre ordinateur. Si vous ouvrez le fichier que vous venez de sauvegarder avec un éditeur de texte, votre liste réapparaît !

En fait, on peut considérer que vous avez maintenant la même image dans deux fichiers différents : sous format PNG (quand vous aviez créé puis exporté votre avatar avec Piskel) ET sous format TXT (la liste que vous avez créée avec Scratch, associée à l’algo qui vous permet de recréer cette image dans Scratch).

Mais, me direz-vous, cette image sous format texte n’est pas vraiment votre image, puisqu’elle a besoin de l’algo dans Scratch pour pouvoir être lue ?

C’est vrai, vous avez raison ; mais lorsque votre image est stockée dans l’ordinateur (physiquement, sur le disque dur), elle l’est sous une forme finalement assez proche. Car oui, l’image, comme n’importe quel autre fichier stocké sur votre ordinateur, est enregistrée sous la forme d’une suite de caractères qui sont ensuite lus et interprétés par la machine (grâce à des programmes).

Pour en être convaincu, je vous propose une dernière petite expérience. Allez sur : http://www.fileformat.info/tool/hexdump.htm

Cliquez sur “Choose file” et sélectionnez votre image en PNG. Puis cliquez sur “Dump”.

Vous devriez alors voir un encodage de votre image très proche de ce que comprend directement votre ordinateur ! Le code que vous voyez correspond bien au contenu de votre fichier, rien d’autre. Dans mon cas, le début de mon image ressemble à ça :

Et si on descendait encore plus bas dans ce que comprend votre machine, savez-vous à quoi ressemblerait votre image ?

Reprenons votre programme comme exemple : fonctionne-t-il comme vous voulez ?

Normalement, chacune des unités de base de votre image devrait s'estampiller au bon endroit et dans la bonne couleur, c'est-à-dire à la position et à la couleur que vous avez indiquées à votre programme.

Eh bien, imaginez que pour votre écran, c’est pareil. Chacun des pixels qui composent votre écran doit "savoir" à tout moment de quelle couleur il doit être pour afficher les choses correctement. Comme dans votre programme, les couleurs sont codées, et vos pixels peuvent prendre la bonne valeur de couleur.

Si l’on remonte plus loin (ou plus bas, plus en profondeur dans la machine), au-delà du codage des couleurs, chacun de vos pixels doit d’abord "savoir" s’il faut qu’il soit allumé ou pas.

Bon, a priori, si vous allumez votre machine, tous les pixels de l’écran doivent s’allumer, sinon ça signifie que vous avez peut-être des pixels morts…

Autrement dit, le coeur de votre machine envoie des informations aux pixels de votre écran. Ceux-ci attendent en premier lieu une information de type binaire : dois-je être "allumé" ou "éteint" ? "0" ou "1" ?

D’ailleurs, sûrement avez-vous déjà entendu dire qu’au stade ultime, la machine ne comprend QUE le langage binaire, ce langage composé uniquement de deux signes : 0 et 1. Ça signifie que, pour pouvoir être stockée dans votre machine, votre image aussi est encodée en langage binaire. Vous ne savez pas vraiment ce que c’est ? Ça tombe bien, c’est ce que vous allez voir dans les chapitres suivants ! Vous prendrez bien un peu de recul ?

• Dans Scratch, le bloc  estampiller  permet de laisser sur la scène la trace du lutin, avec son costume courant, comme une empreinte de tampon.

• Un algorithme possible pour afficher une image pixellisée consiste à faire une première boucle pour afficher une ligne, puis une seconde boucle englobant la première pour passer à la ligne quand la première boucle a terminé ses instructions : on appelle cela des boucles imbriquées.

• Dans Scratch, la catégorie Données permet de créer des listes dans lesquelles on peut ajouter (lister) des éléments pour pouvoir les réutiliser.

• La catégorie Extensions permet de créer de nouveaux blocs dont on peut définir les séries d’instructions associées.

• Les variables peuvent servir à enregistrer des scores, des points, des vies, etc., mais elles peuvent aussi servir à créer un compteur pour parcourir une liste et enregistrer le numéro de la ligne lue par le programme à chaque instant.

• Créer une correspondance entre des données et un code représentant ces données, cela s’appelle encoder (ou plus simplement coder) : ici, vous avez encodé une image (votre avatar) sous la forme d’une liste de mots correspondant aux couleurs successives de chaque pixel composant l’image. Pour cela vous avez utilisé un code pour faire correspondre à chaque couleur « réelle » des costumes du lutin, un mot (le nom de la couleur en français). Mais vous auriez aussi pu choisir le nom des couleurs dans une autre langue, ou encore une série de chiffres, ou n’importe quels symboles…

• Toutes les informations sur un ordinateur sont encodées pour pouvoir être stockées et lues dans un langage qu’il comprend.