1-1 - Séquentialité (rappel)
Séquentialité (Rappel)
A avoir en tête dès qu'on programme :
- L'interpréteur Python exécute votre ligne en suivant les priorités des opérateurs.
- Tant qu'il n'a pas fini une ligne, il ne passera pas à la suivante.
2 - Programme
Nous allons continuer à parler de ça :
Ce TP est destiné à vous "montrer" la notion de séquentialité. C'est une notion simple : lorsqu'un programme doit exécuter plusieurs lignes d'instructions, il les exécute une par une dans un ordre précis. Le programme du cours vous permettra de réaliser ceci :
Nous parlerons donc également de rendu des couleurs sur un ordinateur.
Documents de cours : pdf ou odt.
- ✎ 04A
- ✌ 04B-05
1 - Programme
Nous allons utiliser Thonny, un environnement de développement gratuit, léger, efficace et multiplateforme créé par l'université d'Estonie.
Vous pouvez le télécharger sur la page d'accueil du projet : https://thonny.org/
La dernière fois, nous avons utilisé la zone la bas (la console), aujourd'hui nous allons utiliser la zone du haut (la zone de programmation).
1-2 - Programme
Où placer son programme dans Thonny
Votre programme devra être copié dans la zone du haut.
Programme
On écrit toutes les lignes sans exécution immédiate.
Pour exécuter un programme, il faut
- L'enregistrer si ce n'est pas déjà fait
- Le lancer en utilisant la flèche VERTE.
L'interpréteur Python commence par réaliser la ligne 1, puis la 2 puis la 3...
Vous pouvez modifier le programme mais il faut l'enregistrer et le relancer pour voir les modifications.
Nous verrons plus tard qu'il existe des moyens de réaliser des branchements permettant de réaliser des sauts entre les lignes.
Pour le stopper proprement dans Thonny, il faut appuyer sur le panneau ROUGE.
Où placer son programme dans Thonny
2 - Premier programme avec turtle
Cette partie est destinée à être réalisée ensemble en classe.
Intro A (préparation du poste)° Ouvrir votre dossier/répertoire personnel et réaliser ces actions :
- Sortir votre feuille de TP et y noter le titre Python 2.
- (Sur Windows uniquement) : dans le sous-menu AFFICHAGE de l'explorateur, vérifier que l'option permettant de voir les extensions des fichiers est bien sélectionnée. Sinon, activez l'option.
- Créer dans votre dossier, un dossier que vous nommerez SNT puis créer dans ce dossier SNT, un nouveau dossier que vous nommerez python02.
- Afficher les fenêtres de Thonny et de votre navigateur Web sur votre écran en répartition 50/50
Intro B° Réaliser les actions suivantes :
- Placer le programme ci-dessous dans la zone de programmation.
- Sauvegarder le programme en le plaçant dans le répertoire python02 sous le nom axes.py
- Lancer le programme (à l'aide de la flèche verte dans Thonny, ou du bouton exécuter dans Basthon).
- Visualiser le résultat dans la nouvelle fenêtre qui a dû apparaître (Thonny : voir la barre des tâches, Basthon : voir le bouton Image qui est devenu jaune, en bas à droite).
1
2
3
4
5
6
7
8
9
10 | |
Questions
A votre avis :
- Sur quelle ligne demande-t-on d'afficher "Origine" ? Quelle fonction utilise-t-on ?
- Sur quelle ligne demande-t-on d'afficher "y positif" ? Quelle fonction utilise-t-on ?
- Pourquoi les deux messages ne sont-ils pas au même endroit ?
...CORRECTION...
- Ligne 2, avec write()
- Ligne 4, avec write()
- En ligne 3, on modifie la localisation du crayon et les affichages qui auront lieu sur les lignes 4+ utiliseront donc ces coordonnées.
Important : n'utilisez jamais un nom correspondant à l'un des modules importés, sinon vous ne pourrez plus importer le module turtle, math ou autre. Donc, pas de math.py, turtle.py...
Intro C° Modifier le programme en supprimant les lignes précédentes pour les remplacer par celles-ci. Relancer le programme pour visualiser le résultat.
1
2
3
4
5
6
7
8
9
10 | |
Question
Pourquoi l'affichage est-il plus grand cette fois ?
...CORRECTION...
On fournit à la fonction write() des informations supplémentaires sur la police d'écriture (font) qui passe en taille 28.
Intro D° Analyser ce code (sans le lancer donc) où on rajoute quelques lignes par rapport au programme précédent, puis répondre aux questions.
Questions
- Sur quelle ligne demande-t-on d'écrire "y négatif" ? (autrement dit : Quelles sont les coordonnées de la tortue sur cette ligne ?)
- Lors de la ligne 8 où on demande d'écrire "x positif", quelles sont les coordonnées de la tortue ?
- Lancer le code pour vérifier si vous aviez trouvé la bonne réponse.
1
2
3
4
5
6
7
8
9
10 | |
...CORRECTION...
- L'affichage de "y négatif" est demandé en ligne 6. On doit donc regarder la dernière position du crayon avant cette ligne 6. On la trouve en ligne 5, en (0, -100), c'est à dire x=0 et y=-100.
- L'affichage de "x positif" est demandé en ligne 8. On doit donc regarder la dernière position du crayon avant cette ligne 8. On la trouve en ligne 7, en (200, 0), c'est à dire x=200 et y=0.
5
6 | |
7
8 | |
Voici le résultat attendu du programme précédent :
On voit ainsi que l'interpréteur exécute les instructions UNE par UNE en commençant par celle de la ligne 1. Il ne lance pas le programme d'un bloc en tentant d'en deviner le sens, comme un humain pourrait le faire.
Pour programmer, il faut donc avoir la capacité de se mettre "à la place" de l'interpréteur, pour comprendre comment il va réagir. Pas d'intuition, juste de la logique pure et dure.
Bilan de ce que nous venons de voir sur le module turtle.
2.1 - Turtle : afficher du texte avec write()
Ouverture d'un écran Turtle
Pour importer les fonctions du module Turtle, il suffit de taper ceci :
- | |
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.
- | |
Mais on peut faire mieux : on peut écrire avec une taille de police plus grande par exemple.
- | |
2.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.
Déplacement avec goto()
On peut déplacer le curseur à l'écran et utilisant goto(x,y).
1
2
3 | |
En tapant ceci, on part en (x=0, y=100).
3 - Des points... et des couleurs
3.1 - 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 | |
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.
⚙ 01 (exercice)° Quel programme faut-il taper pour :
- D'ABORD afficher un point de 10 pixels de diamètre, centré sur le point (x=0, y=0)
- PUIS afficher un point de 20 pixels de diamètre, centré sur le point (x=-100, y=-50)
- PUIS afficher un point de 30 pixels de diamètre, centré sur le point (x=-50, y=0)
- ENFIN afficher un point de 40 pixels de diamètre, centré sur le point (x=0, y=50)
Vérifiez votre exécution en comparant avec la solution fournie.
Pensez à appeler si vous bloquez.
...CORRECTION...
1
2
3
4
5
6
7
8
9
10
11
12 | |
3.2 - Turtle : changer de couleur avec pencolor()
Modifier la couleur avec pencolor()
Voici un exemple d'affichage et le code correspondant :
1
2
3
4
5 | |
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 ?
Modifier la couleur avec pencolor() en hexadécimal
On peut fournir une description très précise de la couleur qu'on veut afficher en utilisant une codification très particulière qu'on nomme RGB.
Voici un exemple d'affichage et le code correspondant (sans explication pour le moment) :
1
2
3
4
5 | |
En ligne 2, on choisit d'abord la couleur rouge bizarrement notée ici "#FF0000" puis, en ligne 3, on trace un point de 200 pixels.
En ligne 4, on choisit ensuite la couleur magenta bizarrement notée ici "#FF00FF" puis, en ligne 5, on trace un point plus petit (de couleur magenta donc).
⚙ 02 (exercice)° Tracer ces deux points :
- D'ABORD un point de couleur RGB FF pour le rouge, FF pour le vert et 00 pour le bleu, de 50 pixels de diamètre et centré sur (x=100, y=0);
- ENSUITE un point de couleur RGB AA pour le rouge, 99 pour le vert et 00 pour le bleu, de 300 pixels de diamètre et centré sur (x=100, y=50);
Vérifiez votre exécution en comparant avec la solution fournie.
Pensez à appeler si vous bloquez.
Questions
- Pourquoi ne voit-on pas le premier point une fois le programme exécuté ?
- Qu'aurait-on dû modifier dans notre façon de programmer si nous voulions voir les deux points (sans changer leurs coordonnées) ?
- Quelle est la couleur du point le plus petit ? Pour faire du jaune, a-t-on besoin de rouge ? de vert ? de bleu ?
...CORRECTION...
1
2
3
4
5
6
7
8
9 | |
- On ne voit plus le premier point à cause de la séquentialité : on trace le point jaune puis on trace le deuxième gros point par dessus.
- Si on veut voir les deux points, il suffit d'inverser les demandes : commencer par le gros et finir par le petit.
- Il est jaune. Le code permet de voir qu'on utilise du rouge et de vert mais pas de bleu : pencolor("#FFFF00")
Passons aux explications sur ces mystérieuses notations RGB :
3.3 Photographie Numérique : couleur RGB
Couleurs RGB
Voyons comment transmettre une couleur particulière en utilisant les couleurs dites RGB.
RGB veut dire Red Green Blue : lorsque notre oeil reçoit une juxtaposition des 3 radiations rouge, vert, bleu, nous percevons une couleur particulière.
On peut fournir une couleur sous forme d'un string commençant par # (ALT-GR 3) suivi par 6 caractères codant la valeur de rouge, de vert et de bleu.
"#FF0000" code le rouge vif (le rouge à fond, pas de vert, pas de bleu).
"#0000FF" code le bleu vif (pas de rouge, pas de vert, le bleu à fond).
Cette notation étrange des couleurs mélangeant chiffres usuels et lettres se nomme la notation hexadécimale dont voici le principe général :
- Aucune intensité se dit 00.
- On trouve ensuite ces intensités de plus en plus intenses : 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE.
- L'intensité maximale (à "fond") se note FF.
Si on met tout à 00, on obtient du noir :
"#000000" code le noir .
"#440000" donnera .
"#880000" donnera .
"#BB0000" donnera .
"#FF0000" donnera .
Quelques exemples
- "red" ou "#FF0000" code le rouge vif (uniquement le rouge à fond).
- "green" ou "#00FF00" code le vert vif (uniquement le vert à fond).
- "blue" ou "#0000FF" code le bleu vif (uniquement le bleu à fond).
- "yellow" ou "#FFFF00" code le jaune (rouge et vert à fond).
- "magenta" ou "#FF00FF" code le magenta (rouge et bleu à fond).
- "cyan" ou "#00FFFF" code le cyan (vert et bleu à fond).
- "black" ou "#000000" code le noir (aucune intensité pour les 3).
- "dimgrey" ou "#666666" code du gris foncé (même intensité faible 66 pour les trois).
- "grey" ou "#888888" code du gris moyen (même intensité moyenne 88 pour les trois).
- "lightgrey" ou "#DDDDDD" code du gris plus clair (même intensité forte DD pour les trois).
- "white" ou "#FFFFFF" code du blanc (intensité maximale FF pour les trois).
- "orange" ou "#FFAA00" code du orange (rouge à fond, pas mal de vert et pas de bleu).
Les 3 couleurs de base :
Mais on peut aussi mélanger les couleurs (synthèse additive) :
Le noir, le gris et blanc sont caractérisés par 3 valeurs RGB identiques
Et toutes les autres couleurs, comme
⚙ 03 (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 | |
Voilà le résultat que vous devriez avoir :
Questions
- Où demande-t-on d'obtenir un fond noir ?
- Que vaut x lorsqu'on trace le point rouge en ligne 6 ?
- Que vaut x lorsqu'on trace le point jaune en ligne 10 ?
- Est-ce que x augmente de 50 ou est-ce que x diminue de 50 lorsqu'on se déplace vers la droite ?
- Que vaut y lorsqu'on trace le point rouge en ligne 6 ?
- Que vaut y lorsqu'on trace le point jaune en ligne 10 ?
- Est-ce que y augmente de 50 ou est-ce que y diminue de 50 lorsqu'on se déplace vers le haut ?
...CORRECTION...
- Où demande-t-on d'obtenir un fond noir ?
- Que vaut x lorsqu'on trace le point rouge en ligne 6 ?
- Que vaut x lorsqu'on trace le point jaune en ligne 10 ?
- Est-ce que x augmente de 50 ou est-ce que x diminue de 50 lorsqu'on se déplace vers la droite ?
- Que vaut y lorsqu'on trace le point rouge en ligne 6 ?
- Que vaut y lorsqu'on trace le point jaune en ligne 10 ?
- On se décale vers le haut entre rouge et jaune. Est-ce que y augmente de 50 ou est-ce que x diminue de x ?
Le fond est obtenu en utilisant la fonction bgcolor(), le bg voulant bien entendu signifié background.
Il faut regarder où nous étions AVANT de tracer le point rouge. Donc, il faut regarder la ligne 5 : on voit que x vaut -100.
Il faut regarder où nous étions AVANT de tracer le point jaune. Donc, il faut regarder la ligne 9 : on voit que x vaut -50.
x augmente de 50 lorsqu"on part à droite : y passe de -100 à -50 .
Il faut regarder où nous étions AVANT de tracer le point rouge. Donc, il faut regarder la ligne 5 : on voit que y vaut -50.
Il faut regarder où nous étions AVANT de tracer le point jaune. Donc, il faut regarder la ligne 9 : on voit que y vaut 0.
y augmente de 50 lorsqu"on monte : y passe de -50 à 0.
✎ 04-A° Recopiez ce schéma sur votre feuille puis complétez les coordonnées manquantes des points V (vert), C (cyan), B (bleu) et M (magenta). Notez bien que toutes les coordonnées évoluent par tranche de 50 pixels à la fois.
:
Remarque : les points R(ouge), J(aune), V(ert), C(yan), B(leu) et M(agenta) représentent les centres des points colorés que vous allez devoir afficher dans la question suivante.
✌ 04-B° Compléter maintenant le programme de la question 3 pour qu'il affiche ceci (texte y compris) :
4 - Lever et poser le crayon
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 | |
Plus de trait sur les lignes qui suivront la ligne 9.
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 | |
On voit donc qu'on trace des traits lignes 3, 9, 15 mais pas sur les lignes 6 et 12.
✌ 05° Compléter maintenant le programme pour qu'il affiche ceci (c'est à dire sans trait entre les points) :
5 - Complément
5.1 - Turtle : déplacement relatif avec forward(), left(), right()
Orientation de la tortue
Si vous regardez l'écran de turtle, vous pourrez constater qu'on y voit une sorte de flèche : elle indique la direction vers laquelle pointe la tortue.
Initialement, la tortue pointe vers la droite (angle 0°).
Avancer avec forward()
Cette fonction permet de faire avancer la tortue dans la direction qu'elle regarde en partant de sa position actuelle.
On doit lui transmettre la distance en pixels.
1
2
3
4
5
6 | |
Tourner avec left()
Cette fonction permet de faire tourner la tortue sur place en fournissant un angle en degrés. Elle tourne sur elle-même vers la gauche, en sens anti-horaire donc.
1
2
3
4
5
6
7 | |
Tourner avec right()
Cette fonction permet de faire tourner la tortue sur place en fournissant un angle en degrés. Elle tourne sur elle-même vers la droite, en sens horaire donc.
1
2
3
4
5
6
7 | |
⚙ 06° Compléter sur plusieurs lignes le programme pour tracer un rectangle.
1
2
3
4
5
6 | |
5.2 - Turtle : taille du crayon avec pensize()
Cette fonction permet de faire modifier la taille du trait OU de récupérer la taille du trait.
Modifier la taille du crayon
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | |
Récupérer la taille du crayon
Si on envoie aucun argument à la fonction, elle ne modifie pas la taille mais renvoie la valeur actuelle.
On peut ainsi l'utiliser pour modifier la taille du trait. Exemple avec un appel qui sert à multiplier la taille par deux à chaque fois.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | |
⚙ 07° Modifier votre programme pour que le rectangle ait un tracé plus épais.
⚙ 08° Modifier votre programme pour que les 4 traits soient de 4 couleurs différentes.
5.3 - Turtle : tracer un arc de cercle avec circle()
Tracer un cercle complet
La fonction 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 | |
Tracer un arc de cercle
On peut envoyer deux arguments à la fonction 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.
- 360° de rotation sur soi-même en suivant la trajectoire du cercle : facile, ça fait un cercle.
- 180° de rotation sur soi-même en suivant la trajectoire du cercle imaginaire : facile, ça fait un demi-cercle.
- 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 | |
⚙ 09° Modifier votre programme (notamment les angles) pour obtenir plutôt ceci :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | |
Indication : le fond porte le nom "darkgrey".
5.4 - Turtle : choisir l'orientation absolue avec setheading()
left() permet 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 :
Modifier l'orientation du crayon
La fonction setheading() permet d'imposer la direction absolue vers lequel le crayon est orienté.
1
2
3
4
5
6
7 | |
⚙ 10° Modifier votre programme précédent pour finalement tracer le même cercle trois fois mais avec une orientation iniitale de 0° puis 120° puis 240°.
6 - FAQ
On peut faire d'autres choses avec turtle ?
Oui, beaucoup de choses.
Mais pour cela, il faut aller lire la documentation sur python.org.
Ou attendre l'activité Python que nous allons faire qui en parle.
Mes programmes turtle ne fonctionnent pas sous Basthon !
C'est sans doute car vous ne saviez pas qu'il faut faire une légère modification à vos programmes : il faut rajouter une instruction finale pour lancer la demande d'affichage : done().
Voici un exemple avec un petit programme :
Mon programme ne fonctionne pas !
Il y a certainenement un message rouge qui s'affiche. Il va falloir apprendre à le lire : savoir identifier une erreur de programmation est une compétence importante.
Erreur courante n°1 : Mauvais ordre des lignes° Ici, l'élève a les bonnes lignes mais ne les a pas placé dans le bon ordre.
Questions
- Provoque-t-il le même affichage ?
- Un développeur peut-il concevoir son programme sans se demander comment l'interpréteur va réagir ?
1
2
3
4
5
6
7
8
9
10 | |
...CORRECTION...
Puisque l'interpréteur exécute les lignes une par une, l'ordre a bien entendu une grande importance.
Erreur courante n°2 : importation tardive° Ici, l'élève tente d'activer la fonction write() de Turtle dès la ligne 1 alors qu'il importe le module en ligne 4.
Questions
1
2
3
4
5
6
7
8
9
10 | |
Traceback (most recent call last):
File "/home/rv/axes.py", line 1, in <module>:
write("Origine", font=('Arial', 28, 'normal'))
NameError: name 'write' is not defined
Python signale donc qu'il tente en ligne 1 d'utiliser write() mais qu'il ne connaît pas ce nom pour le moment. Donc il stoppe tout simplement.
Erreur courante n°3 : string non déclaré° Ce programme provoque une erreur sur une ligne car on a oublié de mettre les guillemets autour d'un string.
- Sur quelle ligne se situe le problème ?
- Quel est le problème ?
1
2
3
4
5
6
7
8
9
10 | |
Traceback (most recent call last):
File "/home/rv/axes.py", line 8, in <module>:
write(x > 0, font=('Arial', 28, 'normal'))
NameError: name 'x' is not defined
...CORRECTION...
Le problème vient du fait qu'on doit transmettre un string et qu'on a "oublié" de placer les guillemets autour du texte à afficher.
Remarquez bien qu'il a exécuté le programme sur les lignes 1 à 7. Il stoppe à la 8.
Erreur courante n°4 : utilisation d'un mauvais caractère de séparation° Ce programme provoque une erreur car on a tapé une accolade } plutôt qu'une parenthèse ). L'interpréteur ne comprend pas ce qu'on lui demande.
1
2
3
4
5
6
7
8
9
10 | |
Traceback (most recent call last):
File "/home/rv/axes.py", line 3, in <module>:
goto(0, 100}
^
SyntaxError: closing parenthesis '}' does not match opening parenthesis '('
Activité publiée le 01 12 2023
Dernière modification : 01 12 2023
Auteur : ows. h.