Manipuler l'information

Vous avez certainement au moins une photo stockée dans votre ordinateur : que diriez-vous de chercher une photo de vos dernières vacances ? Cela devrait évoquer de bons souvenirs (j’espère !). À défaut, n’importe quelle photo fera bien sûr l’affaire. Et si vous n’en avez vraiment (vraiment ?) pas, en voici une que vous pouvez télécharger en faisant un clic droit dessus :

Ouvrez l’image (n’importe quel logiciel que vous utilisez pour visionner vos photos devrait convenir) et zoomez dessus autant que vous le pouvez. Voyez-vous de quoi est constituée votre image ?

Sur l’image proposée ci-dessus, en zoomant sur les doigts de la femme, voici ce que j’obtiens :

En restant à ce niveau de zoom, vous pouvez vous balader sur toute l’image et vous rendre compte qu’elle est constituée d’une multitude de petits carrés (ou rectangles) de couleurs différentes : ce sont les pixels.

Et pixel, ça vient de “picture element”, c’est-à-dire littéralement "élément d’image" en français : c’est le plus petit élément constitutif d’une image numérique. Autrement dit, en assemblant correctement des pixels les uns à côté des autres, on obtient une image.

Eh bien cette idée de pouvoir composer des images à partir de pixels, c’est même devenu un véritable art : le pixel art (le successeur numérique de la mosaïque en quelque sorte). S’y initier prend quelques minutes à peine (même si une soudaine vocation pourrait bientôt vous y faire passer toutes vos soirées…) et permet de comprendre deux-trois petites choses sur le codage de l’information. Alors, si l’on passait maintenant à un peu de pratique ? A vous de composer votre propre image en pixel art !

Rendez-vous tout de suite sur http://www.piskelapp.com/ et cliquez simplement sur : 

Vous devriez arriver sur l’interface d’édition de Piskel, un outil en ligne ouvert pour pratiquer le pixel art. Votre premier défi de ce nouveau module Class’Code ? Créer un avatar qui vous représente !

Une fois terminé, cet avatar pourrait par exemple vous servir de photo de profil sur votre compte Class'Code, OpenClassrooms, Scratch… Et même devenir votre propre lutin personnalisé à animer pour remplacer le chat par défaut dans vos prochains programmes Scratch.

L’interface très illustrée de Piskel est assez intuitive, n’hésitez pas à vous lancer par vous-même. Votre seule contrainte pour le moment ? Votre avatar doit mesurer 20x20 pixels et vous ne devez utiliser que 8 couleurs au maximum.

Si vous souhaitez d’abord me voir à l’oeuvre, voici une petite démonstration en vidéo :

Piskel, c’est un outil développé à l’origine par Julian Descottes, un informaticien qui s’ennuyait un soir… Après l’avoir mis en ligne sur Github, l’un de ses amis décide d’y participer. C’est un peu comme vous, sur Scratch, lorsque vous décidez de remixer un projet pour l’améliorer. D’ailleurs au début, Piskel, ça ressemblait à ça, et avec les contributions des personnes qui se sont ajoutées au projet au fur et à mesure, ça donne l’outil que vous venez d’explorer. Pour l’instant, il n’y a pas de traduction en français mais l’interface très intuitive permet aux enfants de l’utiliser facilement malgré tout. Et qui sait, peut-être qu’un jour, certaines personnes voudront contribuer à ajouter d’autres langues à Piskel ?

Votre avatar est prêt ? Sauvegardez-le et utilisez-le dans Scratch !

Retour vers le pixel

Avant de sauvegarder votre image, laissez-moi revenir un instant sur ce qu’est un pixel.

Lorsque vous regardez votre écran d’ordinateur, par exemple maintenant, pendant que vous lisez ce texte, ce sont des pixels que vous voyez : ces pixels sont "allumés" sur votre écran et ils sont d’une certaine couleur (ici certains sont noirs et leur assemblage permet de former des lettres, d’autres sont blancs et constituent le fond qui permet de distinguer ces lettres). Pourtant, ces pixels physiques, qui constituent votre écran et permettent l’affichage de toutes les images, sont bien trop petits pour que vous puissiez les voir individuellement.

En fait, votre écran possède une certaine qualité d’affichage, une résolution plus ou moins élevée : peut-être est-il en 1280x720 pixels ? Ou en 1024x768 pixels ? Cela signifie simplement que votre écran, qui est constitué d’un certain nombre maximal de pixels de largeur (par exemple 1280), et d’un certain nombre maximal de pixels de hauteur (par exemple 768), affiche constamment une image : vous pouvez considérer la totalité de votre écran comme une image. En « groupant » les pixels, votre écran peut afficher une image de plus basse résolution (de moins bonne qualité, puisqu’on réduit le nombre de pixels disponibles). Il ne pourra en revanche pas afficher une image de plus haute résolution dans sa qualité d’origine, faute de pixels physiques (vous ne pouvez pas agrandir physiquement votre écran). C’est un peu comme regarder un film en haute définition sur un vieil écran : votre film n’en sera pas plus beau pour autant… Plus les valeurs de la résolution de votre écran seront élevées, plus vous aurez de pixels sur l’écran, et meilleure sera la définition de l’image affichée par votre écran (elle vous semblera plus nette).

Tout ceci pour dire qu’un pixel, c’est très petit : imaginez les centaines de milliers de pixels qui constituent votre écran !

Aussi, lorsque vous dessiniez votre lutin dans Piskel, chaque carré posé ne correspondait pas à proprement parler à un pixel pour votre ordinateur, mais à un agrandissement qui vous permettait de mieux voir ce que vous dessiniez…

Sauvegardez votre avatar

Passons à présent à la sauvegarde de votre avatar que vous avez créé sur Piskel App.

Tout d’abord, sauvegardez-le sous format .piskel : vous pourrez ainsi le recharger dans Piskel App si vous voulez le modifier, et cela vous permettra aussi d’avoir votre avatar sous un format agréable pour la suite… Pour cela, cliquez sur Save, dans la barre à droite de votre fenêtre.

Vous pouvez renommer votre fichier dans le champ “Title” ; cliquez ensuite sur “Save as .piskel”.

Lorsque vous aurez envie de réutiliser votre image, il suffira simplement de cliquer sur “Import” puis “Browse .piskel files” et enfin d’aller chercher votre image sur votre ordinateur.

Pour enregistrer l’avatar sur votre disque dur, et pouvoir ensuite le réutiliser ailleurs que sur Piskel (sous Scratch tout à l’heure), cliquez sur Export, dans la barre à droite de votre fenêtre.

Piskel vous propose de le sauvegarder de trois manières différentes : en PNG, en ZIP ou en GIF.

• Dans le premier cas, "Download PNG", vous ne téléchargerez qu’UNE seule image au format PNG, et si vous avez fait une animation avec plusieurs images, celles-ci apparaîtront toutes dans le même fichier image les unes à côté des autres :

Vous pouvez aussi bouger le curseur qui permet de modifier l’échelle : si vous le laissez sur "1x", chaque pixel que vous avez dessiné aura la taille d’un "vrai" pixel. Vous comprenez maintenant que votre image devrait donc être très très petite…

• Dans le deuxième cas, "Download ZIP", si vous avez fait une animation, chacune des images composant l’animation sera sauvegardée dans un fichier différent (tous au format PNG), et tous ces fichiers seront compressés dans une archive ZIP : vous n’avez plus qu’à décompresser l’archive (c’est-à-dire extraire tous les fichiers à l’intérieur de l’archive) pour avoir toutes les images de votre animation : mais là, aucun moyen de redimensionner sans passer par l’onglet "Resize" ; vos images devraient donc être très petites.

• Dans le troisième cas, "Download GIF", vous téléchargerez directement l’image animée, au format GIF (oui, oui, comme les GIF amusants que vous trouvez souvent sur le net). Vous pouvez aussi changer la résolution (c’est-à-dire ici le rapport de taille de votre image).

Pour la suite, si vous avez fait une animation, choisissez la troisième option "Download GIF". Sinon, préférez "Download PNG" en mettant l’échelle ("Scale") à 32 par exemple.

Importez votre avatar dans Scratch

Utilisez à présent votre image dans Scratch !

Vous savez déjà comment importer une image dans Scratch : cliquez sur l'icône "Importer le lutin depuis une fichier"…

… et sélectionnez le bon fichier. Notez que si vous avez enregistré votre animation en GIF, Scratch la décompose automatiquement pour que chacune des images constituant votre animation devienne un costume. D’ailleurs, si vous cliquez sur l’onglet "Costumes", vous voyez bien apparaître chacune de vos images.

Vous pouvez aussi voir la taille en pixels de vos costumes :

Vous savez maintenant dessiner facilement tous les lutins que vous désirez avec leurs costumes sur Piskel App et les programmer ensuite dans Scratch si vous le souhaitez !

Alors si vous êtes prêts à passer à la suite, et à entrer un peu plus dans le côté obscur de la programmation, découvrons dans le prochain chapitre avec Scratch ce que signifie "encoder votre avatar"…

• Un pixel est l’unité de base - le plus petit élément - d’une image numérique.

• Votre écran est constitué d’un grand nombre de petits pixels physiques qui permettent d’afficher tout ce que vous voyez à l’écran.

• Le pixel art est l’art de dessiner avec des pixels, ou toute autre unité carrée de base.

• Piskel est un outil en ligne permettant de créer des images et des animations en pixel art.

• Les images créées avec Piskel peuvent être stockées sur votre ordinateur et, par exemple, être ensuite programmées dans Scratch.