Des images et des fantasticodeurs : 2ème partie, le fantôme de pacman en vectoriel

Maintenant que nos fantasticodeurs connaissent la différence entre images bitmaps et vectorielles, ils ont forcément très envie d’en savoir un peu plus sur ces derniers. Qu’à cela ne tienne ! Hop, on installe Inkscape et c’est parti…

Premiers pas avec Inkscape

Je vous le dis tout net, je suis tout sauf une experte d’Inkscape. Mais ça tombe bien, les enfants n’ont pas envie d’un cours. Alors je les laisse jouer avec l’interface. Pas facile, d’ailleurs, l’interface, et pourtant, ils s’y habituent vite, trouvent leurs marques. Rapidement, deux grands types d’artistes se dégagent : il y a les mini-Vasarely qui exploitent les formes géométriques, et les mini-Matisse qui préfèrent dessiner à main levée (à la souris !) :

Une petite discussion s’en suit. Souvent, les images vectorielles sont très typées, avec des formes simples, des aplats. On peut quand même faire des images très fidèles à la réalité (si on maîtrise l’outil), mais le prix à payer est le poids de l’image. Si en bitmap le poids du fichier est lié au nombre de pixels, en vectoriel il découle directement du nombre de lignes de code dans le fichier.

Au boulot : le fantôme de pacman en vectoriel

Pour l’inspiration, je suis allée sur CodePen, et comme toujours j’ai vite trouvé mon bonheur. L’objectif est donc de dessiner le fantôme de pacman, et ensuite de l’animer en css (parce qu’on est des fantasticodeurs, alors on code).

Mais avant d’en arriver là, commençons par dessiner :

• On fait un cercle (en appuyant sur CTRL pour qu’il soit bien rond)
• On fait un rectangle de la même largeur
• On transforme tout ça en chemins (Chemin > Objet en chemin)

Pour “découper” le bas du fantôme, les enfants ont trouvé plusieurs solutions. La mienne :

• je choisis l’éditeur de noeuds dans la barre d’outils, je sélectionne les 2 noeuds du bas du rectangle.
• Ensuite je clique trois fois sur l’icône “+” en haut à gauche pour insérer un noeud.
• Je désélectionne les noeuds, puis j’en sélectionne 1 sur 2 à partir du deuxième, et je les “monte” de quelques pixels. Et voilà une dentelle bien régulière.

• Maintenant, on sélectionne nos deux formes, et on les fusionne (Chemin > Union). L’occasion d’expliquer qu’à partir de formes géométriques simples, on peut en faire d’autres très complexes.

• Il ne reste plus qu’à faire les yeux. 4 cercles, et puis voilà :

• Ok, il a les yeux un peu de guingois. Mais quelques retouches d’alignements (Objet > aligner et distribuer), et c’est réglé.

Et voilà un fantôme tout mignon ! La prochaine fois, on va apprendre à le faire bouger avec du css :-)