Tutoriel – GleamCode : dessiner un smiley

Tracer un cercle

Pour commencer, faire un glisser-déposer du bloc « Quand […] est pressé », trouvable dans la rubrique « contrôles ». Le déposer dans la Zone de manipulation.

Précaution : déposer à sa suite le bloc « éteindre tout » (toujours dans la rubrique). Ce bloc permettra de relancer le dessin à son début, afin de corriger les éventuelles erreurs.

Ensuite, depuis la rubrique « Couleurs », déposer le bloc « Mettre la couleur […] pour la LED ». Choisir une couleur, elle servira au contour du smiley.

Puis, dans la rubrique « Actions », déposer le bloc « Cercle » à la suite.
Dans les 3 cases blanches de ce bloc, inscrire « 8 : 8 : 8 ».
Le premier correspond à la valeur horizontale, le second à la valeur verticale, le dernier au rayon du cercle.

Le dessin doit ressembler pour le moment à ceci :

Remplir le cercle

Vient l’étape plus complexe, le remplissage du cercle. Pour ce faire, nous allons beaucoup parler de variables. Bien suivre les étapes pas à pas !

• Définir la couleur :
  Reposer ici un bloc permettant de définir la couleur, et choisir une couleur différente de celle du cercle.
• Définir les variables
  Toujours à la suite des blocs, depuis la rubrique « Variables », placer trois blocs à la suite « […] prend la valeur 0 ».
  Dans le premier, cliquer sur la petite flèche noire pour indiquer « x » et lui donner la valeur 5
  Dans le second, indiquer « y » et lui donner la valeur 2
  Puis dans le dernier, indiquer « longueur » et lui donner la valeur 8.
• Automatiser les lignes
  Dans la rubrique « contrôles », accoler à la suite le bloc « répéter 10 fois ». Modifier 10 par « 3 ».
  Ensuite, à l’intérieur de ce bloc répéter, mettre les blocs « LigneHoriz » et 3 blocs « ajouter à […] 1 », le premier étant trouvable dans les « actions », le second dans les « variables ».
  Pour remplir le bloc LigneHoriz, toujours dans la rubrique des variables, placer respectivement dans chacune des cases blanches : x, y, et longueur.
  Enfin, pour les 3 blocs « ajouter à […] 1 » qui viennent ensuite, les remplir ainsi :
  ajouter à x -1
  • ajouter à y 1
  • ajouter à longueur 2

À présent, le résultat devrait ressembler à ceci :

Explication du code : à partir du point en x5, y2, tracer 3 lignes. Pour être conforme au décalage, à chaque fois, le tracé va reculer x de 1, abaisser y de 1, et la ligne prend 2 points de plus en longueur.

Nous allons ensuite répéter la même étape pour le bas, puis, pour le centre du cercle.
Pour ne pas recopier le code ligne par ligne, ce qui serait ennuyant, nous allons utiliser la technique de la duplication.
Pour cela, cliquer-droit sur la ligne « x prend la valeur 5 ». Dans le menu déroulant qui s’affiche, cliquer-gauche sur « dupliquer ».
Accolez le code à la suite.
Il nous faut désormais changer les valeurs pour que ça modifie les bons points.

Pour nos trois variables :
• x prend la valeur 3
• y prend la valeur 13
• longueur prend la valeur 12

Pour ce qui est des valeurs à ajouter aux variables (les trois blocs oranges à l’intérieur du bloc jaune « répéter ») :

• ajouter à x 1
• ajouter à y 1
• ajouter à longueur -2.

À ce stade, nous avons ceci :

Courage, encore un dernier effort ! Nous allons maintenant remplir le centre du cercle.
Pour cela, ce sera simple :

À nouveau, dupliquer votre code depuis la ligne « x prend la valeur 3 » et placer le code dupliqué à la suite.

Cette fois, modifier les valeurs des variables comme suit :

• x prend la valeur 2
• y prend la valeur 5
• longueur prend la valeur 14

Il faudra également modifier le nombre de fois qu’il faut répéter l’action : dans le bloc jaune « répéter », remplacer 3 par « 8 ».

Et enfin, à l’intérieur du bloc jaune « répéter », supprimez les lignes « ajouter à x » et « ajoutez à longueur », pour ne conserver que la ligne « ajouter à y 1 ».

Nous obtenons alors ceci :

Le cercle est donc rempli ! Maintenant, il va falloir faire les yeux, et la bouche.

Tracer les yeux

Rassurez-vous, nous en avons fini avec les étapes compliquées pleines de variables, maintenant, place à la simplicité !
Pour faire les yeux, il faut tout d’abord dire de quelle couleur ils seront, dans la rubrique « couleurs », « mettre la couleur […] pour la LED ».

Ensuite, nous allons tracer un joli carré pour chaque œil. Aller cette fois dans la rubrique « Actions » et choisir le bloc « Rectangle ». Écrire 5 en x et en y, et 2 en largeur et en hauteur.

Replacer un second bloc « rectangle », avec les mêmes valeurs, sauf pour x, qui vaut 11.

Tester, nous devrions voir apparaître les yeux.

Tracer le sourire

Finalement, la dernière étape, le sourire !

Toujours dans la rubrique « Actions », déposer un bloc « LigneHoriz » dans lequel entrer les valeurs : « 6 / 12 / 6 ».

Et pour relever ce joli sourire, ajouter pour conclure 2 blocs « Allumer », dans lesquels noter respectivement :
• « 5 / 11 »
• « 12 / 11 ».

Cliquer « Voir mon Gleam ». Attendre un peu que les points s’affichent, cela peut prendre un certain temps. A présent, un smiley sourire s’affiche. Bravo !

Pour aller plus loin

Conseil médiation 

Pour aller plus plus loin sur le sujet, nous vous conseillons de vous référer à la fiche outil « Algorithmes et langages de programmation«