Tutoriel – GleamCode : dessiner un drapeau

Mise en place

Pour commencer, il faut dire au logiciel à quel moment le code s’exécute. Pour cela, aller dans la rubrique « contrôles » et faire un glisser-déposer du bloc : « Quand « Œil » est pressé ».

Au cas où, déposer à la suite, toujours dans la rubrique « Actions », le bloc « Éteindre tout ». Ce bloc permettra de relancer le dessin à son début, afin de corriger les éventuelles erreurs.

Ensuite, nous voulons dire deux choses : premièrement, il nous faut définir la première couleur (donc le bleu !). Pour cela, aller dans la rubrique « couleurs » et déposer à la suite du code, collé au bloc précédent, le bloc « mettre la couleur […] pour la LED ».
Ici, cliquer sur le petit carré coloré pour changer la couleur en bleu.

Enfin, nous devrons définir la valeur de x (car x représente une case sur une ligne horizontale, ce qui nous permettra de n’utiliser qu’un bloc plutôt qu’une succession). C’est dans la rubrique « variables » que nous irons chercher le bloc « […] prend la valeur [0] ».
Cliquer sur la petite flèche noire dans le bloc, pour choisir la variable x.

Indiquer dans le petit carré blanc la valeur « 1 » pour x.

Afficher les premières lignes de couleur

Nous allons maintenant afficher les premières lignes colorées.

Pour ce faire, aller dans la rubrique « contrôles », et utiliser le bloc « Répéter 10 fois ». Ce type de bloc est une boucle, il permet de répéter plusieurs fois une action. Remplacer le nombre 10 par 4. Ainsi, tout ce qui sera placé dans ce bloc sera automatiquement répété 4 fois.

Ensuite, aller dans la rubrique « Actions », et mettre à l’intérieur du bloc répéter, le bloc « LigneVerticale ». À sa suite, rubrique « variables », mettre le bloc « ajouter à […] 1 ». Intégrer grâce à la petite flèche noire la valeur x à ce bloc.

Il nous faut ensuite définir à quels points la ligne verticale va commencer. Les 3 ronds blancs de la ligne verticale correspondent à : x (horizontal), y (vertical), et longueur.
Dans le premier rond blanc, mettre la valeur x, que l’on peut trouver dans la rubrique « variables ».
Dans le second rond blanc, inscrire le chiffre « 1 ». Enfin, dans le dernier rond blanc, indiquer la longueur comme étant de « 8 ».
Cliquer sur « Voir mon Gleam », pour vérifier que les 4 premières lignes de couleur bleue apparaissent bien.

Dupliquer

Plutôt que de s’embêter à répéter étape par étape ce que nous venons de faire, nous allons nous simplifier la vie.

Faire un clic droit sur le bloc « mettre la couleur pour la LED » dans la zone de manipulation. Ensuite, faire un clic gauche sur « dupliquer » qui s’affiche dans le menu déroulant.

Placer le code ainsi dupliqué à la suite. Il n’y a plus qu’à modifier la couleur sur blanc, et changer la valeur de x de 1 à « 5 », pour que les lignes verticales futures commencent à la 5^ème case.

Refaire exactement la même procédure pour dupliquer le bloc, et cette fois, remplacer la couleur par du rouge, et la valeur de x par 9.

Résultat attendu :

Une fois cela fait, vous pouvez cliquer sur « Voir mon Gleam ». Et vous voilà avec un beau drapeau Français !
Vous venez de réaliser votre première animation en PixelArt, facile non ?

Pour aller plus loin

Vous pouvez désormais essayer par vous-même de faire différents drapeaux tricolores verticaux. Vous avez en main toutes les connaissances nécessaire pour y arriver !

Pour aller encore un cran plus loin, vous pouvez chercher quelles parties du code il faut modifier pour obtenir un drapeau à bandes horizontales.

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«