Manipuler l'information

Vous l'avez peut-être déjà constaté : dans Scratch, tous les lutins ont un stylo, c'est-à-dire qu'ils peuvent dessiner. Vous trouverez tous les blocs correspondant dans la catégorie "Stylo".

En utilisant le bloc  stylo en position d'écriture , votre lutin dessinera des traits à chacun de ses déplacements.

Le bloc  relever le stylo  permet, lui, d'arrêter de dessiner.

Créez un nouveau projet et prenez cinq minutes pour tester ces blocs, voir comment fonctionne le stylo, puis relevez le premier défi de cette nouvelle partie : votre lutin doit dessiner un carré quand on appuie sur le drapeau vert !

Facile ? Passez au deuxième défi : faites-lui maintenant dessiner un cercle...

Si vous n'avez pas réussi (prenez tout de même le temps de tâtonner, on n’est pas pressé), voici un projet qui vous permettra d'y voir plus clair : cliquez sur chacun des lutins pour voir quelle forme il dessine.

Avez-vous remarqué la différence entre les différents cercles ? Je vous laisse regarder le code pour voir à quoi cela est dû.

En fait, la précision de chacun des cercles est liée à la quantité d’informations qu’on utilise pour dessiner ces cercles. Si vous prenez un compas, ou bien une ficelle et un crayon, c’est très facile de dessiner un beau cercle. Mais puisque votre cercle ne peut s’afficher que sur un quadrillage de pixels, ça devient déjà plus compliqué… Essayez de réaliser le même exercice avec des allumettes par exemple : combien vous faudra-t-il d’allumettes pour faire un cercle qui ressemble vraiment à un cercle ?

D’ailleurs, avez-vous remarqué que les cercles les moins précis sont aussi ceux qui mettent le moins de temps à être dessinés ? Là encore, tout est logique : votre programme met plus de temps à retransmettre de plus grandes quantités d’informations (comme vous mettriez plus de temps à dessiner un beau cercle avec 42 allumettes plutôt que 5).

Un carré, un cercle... pour le moment il s'agit de formes simples. Et si vous faisiez un lutin spirographe ? Passez au troisième défi et prenez à nouveau quelques minutes pour réaliser des rosaces et autres courbes en tous genres : faites preuve de créativité !

Et pour vous aider, vous pouvez vous inspirer de mon propre petit exemple.

Programmez de nouvelles formes et n’hésitez pas à partager vos projets sur ce nouveau studio dédié, cela donnera peut-être des idées à d’autres !

Plus on ajoute d’informations, plus c’est précis (si toutefois l’information ajoutée est utile, mais nous reviendrons plus tard sur ce point).

Votre quatrième défi consiste à afficher toutes les couleurs de Scratch. Vous avez en effet déjà dû remarquer que pour changer les couleurs dans Scratch, à l’aide des blocs de programmation, il fallait leur attribuer une valeur numérique. Et si vous essayiez de faire afficher toutes les couleurs de Scratch à votre lutin, un peu comme ça :

Petit indice si vous êtes bloqués : faites tracer à votre lutin un trait, d’une certaine couleur, changez de couleur en passant à la couleur suivante (c’est-à-dire en ajoutant 1 à la couleur courante), décalez votre trait d’un pixel (dans la direction que vous voulez !) et répétez l’opération en boucle jusqu’à épuisement des couleurs…

Si vous vous mélangez les pinceaux, voici un petit projet exemple.

Évidemment, il n’existe pas qu’une seule manière de faire, loin de là !

Avez-vous fait le tour de toutes les couleurs de Scratch ? Vous vous êtes peut-être rendu compte que dans Scratch, les couleurs sont codées sur une plage de 200 valeurs (et ensuite ça boucle). À chaque valeur numérique correspond une couleur.

D’ailleurs, parvenez-vous à les distinguer à l’œil nu ? Si la couleur change à chaque pixel, vous aurez une impression de continuité dans la gamme des couleurs. Ce serait encore le cas pour un changement tous les deux pixels…

Alors, à partir de combien de pixels pensez-vous pouvoir distinguer les couleurs ?

Florent (oui, l'auteur que vous avez rencontré sur le premier module de Class'Code) répond à cette question pour vous, dans ce projet. Et pour le plaisir, voici un autre petit projet qui mêle cercle et couleurs.

Dessiner en posant des petits carrés de couleurs, ou bien dessiner en traçant des formes géométriques colorées, vous maîtrisez maintenant ! Si, si…

Eh bien, saviez-vous qu’il existe deux types d’images numériques, les images matricielles et les images vectorielles ? Pas de panique ! Les images matricielles, c’est un peu comme vos œuvres en pixel art : ce sont des images composées de plein de petits carrés qui ont chacun leur position bien définie dans l’image et leur couleur.

Les images vectorielles, ce sont des images composées de formes géométriques, un peu comme chacun des algorithmes que vous avez écrits dans ce chapitre et qui permettent de dessiner une forme en particulier. Pour afficher une image vectorielle, le programme exécute les uns après les autres les différentes formes élémentaires à dessiner.

Là encore, mieux vaut un exemple plutôt qu’un long discours : ouvrez un nouveau projet Scratch, et cliquez sur “Choisir un lutin dans la bibliothèque”.

Aviez-vous remarqué que vous pouviez filtrer les lutins par thèmes dans la liste à gauche ?

Vous pouvez aussi les filtrer par type : bitmap ou vecteur (tout en bas de la liste). Cliquez sur “bitmap” et sélectionnez n’importe quel lutin. Refaites la même opération, mais en sélectionnant cette fois-ci “vecteur” et choisissez n’importe quel lutin. Vous devriez donc avoir deux lutins dans votre scène, l’un en bitmap et l’autre en vecteur.

Si je zoome sur le lutin en bitmap, voici ce que j’obtiens :

En revanche, si je zoome sur le lutin en vecteur, j’observerai ceci :

Ces deux images sont en fait codées différemment sur votre ordinateur : lorsque vous zoomez sur le lutin en bitmap, vous voyez les carrés qui apparaissent, agrandis. Le lutin en vecteur, lui, est codé grâce à une liste de formes élémentaires (des lignes, des cercles, etc.). Lorsque vous zoomez dessus, le programme recalcule à chaque instant ces formes élémentaires pour les mettre à l’échelle, et vous avez donc l’impression d’avoir une image nette quel que soit le zoom appliqué.

D’ailleurs, si vous allez à nouveau sur http://www.fileformat.info/tool/hexdump.htm, et que vous chargez les images suivantes (téléchargez-les sur votre ordinateur avec un clic droit dessus), que constatez-vous ? 

• image matricielle

• image vectorielle

Vous pouvez normalement voir qu’elles ne sont pas codées de la même manière. Vous pouvez même essayer d’ouvrir ces deux images avec un éditeur de texte quelconque (par exemple le Bloc-notes sous Windows) : dans le cas de l’image vectorielle, vous devriez voir du code presque “facilement” (hum hum) compréhensible…

… alors que votre éditeur de texte risque de ne même pas pouvoir ouvrir votre image matricielle.

Autre différence : image matricielle (bitmap) et image vectorielle ne pèsent pas le même poids (en octets) pour votre ordinateur : plus votre image en bitmap contiendra de pixels, plus elle sera lourde (et prendra donc de la place sur votre espace de stockage). L’image vectorielle, elle, ne contient que des coordonnées mathématiques, son poids n’augmente pas avec le nombre de pixels mais avec le nombre de coordonnées ou tracés décrivant l’image (et comme vous risquez d’avoir du mal à décrire un paysage réaliste en coordonnées et tracés mathématiques… Une photo sera toujours matricielle !).

Et le poids des fichiers, qu’il s’agisse d’images, de sons, de textes ou tout autre chose, pour votre ordinateur, c’est une question de taille ! Eh oui, vos fichiers sont stockés dans votre machine : un gros fichier prendra plus de place en mémoire qu’un petit fichier… Heureusement, il existe des moyens de gagner de la place. Vous voulez en savoir plus ? Passez à la suite !

• Dans Scratch, tous les lutins possèdent un stylo : la catégorie “Stylo” permet de l’activer ou non, et propose différents blocs permettant de changer les propriétés du stylo.

• Les couleurs dans Scratch sont encodées sur une plage de 200 valeurs : à la valeur “1” correspond une couleur, à la couleur “2” correspond une autre couleur, et ainsi de suite jusqu’à 200. Au-delà (ou en deçà), ça boucle et on revient sur les mêmes couleurs).

• Il existe différents types d’images qui ne sont pas codées de la même manière : les images matricielles et les images vectorielles.

• Le type utilisé pour créer l’image à la base aura un impact sur la manière dont l’ordinateur stocke et lit l’image.