Afficher Turtle

Identification

Infoforall

3 - Séquentialité avec Turtle


Dans cette activité, vous allez apprendre à réaliser de petits dessins en utilisant Python et son module Turtle.

Ce module d'initiation à la programmation se nomme Turtle car on peut utiliser une icône de tortue qui se déplace sur l'écran et qui dessine peu à peu un dessin en exécutant ce qu'on lui demande.

Une rose rouge
Une rose rouge

Cette activité vous permettra de comprendre qu'un programme s'exécute ligne par ligne et qu'on ne passe à la ligne suivante que lorsque la ligne actuelle a été entiérement traitée.

Ce principe se nomme la séquentialité.

Logiciel nécessaire pour l'activité : Python 3 : Thonny, IDLE ou le site repl.it ...

Evaluation

 questions 05-08-13-18

 question 06-14

DM 🏠 : Oui, Pyrates !

Documents de cours PDF : .PDF

Sources latex : .TEX et entete.tex et licence.tex

Résumé : Version HTML ou imprimable ou ou PDF (couleur ou gris)

1 - Voir la séquentialité en mode debug

RAPPELS

(Rappel) 1.1 VARIABLE - Affectation

Affectation

L'affectation est le nom qu'on donne au mécanisme permettant de créer une liaison entre un NOM et un CONTENU MEMOIRE.

une sorte de boite
Image issue de http://hcc-cs.weebly.com/variables.html
L'opérateur d'affectation = en Python
1
a = 10

L'opérateur = permet de créer une variable nommée a et y stocker la valeur 10.

On peut représenter naïvement ce mécanisme comme une boite qui porte un NOM et dans laquelle on place le CONTENU associé.

Boite a contenant 10

Néanmoins, une affectation est simplement un moyen de faire la liaison entre un NOM et un CONTENU en mémoire :

une sorte de liaison
L'opérateur d'affectation dans les algorithmes

Notez bien que c'est le CONTENU 10 qu'on associe au NOM a : on va de la droite vers la gauche. C'est pour cela qu'on écrit plutôt ceci dans les algorithmes :

a  10

Lire une variable

Pour obtenir le contenu d'une variable, il suffit

  • Dans la console interactive : de taper le nom de cette variable .
  • >>> a = 100 >>> a 100
  • Dans un programme : d'utiliser print() sur cette variable .
  • 1 2
    a = 100 print(a)
(Rappel) 1.2 - VARIABLE - Incrémentation

Vocabulaire

Incrémenter veut dire utiliser la valeur actuelle d'une variable pour calculer sa nouvelle valeur.

Incrémenter de 1 en partant de 45 veut dire qu'on passe à 46.

Incrémenter de 2 en partant de 45 veut dire qu'on passe à 47.

Incrémenter de 5 en partant de 45 veut dire qu'on passe à 50.

Incrémenter de -1 en partant de 45 veut dire qu'on passe à 44.

On dit plutôt décrémenter.

Incrémenter (sans autre information donnée) veut dire qu'on incrémenter de +1. il s'agit de la valeur par défaut.

Faire une incrémentation en Python
1 2
a = 10 # après cette ligne, a référence 10 a = a + 1 # après cette ligne, a référence 11

La demande s'effectue bien de la droite vers la gauche :

  1. a = a + 1 : évaluer ce que donne cette valeur + 1 (donc 10+1=11 sur l'exemple)
  2. a = a + 1 : affecter le résultat de cette évaluation à a.
(Rappel) 1.3 FONCTION : notion
ENTREE(S)  ⇒   Fonction   ⇒  SORTIE

Description

Les fonctions sont des instructions particulières qui :

  • reçoivent des données d'entrée et
  • renvoient leur réponse en sortie.

Un exemple avec la fonction VALEUR_ABSOLUE qui n'attend qu'une entrée (un nombre) et qui renvoie la valeur absolue du nombre (le même nombre mais sans son signe).

-12  ⇒   Fonction VALEUR ABSOLUE   ⇒  12

12  ⇒   Fonction VALEUR ABSOLUE   ⇒  12
D'autres exemples
5, 10, 50, 0, 20  ⇒   Fonction MAXIMUM   ⇒  50

5, 10, 50, 0, 20  ⇒   Fonction MINIMUM   ⇒  0

5, 10, 50, 0, 20  ⇒   Fonction SOMME   ⇒  85
(Rappel) 1.4 - FONCTION : native

Une fonction native est une fonction présente de base dans Python.

On en fait l'appel en notant son nom et en fournissant entre parenthèses les entrées séparées par des virgules.

nom_fonction(a, b, c, d...)

Dans le cadre de ce site, les fonctions natives sont toujours écrites en vert.

Fonction VALEUR ABSOLUE : cette fonction se nomme abs() en Python.

>>> abs(-12) 12 >>> abs(12) 12

Fonction MAXIMUM : cette fonction se nomme max() en Python.

>>> max(10, 0, 50, 40) 50

⚙ 01 (exercice)° Ouvrir Thonny. Aller dans le menu Affichage/Views et sélectionner Variables si l’onglet Variables n’est pas ouvert.

Vous devriez constater qu'une nouvelle fenêtre est désormais disponible dans la partie droite de Thonny :

Thonny
Ecran de Thonny

Dans la zone Console (celle avec 3 chevrons >>>), tapez les instructions (en jaune).

>>> 50 + 2 ? >>> a = 50 ? >>> b = 20 ?

Question

Décrire les effets visibles dans la console ou dans l'onglet Variables.

...CORRECTION...

>>> 50 + 2 52 Python évalue l'expression 50 + 2 à 52 et affiche ce 52 dans la console puisqu'on n'en fait rien. >>> a = 50 (Droite) Python évalue 50 (puis Gauche) Affectation : la variable a référence 50 (sans affichage car ce 50 est dirigé vers a) >>> b = 20 (Droite) Python évalue 20 (puis Gauche) Affectation : la variable b référence 20 (sans affichage car ce 20 est dirigé vers b)

⚙ 02-A (exercice)° A votre avis, que va-t-on maintenant voir dans la console si on tape ceci :

>>> a + b Effet ?

...CORRECTION...

Affichage car on ne stocke pas le résultat.

>>> a + b 70 (Droite) Python évalue a+b à 70 (puis Gauche) Affectation : la variable c référence ce 70 (sans affichage car ce 70 est dirigé vers c)

⚙ 02-B (exercice)° A votre avis, que va-t-on maintenant voir dans la console ou l'onglet Variables si on tape ceci :

>>> c = a + b Effet ?

...CORRECTION...

Aucun affichage puisqu'on stocke le résultat.

>>> c = a + b (Droite) Python évalue a+b à 70 (puis Gauche) Affectation : la variable c référence 70 (sans affichage car ce 70 est dirigé vers c)

⚙ 02-C (exercice)° A votre avis, que va-t-on maintenant voir dans la console si on tape ceci :

>>> c = c + b Effet ?

...CORRECTION...

Aucun affichage puisqu'on stocke le résultat.

>>> c = c + b (Droite) Python évalue c+b à 90 (puis Gauche) Affectation : la variable c référence ce 90 (sans affichage car ce 90 est dirigé vers c)

⚙ 02-D (exercice)° A votre avis, comment sera évaluée cette expression comportant un appel de fonction ? Vérifiez ensuite votre réponse.

>>> 10 * max(5, 2, 3, 6, 1)

...CORRECTION...

L'interpréteur commencer par évaluer 10 à ... 10.

L'interpréteur va ensuite évaluer max(5, 2, 3, 6, 1) à 6.

Enfin, il multiplie cela 10 par 6 et évalue l'expression à 60.

On va donc obtenir 60.

Comme on ne fait rien de ce résultat, la console l'affiche

>>> 10 * max(5, 2, 3, 6, 1) 60
1.5 Séquentialité sur une ligne

Lorsque Python doit exécuter un programme de plusieurs lignes, il opère étape par étape en respectant ses règles de priorité.

Rien n'est dû au hasard.

Ainsi dans le cadre d'une affectation, Python évalue le terme de droite puis réalisation l'affectation à gauche.

Lorsqu'il évalue, il respecte les règles habituelles (parenthèses, puissance, multiplication, addition).

✔ 03 (action)° Utiliser l'animation suivante pour être certain de bien visualiser le déroulement progressif que nous voulons observer aujourd'hui.

1 2 3
a = 200 b = a * 2 fin du programme

CLIQUEZ ICI POUR VOIR LE DEROULEMENT :

Comme on peut le voir, le programme se déroule séquentiellement : une ligne à la fois, en partant de la ligne du haut et en se dirigeant vers le bas. L'ordinateur va donc évaluer et exécuter une ligne à la fois.

1.6 Séquentialité sur un programme

Lorsque Python doit exécuter une ligne, il opère étape par étape en commençant par la ligne 1.

Une fois que celle-ci est exécutée, il passe à la 2, puis la 3...

Certains mots-clé comme for, while, if ou les fonctions peuvent bien entendu casser cette simple succession en créant d'autres branchements.

⚙ 04-A (exercice)° Réfléchir à ce que va faire le programme ci-dessous, pas à pas.

1 2 3 4
a = 20 b = 10 c = a * b print(c)

Une fois que vous avez votre réponse, utiliser FILE - SAVE AS ou FICHIER - ENREGISTRER SOUS pour enregistrer le fichier dans un dossier que vous parviendrez à retrouver facilement. Le mieux est donc d'ouvrir votre dossier personnel sur le réseau, d'y créer un repertoire NSI, puis un répertoire PYTHON3 et de sauvegarder votre programme dans ce sous-répertoire. Lancez avec la flèche verte pour voir si vous aviez bon.

...CORRECTION...

Ligne 1, a référence 20.

Ligne 2, b référence 10.

Ligne 3, on évalue 20 * 10, soit 200 puis c référence 200.

Ligne 4, on demande l'affichage de c dans la console. On observe donc 200.

NOUVEAUTES : Mode debug de Thonny :

1.7 Mode DEBUG de Thonny

On peut demander à Thonny d'exécuter un programme ligne par ligne.

  1. Pour lancer le programme en mode DEBUG : appuyez sur le petit insecte (bug), celui à droite de la flèche verte.
  2. L'interpréteur va alors surligner en jaune la prochaine ligne qu'il désire exécuter.
  3. Pour donner l'autorisation d'exécuter la ligne surlignée : appuyez sur le bouton à droite de l'insecte.

A vous de valider progressivement les lignes de façon à tracer la forme en visualisant bien que Python les exécute une à une dans l'ordre prédéfini.

Exemple avec un programme linéaire

Voici le programme avant d'appuyer sur quoi que ce soit :

Debug Thonny

Après avoir appuyé sur DEBUG, Thonny attend qu'on lui donne l'autorisation d'exécuter la première ligne en appuyant sur la touche à droite de DEBUG :

Debug Thonny

Après avoir autorisé la ligne, on voit que la variable a a été créée. Thonny attend maintenant l'autorisation d'effectuer la ligne 2 :

Debug Thonny
Ecran de Thonny

✔ 04-B (action)° Activer le mode DEBUG pour parvenir à exécuter le programme ligne par ligne.

1 2 3 4
a = 20 b = 10 c = a * b print(c)

⚙ ✌ 05 (appel)° Réfléchir à ce que va faire le programme ci-dessous, pas à pas. Activer ensuite le mode DEBUG pour parvenir à exécuter le programme ligne par ligne. Que vaut c à la fin ? La ligne 4 a-t-elle une influence sur le calcul de la ligne 3 ?

1 2 3 4 5
a = 5 b = 10 c = a + b b = 100 print(c)

 : faire appel à l'enseignant pour qu'il vérifie que vous parvenez bien à manipuler le mode DEBUG.

...CORRECTION...

Ligne 1, a référence 5.

Ligne 2, b référence 10.

Ligne 3, on évalue 5 + 10, soit 15 puis c référence 15.

Ligne 2, b référence 100 maintenant mais cela ne va pas reprovoquer le calcul de la ligne 3 : c référence toujours 15 !

Ligne 4, on demande l'affichage de c dans la console. On observe donc 15.

2 - Module Turtle : mouvements relatifs

Vous allez maintenant expérimenter la séquentialité en dessinant, en expliquant à la machine ce qu'elle doit faire, étape par étape, instruction par instruction.

✔ 06-A (action)° Utiliser le programme suivant pour visualiser ses effets : on crée une fenêtre permettant de dessiner.

1 2
import turtle as trt crayon = trt.Turtle()

Encart d'instructions n°1

1
import turtle as trt

✱ On demande d'importer dans l'interpréteur les instructions permettant de dessiner.

✱ On voit que trt est apparu dans la zone des variables : nous allons maintenant avoir le droit d'utiliser le module turtle.

Encart d'instructions n°2

1 2
import turtle as trt crayon = trt.Turtle()

Notez bien la présence d'un T majuscule et d'un t minuscule, ainsi que de parenthèses ().

✱ On crée une variable crayon à partir du module Turtle. Cette variable contient la référence-mémoire du crayon et elle nous permettra d'agir sur ce crayon.

✱ Visuellement, cela ouvre une fenêtre graphique et y place une flèche orientée vers la droite : la flèche symbolise le crayon.

⚙ 06-B (exercice)° Utiliser ce nouveau programme qui présente 3 instructions 

1 2 3 4 5 6
import turtle as trt crayon = trt.Turtle() crayon.speed(1) crayon.forward(300) crayon.backward(300)

Encart d'instructions n°3

-
crayon.speed(1)

✱ On agit sur crayon en modifiant sa vitesse d'exécution : 1(lent) à 9(rapide). 0 veut dire instantanné.

✱ Visuellement : rien, le crayon ne bouge pas, on ne fait que modifier ses caractéristiques.

Encart d'instructions n°4 (déplacement relatif)

Relatif veut dire "relatif à la position actuelle de la tortue". Comme lorsqu'on vous dit d'avancer de 3m puis de reculer de 2m. Votre position finale dépend de la postion où vous étiez initialement.

-
crayon.forward(300)

✱ Visuellement :

  • la flèche avance de 300 pixels dans le sens indiqué par la tortue et trace un trait noir.
-
crayon.backward(300)

✱ Visuellement :

  • la flèche recule de 300 pixels dans le sens indiqué par la tortue et trace un trait noir (mais ici, on ne fait que repasser au dessus du trait précédent).
  • On remarquera que l'orientation de la tortue ne change pas : elle regarde toujours à droite mais recule, elle ne se retourne pas.

Question

Pourquoi la tortue avance-t-elle avant de reculer, et pas l'inverse ?

...CORRECTION...

Simplement car on avance sur la ligne 5 et que le recul se fait sur la ligne suivante. Séquentialité : Python réalise les actions dans l'ordre qu'on lui a fournit.

⚙ 06-C (exercice)° Utiliser ce nouveau programme qui présente les changements de couleurs 

1 2 3 4 5 6 7 8 9 10 11 12
import turtle as trt crayon = trt.Turtle() crayon.speed(1) crayon.forward(300) crayon.pencolor("red") crayon.backward(300) crayon.pencolor("blue") crayon.forward(150) crayon.backward(400)

Encart d'instructions n°5

Notez bien qu'on utilise "red" et pas juste red. On doit fournir une chaîne de caractères.

-
crayon.pencolor("red")

✱ On change la couleur du crayon. Attention, la modification aura lieu sur toutes les lignes suivantes, sauf si une autre modification de couleur apparaît plus tard.

✱ La couleur de départ est le noir.

Questions

  1. Un changement de couleur peut-il avoir un effet sur les traits déjà réalisés antérieurement ?
  2. Pourquoi le premier trait est-il noir ?
  3. Pourquoi le trait demandé en ligne 8 est-il rouge ?
  4. Pourquoi les deux derniers traits L11-L12 sont-ils bleus ?

...CORRECTION...

  1. Tout est lié à la séquentialité : le changement de couleur ne s'applique que sur les lignes suivantes, le changement ne peut pas avoir d'effet sur une action déjà réalisée
  2. 1 2 3 4 5 6 7 8 9 10 11 12
    import turtle as trt crayon = trt.Turtle() # couleur par défaut : noir crayon.speed(1) # | noir # | noir crayon.forward(300) # | noir # | noir crayon.pencolor("red") # changement de couleur : rouge crayon.backward(300) # | rouge # | rouge crayon.pencolor("blue") # changement de couleur : bleu crayon.forward(150) # | bleu crayon.backward(400) # | bleu
  3. Aucun changement de couleur demandé sur les lignes 1 à 4 avant de tracer en ligne 5 : le trait est donc noir.
  4. On modifie la couleur du crayon en rouge sur la ligne 7. Les lignes suivantes vont donc tracer en rouge, notamment en ligne 8.
  5. On modifie à nouveau la couleur en ligne 10. Les lignes suivantes appliquent donc cette couleur puisqu'aucune autre modification n'intervient avant les lignes 11-12.

⚙ 06-D (exercice)° Utiliser ce nouveau programme qui présente maintenant les changements relatifs de direction. Nous allons tracer un 5 en utilisant :

  1. left() qui permet de tourner d'un certain nombre de degrés vers la gauche, par rapport à la direction vers laquelle pointe la tortue à ce moment;
  2. right() qui permet de tourner d'un certain nombre de degrés vers la droite, par rapport à la direction vers laquelle pointe la tortue à ce moment.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
import turtle as trt crayon = trt.Turtle() crayon.speed(1) crayon.forward(100) crayon.left(90) crayon.forward(100) crayon.left(90) crayon.forward(100) crayon.right(90) crayon.forward(100) crayon.right(90) crayon.forward(100)

Encart d'instructions n°6 (orientation relative)

On rappelle que  :

  • 90° correspond à un angle droit;
  • 180° correspond à un demi-tour;
  • 360° correspond à un tour complet : on ne change donc pas d'orientation !
-
crayon.left(90)

✱ On tourne sur place, vers la gauche de 90° par rapport à la direction vers laquelle la tortue est positionnée actuellement.

-
crayon.right(90)

✱ On tourne, sur place, vers la droite de 90° par rapport à la direction vers laquelle la tortue est positionnée actuellement.

Pour information, voici une visualisation de différents angles :

Exemples d'orientation
Différentes valeurs d'angles

Question

En prenant l'axe horizontal vers la droite comme axe de référence des angles et en considèrant qu'un angle positif correspond à une rotation anti-horaire, donnez l'angle qui est pointé par la tortue après exécution de chaque ligne de la ligne 2 à la ligne 17.

...CORRECTION...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
import turtle as trt crayon = trt.Turtle() # Pointe 0° crayon.speed(1) # ... inchangé # ... inchangé crayon.forward(100) # ... inchangé # ... inchangé crayon.left(90) # Pointe 90° crayon.forward(100) # ... inchangé # ... inchangé crayon.left(90) # Pointe 180° crayon.forward(100) # ... inchangé # ... inchangé crayon.right(90) # Pointe 90° crayon.forward(100) # ... inchangé # ... inchangé crayon.right(90) # Pointe 0° crayon.forward(100) # ... inchangé

✎ 06-E (rédaction)° Lancer ce programme qui dessine des carrés en effectuant 4 fois une même séquence : avancer puis tourner de 90°.

On notera que tourner 4 fois de 90° donne au total un angle de 360°.

1 2 3 4 5 6 7 8 9 10 11 12 13
import turtle as trt crayon = trt.Turtle() crayon.speed(1) for _ in range(4): crayon.left(90) crayon.forward(100) crayon.forward(150) for _ in range(4): crayon.left(90) crayon.forward(100)

Questions

  1. Quelles sont les lignes qui permettent de créer le premier carré ?
  2. Quelles sont les lignes qui permettent de créer le deuxième carré ?
  3. Donner le déroulé du programme en fournissant les lignes qui va suivre l'interpréteur Python.

...CORRECTION...

  1. Premier carré : boucle des lignes 5-6-7.
  2. Deuxième carré : boucle des lignes 11-12-13.
  3. L01-L02-L03
    L05-L06-L07 - L05-L06-L07 - L05-L06-L07 - L05-L06-L07
    L09
    L11-L12-L13 - L11-L12-L13 - L11-L12-L13 - L11-L12-L13

⚙ 06-F (exercice)° Lancer ce programme qui dessine toujours des carrés, mais cette fois ils ont un fond coloré.

Encart d'instructions n°7

La gestion d'un fond coloré se fait en 3 temps :

  • On doit avoir défini la couleur du coloriage avec fillcolor();
  • On déclare quand commence la forme à colorier avec begin_fill();
  • On déclare que la forme est finie et qu'on veut que le coloriage de la forme commence avec end_fill().

On a donc souvent un structure de ce type :

- - - - - -
... crayon.fillcolor("yellow") ... crayon.begin_fill() # ici on dessine une forme crayon.end_fill()

Bien entendu, rien n'oblige à définir à chaque fois la couleur de remplissage : on peut garder la même pour plusieurs formes.

Voici le nouveau programme :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
import turtle as trt crayon = trt.Turtle() crayon.speed(1) crayon.fillcolor("yellow") crayon.begin_fill() for _ in range(4): crayon.left(90) crayon.forward(100) crayon.end_fill() crayon.forward(150) crayon.fillcolor("orange") crayon.begin_fill() for _ in range(4): crayon.left(90) crayon.forward(100) crayon.end_fill()

Questions

  1. Sur quelle ligne dit-on de surveiller une première forme ?
  2. Sur quelle ligne dit-on qu'on a fini de dessiner cette forme et qu'on peut lancer son coloriage ?
  3. Pourquoi la seconde forme est-elle en orange, et pas en jaune.

...CORRECTION...

  1. Il s'agit de la ligne 6 avec son begin_fill().
  2. Il s'agit de la ligne 10 avec son end_fill()
  3. La seconde forme est en orange car on change la couleur de fond choisie en ligne 14, avant de lancer end_fill() en ligne 19.

Mise en application des connaissances :

✔ 07-A (action) ° Copier-coller le programme suivant dans la zone de programmation de Thonny.

Enregistrer le fichier sous le nom acti_turtle.py dans un dossier NSI de votre dossier personnel. Lancer.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
import turtle as trt crayon = trt.Turtle() crayon.pencolor("red") crayon.forward(200) crayon.right(90) crayon.pencolor("blue") crayon.forward(200) crayon.right(90) crayon.pencolor("red") crayon.forward(200) crayon.right(90) crayon.pencolor("blue") crayon.forward(200) crayon.right(90)

Vous devriez voir apparaître ceci :

⚙ 7-B (exercice)° Modifier le programme pour tracer un rectangle vert :

...CORRECTION...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
import turtle as trt crayon = trt.Turtle() crayon.pencolor("green") crayon.forward(100) crayon.right(90) crayon.forward(200) crayon.right(90) crayon.forward(100) crayon.right(90) crayon.forward(200) crayon.right(90)

⚙ 7-C (exercice)° Modifier encore le programme : le rectangle devra avoir un fond jaune.

...CORRECTION...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
import turtle as trt crayon = trt.Turtle() crayon.fillcolor("yellow") crayon.pencolor("green") crayon.begin_fill() crayon.forward(100) crayon.right(90) crayon.forward(200) crayon.right(90) crayon.forward(100) crayon.right(90) crayon.forward(200) crayon.right(90) crayon.end_fill()

✔ 7-D (action)° Nous allons demander à l'interpréteur de l'exécuter ligne par ligne.

  1. Pour lancer le programme en mode DEBUG : appuyez sur le petit insecte (bug), celui à droite de la flèche verte.
  2. L'interpréteur va alors surligner en jaune la prochaine ligne qu'il désire exécuter.
  3. Pour donner l'autorisation d'exécuter la ligne surlignée : appuyez sur le bouton à droite de l'insecte.
  4. Diminuer la taille de l'écran de Thonny pour avoir en même temps à l'affichage Thonny et Turtle.

A vous de valider progressivement les lignes de façon à tracer la forme en visualisant bien que Python les exécute une à une dans l'ordre prédéfini.

⚙ ✌ 08° Réaliser un programme (sans boucle) qui trace un carré de 200 pixels de côté.

Les couleurs des côtés devront être "red", "pink", "blue" et "orange".

Les traits devront avoir une épaisseur de 10 pixels.

Le fond devra être "cyan".

Visuel voulu
Le visuel désiré

Pour vous aider, voici une documentation sur pensize() :

Encart d'instructions n°8

On utilise pensize() en lui fournissant un entier correspondant à la taille en pixel du trait.

1 2 3 4 5 6 7 8 9 10 11
import turtle as trt crayon = trt.Turtle() crayon.pensize(5) crayon.forward(50) crayon.pensize(10) crayon.forward(50) crayon.pensize(15) crayon.forward(50)
Changement de taille
Changer la taille du trait
Juste un mot sur ... fonction et méthode

Avec l'apparition des parenthèses entre lesquelles on transmet (ou pas) des données, on voit que forward(), pencolor() ou encore penup() sont des fonctions mais dont la syntaxe d'utilisation est un peu étrange.

Ces fonctions particulières qui agissent sur l'objet placé devant elles se nomment des méthodes.

Quelle est cette syntaxe ? On donne le nom d'un objet sur lequel agir, on place un point et on donne ensuite le nom de la méthode et les données sur lesquelles la méthode devra travailler :

objet.methode(données)

>>> crayon.forward(200)

Traduction : va chercher le crayon, et fait le avancer de 200.

3 - Pour aller plus loin avec Turtle

Dans cette partie, vous allez maintenant avoir de la documentation à exploiter pour parvenir à réaliser certains dessins.

3.1 - Turtle : afficher du texte avec write()

Ouverture d'un écran Turtle et d'un crayon

Pour importer les fonctions du module Turtle, il suffit de taper ceci :

1 2
import turtle as trt crayon = trt.Turtle()
Ecriture avec write()

On peut écrire à l'endroit où se trouve la tortue en tapant write("bonjour").

Le texte à afficher doit être transmis sous forme de string.

-
crayon.write("bonjour")

Mais on peut faire mieux : on peut écrire avec une taille de police plus grande par exemple.

-
crayon.write("bonjour", font=('Arial', 28, 'normal'))

⚙ 09° Utiliser une boucle associée à write() pour parvenir à obtenir ceci :

Axe horizontal
Visuel voulu

...CORRECTION...

1 2 3 4 5 6 7
import turtle as trt crayon = trt.Turtle() crayon.pencolor("blue") for k in range(5): crayon.write(k) crayon.forward(50)
3.2 - Turtle : déplacement absolu avec goto()

Système d'axes choisi pour Turtle

Le module utilise le système cartésien habituel.

  • Le point (0,0) est au centre de l'écran.
  • L'axe Ox est l'axe des abscisses, vers la droite.
  • L'axe Oy est l'axe des ordonnées, vers le haut.
Système d'axes dans Turtle
Les axes dans Turtle
Déplacement avec goto()

On peut déplacer le curseur à l'écran et utilisant goto(x,y).

1 2 3 4 5
import turtle as trt crayon = trt.Turtle() crayon.goto(0, 100) crayon.write("y > 0")

En utilisant la ligne 4, on part en (x=0, y=100).

✔ 10 ° Utiliser le programme ci-dessous qui montre comment utiliser goto() qui permet de déplacer le crayon en fournissant les coordonnées x et y à atteindre.

Voici le visuel que provoquera ce nouveau programme :

Système d'axes xy de Turtle
Système d'axes xy de Turtle
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
import turtle as trt crayon = trt.Turtle() crayon.goto(0, 0) crayon.write("x = 0, y = 0") crayon.goto(250, 0) crayon.write("x = 250, y = 0") crayon.goto(250, 250) crayon.write("x = 250, y = 250") crayon.goto(-250, 250) crayon.write("x = -250, y = 250") crayon.goto(-250, -250) crayon.write("x = -250, y = -250") crayon.goto(0, -50) crayon.write("x = 0, y = -50")

⚙ 11° Tracer un triangle isocèle dont les coordonnées sont les suivantes :

  • x = 0, y = 0
  • x = 200, y = 0
  • x = 100, y = 50
Triangle isocèle
Triangle isocèle

...CORRECTION...

1 2 3 4 5 6
import turtle as trt crayon = trt.Turtle() crayon.goto(200, 0) crayon.goto(100, 50) crayon.goto(0, 0)
3.3 - Turtle : placer des points avec dot()

Créer un point avec dot()

On peut dessiner un point de taille variable en tapant ceci :

1 2 3 4
import turtle as trt crayon = trt.Turtle() crayon.dot(200)

La valeur transmise correspond au diamètre du point en pixels (ici le diamètre est de 200 pixels, et donc le rayon de 100).

La position courante (x,y) du crayon correspond au centre du point.

⚙ 12 (exercice)° Utiliser maintenant ce programme qui vous permettra d'obtenir le début de l'image voulue :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
import turtle as trt fenetre = trt.Screen() fenetre.bgcolor("black") crayon = trt.Turtle() crayon.goto(-100, -50) # on part en x=-100 et y=-50 crayon.pencolor("red") crayon.dot(50) crayon.goto(-50, 0) # on part en x=-50 et y=0 crayon.pencolor("yellow") crayon.dot(25) crayon.goto(0, 50) # on part en x=0 et y=50 crayon.pencolor("green") crayon.dot(50)

Voilà le résulat que vous devriez avoir :

points et couleurs 2

Questions

  1. Où demande-t-on d'obtenir un fond noir ?
  2. De quelle valeur varie x entre chaque demande d'affichage ?
  3. De quelle valeur varie y entre chaque demande d'affichage ?

...CORRECTION...

Le fond est obtenu en utilisant la ligne 3 (où on crée l'objet-fenêtre) et la ligne 4 où on utilise bgcolor(), le bg voulant bien entendu signifié background.

3 4
fenetre = trt.Screen() fenetre.bgcolor("black")

Pour x et y, on peut constater qu'on les augmente l'un et l'autre de 50 à chaque fois.

  • x passe de -100 à -50 puis 0.
  • y passe de -50 à 0 puis 50.

⚙ ✌ 13° Compléter le programme pour qu'il affiche ceci (texte y compris) puis faire appel à l'enseignant pour validation :

Final

Reste les traits résiduels, pas terrible.

Voyons comment gérer cela en demandant à l'interpréteur de ne pas nécessairement tracer un trait lorsqu'il déplace le crayon.

3.4 - Lever et abaisser le stylo avec penup() et pendown()

Lever le stylo avec penup()

Lorsqu'on veut déplacer le crayon sans avoir le trace du stylo, il faut "lever" le stylo avec la fonction penup(), sans argument.

1 2 3 4 5 6 7 8 9 10 11 12
import turtle as trt crayon = trt.Turtle() crayon.goto(0, 0) crayon.pencolor("blue") crayon.dot(50) # on dessine le point bleu en (0, 0) crayon.goto(100, 0) # vers (100, 0) pointe baissée donc trait crayon.penup() # on lève la pointe à partir de cette ligne crayon.goto(200,0) # et ce déplacement ne provoque donc pas de trait
penup

Plus de trait sur les lignes qui suivent la ligne 8.

Abaisser le stylo avec pendown()

Pour réactiver la fonction traçage, il suffit de placer pendown(). Sur les lignes qui suivront, les traits vont réapparaitre lors des déplacements.

A titre d'exemple, voici comment faire des pointillés.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import turtle as trt crayon = trt.Turtle() crayon.goto(50, 0) crayon.penup() crayon.goto(100, 0) crayon.pendown() crayon.goto(150, 0) crayon.penup() crayon.goto(200, 0) crayon.pendown() crayon.goto(200, 0)
pendown

On voit donc qu'on trace des traits lignes 4, 10, 16 mais pas sur les lignes 7 et 13.

⚙ ✎ 14° Compléter maintenant le programme pour qu'il affiche ceci (c'est à dire sans trait entre les points) :

Final sans trait

Il reste encore une fois importante à voir : la gestion des couleurs, avec la définition RGB des couleurs : Red Green Blue.

3.5 - Turtle : changer de couleur avec pencolor()

Modifier la couleur avec pencolor()

Voici un exemple d'affichage et le code correspondant :

points et couleurs
1 2 3 4 5 6
import turtle as trt crayon = trt.Turtle() crayon.pencolor("red") crayon.dot(200) crayon.pencolor("magenta") crayon.dot(100)

On choisit d'abord la couleur rouge et on trace un point de 200 pixels.

On choisit ensuite la couleur magenta et on trace un point plus petit.

On peut demander des couleurs prédéfinies en utilisant leurs noms en anglais ("red", "yellow"...) mais parfois on veut un réglage plus fin. Comment faire ?

Couleurs RGB

Dans la partie Photographie Numérique, nous verrons précisement comment fonctionne les couleurs RGB.

RGB veut dire Red Green Blue : on fournit l'intensité rouge, l'intensité verte et l'intensité bleue émises. Notre oeil reçoit les 3 radiations et notre cerveau perçoit alors une couleur particulière.

On peut donner ces intensités lumineuses en utilisant une notation dite hexadécimale dont voici le résumé :

  • Aucune intensité se dit 00.
  • Des intensités de plus en plus intenses sont 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE.
  • L'intensité maximale (à "fond") se note FF.

Il suffit de fournir un string commençant par # (ALT-GR et 3) suivi par la valeur de rouge/red (R), de vert/green (G) et de bleu/blue (B).

Quelques exemples

    Les 3 couleurs de base :

  • "red" ou "#FF0000" code le rouge   (uniquement le rouge à fond).
  • "green" ou "#00FF00" code le vert   (uniquement le vert à fond).
  • "blue" ou "#0000FF" code le vert   (uniquement le bleu à fond).
  • Les 3 compositions :

  • "yellow" ou "#FFFF00" code le jaune   (rouge et vert à fond).
  • "magenta" ou "#FF00FF" code le jaune   (rouge et bleu à fond).
  • "cyan" ou "#00FFFF" code le jaune   (vert et bleu à fond).
  • Du noir jusqu'au blanc 

  • "black" ou "#000000" code le noir   (aucune couleur).
  • "dimgrey" ou #666666" code du gris   (même intensité faible pour les trois).
  • "grey" ou #888888" code du gris   (même intensité moyenne pour les trois).
  • "lightgrey" ou #DDDDDD" code du gris   (même intensité forte pour les trois).
  • "white" ou #FFFFFF" code du blanc   (intensité maximale pour les trois).
  • Et toutes les autres couleurs, comme

  • "orange" ou #FFAA00" code du orange   (rouge à fond, pas mal de vert et pas de bleu).
Modifier la couleur avec pencolor() en hexadécimal

Voici un exemple d'affichage et le code correspondant :

points et couleurs
1 2 3 4 5 6
import turtle as trt crayon = trt.Turtle() crayon.pencolor("#FF0000") crayon.dot(200) crayon.pencolor("#FF00FF") crayon.dot(100)

On choisit d'abord la couleur rouge "#FF0000" et on trace un point de 200 pixels.

On choisit ensuite la couleur magenta "#FF00FF" et on trace un point plus petit.

⚙ 15° Modifier les couleurs fournies en anglais par leurs équivalences en RGB et hexadécimal :

Final sans trait
3.6 - Turtle : tracer un arc de cercle avec circle()

Tracer un cercle complet

circle() trace un cercle dont on doit fournir le rayon. La position actuelle correspond au point de départ sur le périmètre du cercle.

1 2 3 4 5
import turtle as trt crayon = trt.Turtle() crayon.circle(100) crayon.circle(50)
circle
Tracer un arc de cercle

On peut envoyer deux arguments à circle() : le premier est le rayon, le deuxième est l'angle vers lequel le crayon va s'arrêter lors du tracé. Pas facile à utiliser.

  1. 360° de rotation sur soi-même en suivant la trajectoire du cercle : facile, ça fait un cercle.
  2. 180° de rotation sur soi-même en suivant la trajectoire du cercle imaginaire : facile, ça fait un demi-cercle.
  3. 90° de rotation sur soi-même en suivant la trajectoire du cercle imaginaire : facile, ça fait un quart de cercle.

Regardons quelques exemples.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
import turtle as trt crayon = trt.Turtle() crayon.pensize(10) crayon.color("red") crayon.circle(100, 90) crayon.color("blue") crayon.circle(100, 90) crayon.color("green") crayon.circle(100, 90) crayon.color("orange") crayon.circle(100, 90)
circles

16 ✔° Lancer le programme pour vérifier que vous comprennez bien pourquoi le dessin est généré de cette façon :

1 2 3 4 5 6
import turtle as trt crayon = trt.Turtle() crayon.pencolor("red") crayon.dot(50, "green") crayon.circle(100, 180)
Exemple ronds
Exemple de ronds avec dot() et circle()
3.7 - Turtle : choisir l'orientation absolue avec setheading()

left() right() permettent de modifier l'orientation relative du crayon (par rapport à son orientation actuelle). Voyons comment le faire pointer vers une orientation absolue : vers la droite, la gauche, le haut ou le bas.

Les angles

Voici un descriptif visuel des différents angles :

Exemples d'orientation
Les différents angles absolus d'orientation
Modifier l'orientation du crayon

setheading() permet d'imposer la direction absolue vers lequel le crayon est orienté.

1 2 3 4 5 6 7 8
import turtle as trt crayon = trt.Turtle() crayon.setheading(45) crayon.forward(200) crayon.setheading(-90) crayon.forward(200)
setheading

✔ 17° Lancer le programme pour vérifier que vous comprennez bien pourquoi le dessin est généré de cette façon :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
import turtle as trt crayon = trt.Turtle() crayon.pencolor("red") crayon.pensize(7) crayon.circle(100, 180) crayon.setheading(90) crayon.circle(100, 180) crayon.setheading(180) crayon.circle(100, 180) crayon.setheading(270) crayon.circle(100, 180)
Exemple 2
Exemple avec setheading() et circle()

⚙ ✌ 18° MODIFIER le programme pour obtenir un visuel proche de celui qui est proposé ici. Pour l'instant, vous n'avez qu'une partie des cercles.

Faire appel à l'enseignant une fois le bon résultat obtenu.

1 2 3 4 5 6 7 8 9
import turtle as trt crayon = trt.Turtle() crayon.pencolor("red") crayon.setheading(0) crayon.circle(100) crayon.setheading(45) crayon.circle(100)
Les cercles
Le visuel voulu

Informations utiles

Voici un descriptif visuel des différents angles :

Exemples d'orientation
Les différents angles absolus d'orientation

Il faut comprendre que :

  • 315° peut s'écrire également -45°
  • 270° peut s'écrire également -90°
  • 245° peut s'écrire également -135°
  • 180° peut s'écrire également -180

L'intérêt fondamental de setheading() est de pouvoir régler la direction de la tortue quelque soit la direction qu'elle avait avant.

On peut ainsi être certain d'orienter la tortue dans la direction voulue.

✎ TRAVAIL OPTIONNEL° Utilisez le temps qu'il vous reste pour réaliser le dessin le plus sympa possible. La fiche ci-dessous récapitule les actions vues sur cette activité. Aller voir la partie Frequently Asked Questions (FAQ) pour voir comment personnaliser les couleurs si vous le voulez.

Vous allez être noté sur l'originalité mais également sur l'utilisation des différentes instructions proposées dans les parties précédentes.

  1. Au moins un carré, ou un triangle ou un rectangle
  2. Au moins un cercle
  3. Au moins deux couleurs de crayon
  4. Au moins deux épaisseurs de crayon
  5. Au moins deux fonds colorés
  6. Au moins deux utilisations de goto() et penup(), pendown().
  7. Au moins une boucle
  8. Des commentaires expliquant les lignes (placer # derrière l'instruction : le reste ne sera que du texte à destination du lecteur humain)

Impossible d'avoir plus de 06/20 s'il manque l'un des items.

Mémo Turtle
Création du crayon

N'oubliez pas d'importer au préalable le module Turtle avec import turtle as trt par exemple.

Voici quelques méthodes qu'on peut appliquer aux objets de classe Turtle, qu'on crée à l'aide de
crayon = trt.Turtle().

Déplacement relatif

Pour avancer : crayon.forward(50) permet d'avancer de 50 pixels.

Pour reculer : crayon.backward(50) permet de reculer de 50 pixels.

Pour tourner à droite : crayon.right(45) permet de tourner de 45° à droite par rapport à l'orientation actuelle.

Pour tourner à gauche : crayon.left(45) permet de tourner de 45° à gauche par rapport à l'orientation actuelle.

Déplacement absolu

Pour orienter le crayon sur un angle de 45° absolu (0° étant la droite horizontale) : crayon.setheading(45)

Exemples d'orientation
Les différents angles absolus d'orientation

Pour se déplacer jusqu'au point de coordonnées (x=50,y=100), 3 manières de procéder :

  1. crayon.goto(50, 100)
  2. crayon.setposition(50, 100).
  3. crayon.setpos(50, 100)
  4. Système d'axes xy de Turtle
    Système d'axes xy de Turtle

    Dans le cadre de ce site, on utilisera uniquement le goto(). Mais si vous trouvez des programmes sur le Web utilisant les autres, vous savez maintenant que cela réalise la même action.

Pour faire un mouvement horizontal jusqu'à atteindre la valeur donnée en x=50 : crayon.setx(50).

Pour faire un mouvement vertical jusqu'à atteindre la valeur donnée en y=100 : crayon.sety(100).

Pour revenir au point d'origine : crayon.home().

Dessiner des cercles ou d'autres formes encore

Pour dessiner un cercle de rayon x : crayon.circle(x).

Pour dessiner un demi-cercle de rayon 60 pixels : crayon.circle(60, 180).

Pour dessiner un quart de cercle de rayon 60 pixels : crayon.circle(60, 90).

Pour tracer des polygones de "rayon" 60 pixels possèdant 8 côtés : crayon.circle(60, 360, 8).

Pour placer un point de rayon 5 et de couleur rouge : crayon.dot(5, "red").

Tracer ou arrêter de tracer

Pour lever la pointe du crayon : crayon.penup().

Pour abaisser la pointe du crayon : crayon.pendown().

Afficher un texte

Pour écrire un texte : crayon.write("bonjour").

Pour écrire avec une police différente : crayon.write("Bonjour", font=('Arial', 28, 'normal'))

Taille, vitesse et couleur du crayon

Pour modifier la vitesse x, x variant de 1 à 10 : crayon.speed(3), x=0 veut dire pas d'animation.

Pour augmenter la taille du crayon : crayon.pensize(5).

Pour changer la couleur du crayon : crayon.pencolor("red").

Pour obtenir une forme à fond colorée :

  1. crayon.fillcolor("yellow") : on définit la couleur de remplissage à utiliser.
  2. crayon.begin_fill() : on active la surveillance de la forme à remplir.
  3. Ensuite, on dessine la forme avec une, deux ou plusieurs instructions.
  4. crayon.end_fill() : on signale qu'on a fini de dessiner la forme et qu'on désire la remplir.

Cela nous suffira mais vous pouvez aller voir la documentation Python pour voir ce que le module peut faire d'autre : DOCUMENTATION TURTLE PYTHON.

Nous allons réutiliser Turtle un peu plus loin dans le cours car ce module permet de visualiser certaines choses (les boucles par exemple).

Ici, j'espère qu'il vous a permis de visualiser que l'ordre des instructions est important.

Dans la partie FAQ, vous avez un programme plus conséquent mais utilisant beaucoup de choses que nous n'avons pas encore vu. C'est joli mais plus difficile à comprendre, sauf si vous avez déjà vu les boucles.

4 - FAQ

Et si on peut avoir un dessin plus compliqué et plus joli ?

Oui, mais on utilisera beaucoup de choses que nous n'avons pas encore vu pour le moment. Un exemple :

1 2 3 4 5 6 7 8 9 10
import turtle as trt couleurs = ["gold", "white", "blue" ] crayon = trt.Turtle() crayon.speed(0) trt.bgcolor('black') for x in range(800): crayon.pencolor(couleurs[x % 3]) crayon.width(x//100 + 1) crayon.forward(x) crayon.left(59)

Et si on veut une couleur particulière ?

Vous n'êtes pas obligé de fournir un nom de couleur.

Vous pouvez également fournir un code RGB donnant l'intensité de Rouge, de Vert et de Bleu.

L'intensité d'une de ces couleurs doit varier de 00 (rien) à FF (intensité maximale).

Pour l'instant, limitez vous à 00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF.

Dans le code transmis, il faudra rajouter un dièse # avec les 3 séquences RGB.

Exemples :

  • "#FF0000" donne   , du rouge intense équivalent à "red"
  • "#AA0000" donne   , du rouge plus foncé
  • "#660000" donne   , du rouge très foncé
  • "#00FF00" donne   , du vert intense équivalent à "green"
  • "#00AA00" donne   , du vert plus foncé
  • "#006600" donne   , du vert très foncé
  • "#0000FF" donne   , du bleu intense équivalent à "blue"
  • "#0000AA" donne   , du bleu plus foncé
  • "#000066" donne   , du blue très foncé
  • "#FFFF00" donne   , du jaune intense équivalent à "yellow"
  • ...

Activité publiée le 01 11 2020
Dernière modification : 13 07 2023
Auteur : ows. h.