Dessiner des polygones avec le stylo
Créez un compte gratuit pour suivre votre avancement et reprendre où vous avez laissé.
Créer un compteCe tuto fait suite à Bouger un lutin. On y reprend le carré du tuto précédent, mais cette fois le lutin va laisser une trace derrière lui : il dessine vraiment la figure sur la scène. Pour cela, on active l'extension Stylo, puis on découvre une petite formule très puissante qui permet de tracer n'importe quel polygone régulier.
Activer l'extension Stylo
Les blocs Stylo ne sont pas affichés par défaut dans la palette. Il faut les ajouter en activant l'extension correspondante.
- Ouvrir un nouveau projet Scratch et cliquer sur le bouton bleu Ajouter une extension, en bas à gauche de la palette de blocs.
- Choisir Stylo dans la liste qui s'ouvre.
- Une nouvelle catégorie Stylo (vert foncé) apparaît dans la palette, juste sous Variables.
Les principaux blocs de cette catégorie sont :
| effacer tout | Efface tous les traits déjà dessinés sur la scène |
| stylo en position d'écriture | Le lutin commence à laisser une trace dès qu'il bouge |
| relever le stylo | Le lutin se déplace sans laisser de trace |
| mettre la couleur du stylo à … | Choisit la couleur du trait |
| mettre la taille du stylo à … | Choisit l'épaisseur du trait (en pixels) |
Attention
Pour bien démarrer un dessin, commencer presque toujours par deux blocs : effacer tout (pour repartir d'une scène vierge) puis stylo en position d'écriture (pour que les déplacements laissent une trace). Sans le premier, les anciens tracés restent affichés ; sans le second, le lutin bouge mais ne dessine rien.
Reprendre le carré, avec trace
On reprend le programme du carré vu dans le tuto précédent, et on ajoute juste les deux blocs Stylo au début. Le lutin va alors vraiment dessiner les quatre côtés.
Le carré dessiné
À l'exécution, le lutin part du coin inférieur gauche, regarde vers la droite, baisse son stylo et trace les quatre côtés un par un. À la fin, le carré est entièrement dessiné sur la scène.
?
L'idée clé : tourner de $360^{\circ} / N$
Le carré marche très bien… mais pourquoi $90^{\circ}$ ? Et qu'est-ce qui se passerait avec un autre angle ? Il y a derrière ce petit programme une règle générale qui permet de tracer n'importe quel polygone régulier.
Formule du polygone régulier
Pour tracer un polygone régulier à $N$ côtés en Scratch, on répète $N$ fois la séquence :
- avancer de la longueur du côté ;
- tourner de $\dfrac{360^{\circ}}{N}$ vers la droite (ou la gauche).
Pourquoi $360^{\circ} / N$ ? À chaque sommet, le lutin tourne d'un certain angle. Comme il revient à sa position et à sa direction initiales à la fin du tracé, il a effectué un tour complet sur lui-même, soit $360^{\circ}$ au total. Ces $360^{\circ}$ sont répartis à parts égales entre les $N$ sommets : chaque rotation vaut donc $360^{\circ}$ divisé par $N$.
Pour le carré, on retrouve bien $360 \div 4 = 90$, ce qui correspond à la valeur qu'on avait utilisée intuitivement.
Remarque
Cet angle de rotation $\dfrac{360^{\circ}}{N}$ n'est pas l'angle intérieur du polygone (celui qu'on mesure à l'intérieur, entre deux côtés). C'est l'angle extérieur : celui dont le lutin doit pivoter pour aligner sa direction avec le côté suivant. Pour un hexagone, l'angle intérieur vaut $120^{\circ}$, mais le lutin ne tourne que de $60^{\circ}$ à chaque sommet.
Galerie de polygones réguliers
Il suffit maintenant de changer deux nombres (le nombre de répétitions et l'angle) pour passer d'un polygone à un autre. On garde la même longueur de côté ($80$ pas) pour pouvoir comparer les tailles.
Triangle équilatéral
$3$ côtés, donc chaque rotation vaut $360 \div 3 = 120^{\circ}$.
Pentagone régulier
$5$ côtés, donc chaque rotation vaut $360 \div 5 = 72^{\circ}$.
Hexagone régulier
$6$ côtés, donc chaque rotation vaut $360 \div 6 = 60^{\circ}$.
Astuce
Plus $N$ est grand, plus chaque rotation est petite, et plus le polygone ressemble à un cercle. Essayer avec $N = 36$ et un angle de $10^{\circ}$ : le tracé ressemble à un disque parfait. C'est d'ailleurs comme cela que les ordinateurs dessinent les cercles : en assemblant beaucoup de tout petits segments droits.
Couleur et épaisseur du stylo
Deux blocs permettent de personnaliser le trait avant de commencer à dessiner :
| mettre la couleur du stylo à … | Un clic sur la case colorée ouvre une palette : choisir la teinte, la saturation et la luminosité avec des curseurs |
| mettre la taille du stylo à … | Plus la valeur est grande, plus le trait est épais (par défaut $1$) |
Un carré rouge et épais
Remarque
Les blocs mettre la couleur et mettre la taille doivent être placés avant le bloc stylo en position d'écriture, ou au moins avant le premier avancer. Sinon, les premiers traits seront dessinés avec la couleur ou l'épaisseur précédente.
Premier motif : une rosace
On peut maintenant combiner deux idées : dessiner un polygone, puis le redessiner plusieurs fois en pivotant un peu entre chaque tracé. C'est le principe d'une rosace. On va répéter $12$ fois le tracé d'un carré, en tournant le lutin de $30^{\circ}$ entre deux carrés ($30 = 360 \div 12$, pour que les douze carrés se répartissent autour d'un tour complet).
Rosace de 12 carrés
Le programme contient une boucle dans une boucle : la boucle intérieure trace un carré, la boucle extérieure répète ce tracé $12$ fois en pivotant à chaque fois. Le motif final ressemble à une fleur géométrique régulière.
Remarque
Les boucles imbriquées comme celle-ci seront étudiées en détail au cycle 4 (classes de 4e et 3e). Pour l'instant, retenir simplement le principe : la boucle intérieure s'exécute entièrement avant que la boucle extérieure ne passe au tour suivant.
Récapitulatif des blocs Stylo
| Bloc | Effet |
|---|---|
| effacer tout | Efface tous les traits déjà dessinés sur la scène |
| stylo en position d'écriture | Le lutin laisse une trace en se déplaçant |
| relever le stylo | Le lutin se déplace sans laisser de trace |
| mettre la couleur du stylo à … | Fixe la couleur du trait |
| mettre la taille du stylo à … | Fixe l'épaisseur du trait (en pixels) |
À toi de jouer
Modifier le programme du pentagone pour qu'il trace un décagone régulier (polygone à $10$ côtés). On garde une longueur de côté de $80$ pas.
Quelle valeur d'angle faudrait-il utiliser pour un dodécagone (polygone à $12$ côtés) ?
Corrigé
Pour le décagone, on a $N = 10$ côtés, donc l'angle de rotation vaut :
Il suffit donc de remplacer le $5$ par un $10$ dans la boucle, et le $72$ par un $36$ dans la rotation.
Pour le dodécagone à $12$ côtés, on obtient un angle de :
Astuce
Projet tout-en-un — Le fichier ci-dessous regroupe tous les tracés vus dans ce tuto, déclenchables au clavier : carré (touche c), triangle (touche t), pentagone (touche p), hexagone (touche h) et rosace (touche r). Le drapeau vert remet la scène à zéro. Ouvrir le projet dans Scratch avec Fichier > Importer depuis votre ordinateur, puis appuyer sur chaque touche pour comparer les tracés.
?
Remarque
Avec une variable, on pourrait paramétrer ces programmes pour tracer un polygone à $N$ côtés sans réécrire le script à chaque fois : il suffirait de changer la valeur de $N$ une seule fois. Cette technique est étudiée dans le tuto suivant, Variables et compteurs (niveau 4e).