Turtle

{{English here!|Français ici !}} {{Tutoriel uniquement|Tutorial only}}

Exerci{{c|s}}e 1{{ |}}: {{ Avancer, tourner | Forward, turn }}

{{Clique sur|Click on}} {{Tutoriel uniquement|Tutorial only}}, {{puis écris|then write}} {{ Écris | Write }} {{le code suivant dans la zone de droite et clique sur | the following code in the zone to the right of the screen then click on }} !

                forward(50)
                left(90)
                forward(100)
                right(45)
            

{{ Tu as normalement vu une tortue se déplacer vers l'avant d'une distance de 50, puis qui a tourné à gauche de 90 degrés, s'est redéplacée en avant d'une distance de 100 et finalement a tourné à droite de 45 degrés. | You should have seen a turtle move forward by a distance of 50, then turned left 90 degrees, moved forward again by a distance of 100 and finally turned right of 45 degrees. }}

En français, on peut traduire forward par avancer, left par gauche et right par droite. | }}

{{ Essaie maintenant le code qui ne contient que la première ligne (supprime les autres), que fait-il ? | Try now the code containing the first line only (delete the other ones), what does this code do? }} {{ N'oublie pas de cliquer sur|Don't forget to click on}} . {{Essaie ensuite le code avec uniquement les deux premières lignes, même question. |Try now the code with the two first line only, same question.}} {{Ajoute ensuite la troisième, lance le code, comprends le comportement, ajoute la quatrième ligne, lance et comprends le comportement. |Add now the third, run the code, understand why the turtle moves like that, add the fourth line, run and understand the move of the turtle. }}

{{Avec tes expériences précédentes, explique, en français que fais la commande forward ? Et les commandes left et right ? |With the experiments you just did, explain in plain english what the forward command do? What about the left and the right commands? }}

{{ Si vous voulez avoir deux fenêtres différentes pour coder et suivre le tutoriel, cliquez sur Tutoriel uniquement, et ensuite dans une nouvelle fenêtre, allez sur cette page. Une manière de faire ça est de faire un clic droit sur le lien, puis de choisir ouvrir dans une nouvelle fenêtre dans le menu. | If you want to have two different windows to code and follow the tutorial, click on Tutorial only, then in a new windows go on this page. One way to do that is to right click on the link and select open in a new window from the menu. }}

{{ Je conseille de mettre les deux fenêtres côtes à côte, environ ⅓ de l'écran pour cette page et donc ⅔ pour le code et l'affichage de la tortue. | I suggest to put the two windows next to each other, around ⅓ of the screen for this windows and therefore ⅔ for the code and the rendering of the turtle. }}

Exerci{{c|s}}e 2{{ |}}: {{Raccourcis turtle|Turtle shortcuts}}

{{ Écrire forward, c'est fatigant, il existe le raccourci fd. De même on a lt et rt qui veulent dire Left Turn et Right Turn, que l'on traduirait par tourner à gauche et tourner à droite. | To write forward is exhausting, there exists a shortcut fd. for Left Turn and Right Turn, there exist the shortcuts lt and rt. }}

{{ Que fait ce code ? | What is this code doing?}}

                fd(100)
                lt(120)
                fd(100)
                lt(120)
                fd(100)
            

{{ Et celui-ci ? | And this one? }}

                fd(100)
                lt(180)
                fd(200)
                lt(180)
                fd(100)
                lt(90)
                fd(50 + 50)  # {{wow, c'est joli !|wow, that's pretty!}}
                lt(90 * 2)
                fd(40 + 80 * 2)
            

Nous voyons que la tortue est une super calculette ! Bien mieux que cet objet des années 80, crois-moi.

Remarque que la dernière ligne fait avancer la tortue de 200 pixels, car dans une calculette, le × se fait avant le +, et donc 40 + 80 * 2 = 40 + 160 = 200, c'est la priorité des opérations.

Tapper tout ça c'était un peu lent n'est-ce pas ? As-tu pensé à faire Copier-Coller ?

1. Sélectionne le texte :
   1. Met ta souris à gauche du premier caractère (f),
   2. Maintient le clic enfoncé,
   3. Déplace ta souris jusqu'à droite du dernier caractère (la parenthèse fermante )),
   4. relâche le clic.
2. Clic droit (clic de droite, en utilisant ton majeur)
3. Sélectione Copier dans le menu (raccourci Ctrl+C).
4. Clique dans la zone de texte à droite.
5. Clic droit → Coller (raccourci Ctrl+V).

{{English here!|Français ici !}} {{Tutoriel uniquement|Tutorial only}}

Exerci{{c|s}}e 3{{ |}}: {{ Le carré | The square }}

{{ Maintenant, tu vas écrire le code ! Essaie de dessiner un carré de côté 80. | Now, you are going to write the code! Try to draw a square of side 80. }}

Exerci{{c|s}}e 4{{ |}}: {{ La maison | The house }}

{{ Plus difficile, cette maison : | More difficult, this house : }}

{{ Si tu es un peu perdu, il y a un indice en dessous du dessin 😉 | If you're a little lost, there's a hint below the drawing 😉 }}

{{ Si tu as du mal avec les angles, voici quelques schémas qui peuvent t'être utiles : | If you struggle with angles, here are some drawing that can be handy: }}

{{Cliquez sur l'image pour passer à l'image suivante|Click on the image to see next image}}

{{Tu peux également écrire speed(10) au début de ton code pour que la tortue aille plus vite. |You can also write speed(10) at the beginning of your code so that the turtle will move faster. }}

{{ Petite question, quelles lignes de code doivent changer pour que la porte soit plus haute ? | Small question, which lines of code you have to change so that the door is higher? }}

{{ Sauve ce code dans un nouveau fichier pour pouvoir le réutiliser plus tard ! | Save this code in a new file to reuse it afterwards! }} {{ Attention à bien finir le nom par .py comme sur l'image. | Be careful to end the filename with .py like on the picture. }}

Et puisque je suis gentil, voici une correction de la maison en vidéo... ah, elle n'est pas encore faite cette vidéo ^^

Voici le code qui a été (qui va être...) produit dans la vidéo :

{{English here!|Français ici !}} {{Tutoriel uniquement|Tutorial only}}

penup/pendown

{{ La nouvelle commande penup() (raccourci pu() ou up()) permet de lever le crayon, ainsi la tortue peut bouger sans dessiner. Ensuite, pendown() (raccourci pd() ou down()) repose le crayon pour plus de dessins. | The new command penup() (shortcut pu() or up()) can lift the pen up, so that the turtle can move without drawing. We also have, pendown() (shortcut pd() or down()) to put the pen back down for more drawing. }}

{{ Que fait ce code ? | What is this code doing? }}

                fd(25)
                penup()
                fd(50)
                pendown()
                fd(25)
            

color

{{ La nouvelle commande color("red") (attention aux guillemets dans "red" !) permet de changer la couleur du trait en rouge. D'autres couleurs existent par défaut comme green, blue, yellow et bien d'autres. | The new command color("red") (beware of the quotes in "red"!) changes the color of the pen to red. Other colors exist like green, blue, yellow and many others. }}

{{ Pour pouvoir indiquer toutes les couleurs existantes, on regarde dans Paint : | To have all the existing colors, we go in Paint: }}

{{ Pour ce magnifique orange, j'écrirai la commande | For this amazing orange, I will write the command }} color(253, 126, 0)

{{ Pour faire varier les couleurs, on peut tapper color picker sur google ! | In order to pick any color, we can google color picker. }}

{{ Beaucoup d'outils donnent le code hexadécimal (code hexa) d'une couleur, par exemple j'ai un joli rose qui s'écrit #ff0060 qui peut s'insérer en écrivant | A lot of tools give the color hexadecimal code (hex code), for example I have a nice pink written #ff0060 that can be inserted using }} color("#ff0060") {{ou|or}} color(0xff, 0x00, 0x60).

                fd(30)
                color("yellow")
                fd(30)
                color("red")
                fd(30)
                color(253, 126, 0)
                fd(30)
                color("#ff0060")  # color(0xff, 0x00, 0x60)
                fd(30)
            

{{ Remarque, si color(253, 126, 0) fait une erreur, écris colormode(255) au début de ton programme. | Let's notice that, if color(253, 126, 0) gives you an error, write colormode(255) at the beginning of your program. }}

{{ Ainsi, une couleur est un mélange de rouge, vert et bleu et ces composantes sont souvent affichées sous différentes formes. Prenons mon orange favori, il peut être exprimé... | Therefore, color is a mix of red, green et bleu and these components are often displayed in various forms. Let's take my favorite orange, it can be written... }} ¶

• {{En pourcentages :|As percentages:}} 100%, 60%, 0%, {{donc 100% rouge, 60% vert et 0% bleu|meaning 100% red, 60% green and 0% blue}}.
• {{En ratios :|As ratios:}} 1.0, 0.6, 0, {{les ratios sont entre 0 et 1 et sont plus mathématiques que les pourcentages| ratios are between 0 and 1 and are more mathematical than percentages}}.
• {{Avec des entiers entre 0 et 255 :|With integers ranging from 0 to 255:}} 255, 153, 0 {{vu que|because}} 153 = 60% 255 = 0.6 × 255 = 60 / 100 * 255.
• {{Avec des entiers écris en hexadécimal :|With integers written in hexadecimal:}} ff, 99, 0 {{vu que 255 vaut|because 255 is}} ff {{en|in}} {{hexadécimal|hexadecimal}} {{, 153 vaut|, 153 is}} 99 {{et 0 vaut 0|and 0 is 0}}. {{On note souvent les trois entiers ff, 99, 0 en attaché sur 6 caractères avec un # devant, comme ceci : #ff9900.|Often we write the 3 integers ff, 99, 0 attached on 6 characters with a # in front, like this: #ff9900.}}
• {{Et quand les deux chiffres hexadécimaux sont les mêmes pour les trois composantes on ne les répète souvent pas :|And when both hexadecimal digits for the three components are equal, one does not repeat it:}} #f90.

Exerci{{c|s}}e 5{{ |}}: {{ Deux carrés colorés | Two colored squares }}

{{ Essaie de dessiner ceci : | Try to draw this: }}

{{ Le lever de crayon via penup() sera utile pour séparer les deux formes | Lifting the pen using penup() will be useful to separate the two shapes }}

Exerci{{c|s}}e 6{{ |}}: {{ La maison en couleurs | House in color }}

{{ Ou bien tu peux colorier ta maison, la porte en rouge et le toit en vert ! | Or you can color your house, the door in red and the roof in green! }}

{{English here!|Français ici !}}

{{Sérieusement, qui a besoin d'une souris quand il édite du texte ?|Seriously, who needs a mouse when editing text?}} — Robert Vanden Eynde

{{La souris, c'est lent... Mais le pad ? C'est pire !|The mouse, that's slow... But trackpad? That's wooorse!}} — Robert Vanden Eynde

{{ Voici selon moi les raccourcis clavier les plus importants pour éditer du texte, ceux-ci marchent même sur Facebook, vous n'êtes pas obligé de les lire mais ça permet de coder super vite croyez-moi ! | Here is a list of the most useful keyboard shortcuts to edit text, those work even on Facebook, you don't have to read them but it's useful to write code very fast trust me! }}

{{English here!|Français ici !}} {{Tutoriel uniquement|Tutorial only}}

{{ Afin de réutiliser du code, on peut le mettre dans une fonction. Par exemple, je vais faire une fonction carre qui permet de dessiner un carré. | In order to reuse some code, we can put it in a function. For instance, I will write a function square that allows me to draw a square. }}

            def {{carre|square}}():
              fd(80)
              lt(90)
              fd(80)
              lt(90)
              fd(80)
              lt(90)
              fd(80)
              lt(90)
            

{{ Écris le code ci-dessus et puis la nouvelle instruction carre() sera disponible ! Écris le code ci-dessous ensuite. | Write the code above and then the new instruction square() will be available! Then write the code below. }}

            {{carre|square}}()
            lt(45)
            {{carre|square}}()
            fd(50)
            {{carre|square}}()
            

{{ On peut également mettre des paramètres à la fonction, grâce à ça on pourra faire varier une certaine partie du code, comme par exemple, la taille du carré. | We can also add parameters to the function, thanks to them we can vary some part of the code, like the size of the square. }}

            def {{carre|square}}({{t|s}}):  # {{t est la taille|s is the size}}
              fd({{t|s}})
              lt(90)
              fd({{t|s}})
              lt(90)
              fd({{t|s}})
              lt(90)
              fd({{t|s}})
              lt(90)
            

{{ Que l'on utilisera comme ceci : | We will use it like this: }}

                fd(100)
                {{carre|square}}(80)
                lt(45)
                {{carre|square}}(40)
                fd(50)
                {{carre|square}}(60)
            

{{ Le paramètre t peut s'appeler comme on veut, | You can name the s parameter as you want, }} {{que ça soit|like}} {{t|s}}, {{taille|size}}, x, a {{ou|or}} {{taille_cote|side_size}}.

{{ On peut mettre autant de paramètres que l'on veut, séparés par des virgules, comme def carre(taille, couleur). | We can add all the parameters we want, separated by commas, like def square(size, the_color). }}

{{ On peut faire des opérations mathématiques comme 50 + taille * 2 - (taille - 1), attention à la priorité des opérations ! | We can do some maths like 50 + size * 2 - (size - 1), be careful of the priority of operations! }}

{{ Un petit raccourci clavier pour décaler des lignes vers la droite : sélectionnez les lignes en questions et appuyez sur | A little keyboard shortcut to shift lines to the right: select the lines you want to shift and hit }} Tab ↹. {{ L'opération inverse est disponible via | The reverse operation can be done via }} ⇧Shift+Tab ↹.

Exerci{{c|s}}e 8{{ |}}: {{ Modèles de maison | House patterns }}

{{Le code de la maison se trouve ici, met le dans une fonction à deux paramètres pour pouvoir effectuer une maison colorée en une ligne : | You can find the code of the house here, put in in a function with two parameters so that you can draw a house with one line: }}

                {{maison|house}}(40, "red")
                {{maison|house}}(60, "blue")
            

{{ Les deux paramètres sont la hauteur et la couleur de la porte. | The parameters are the height and the color of the door. }}

{{English here!|Français ici !}} {{Tutoriel uniquement|Tutorial only}}

{{ Dans le code du carré, on avait quatre fois le même code à la suite : | In the code for drawing a square, we have four times the same code in a row }}

                fd(40)
                lt(90)

                fd(40)
                lt(90)

                fd(40)
                lt(90)

                fd(40)
                lt(90)
            

{{ Il existe une instruction qui permet de dire Répète 4 fois ce qui suit, c'est le for : | There exists an instruction that gives you the opportunity to say Repeat 4 times what follows, it's the for: }}

        for i in range(4):
          fd(40)
          lt(90)
        

{{ Attention à ne pas oublier le :, de passer à la ligne et d'écrire au moins une instruction. | Be careful to not forget the :, to enter a new line and to write at least one instruction. }}

{{ Quelle va être la différence avec le code suivant ? La seule différence est l'absence de quelques caractères espace mais ça change complètement le résultat. Teste le et comprends pourquoi le résultat affiché correspond bien au code. | What will be the difference with the following code? The only difference is the absence of few space characters but it changes the result a lot! Test it and understand why the rendered result corresponds to the code. }}

        for i in range(4):
          fd(40)
        lt(90)
        

Exerci{{c|s}}e 9{{ |}}: {{ L'hexagone | The hexagon }}

{{ Essaie de dessiner un hexagone, n'hésite pas à utiliser le for pour simplifier ton code ! | Try to draw an hexagon, do not hesitate to use the for to simplify your code! }}

Exerci{{c|s}}e 10{{ |}}: {{ Des triangles | Some triangles }}

{{ Fais une fonction triangles, qui va dessiner la forme suivante, ajoute les paramètres taille et couleur afin de pouvoir l'appeler comme ceci : | Write a function triangles, that will draw the following shape, add the parameters size and the_color in order to call it like this: }}

triangles(20, "red")

{{ Utilise les boucles et cette figure peut se faire en moins de 10 lignes ! | With the help of loops, this figure can be drawin in less than 10 lines! }}

Exerci{{c|s}}e 11{{ |}}: {{ Le village | The village }}

{{ Utilise les boucles et ta fonction maison pour créer facilement un village à deux rues comme ceci : | Use loops and your house function to create easily a village with two streets like this: }}

{{English here!|Français ici !}} {{Tutoriel uniquement|Tutorial only}}

Exerci{{c|s}}e 12{{ |}}: {{ Votre œuvre d'art | Your masterpiece }}

{{ Dernier défi pour ce cours, laisse aller ton imagination pour créer un beau dessin ! | Last challenge for that course, let your imagination go to create a nice drawing! }}

{{ Voici le mien, il utilise ma fonction triangles plusieurs fois ! | Here's mine, it uses my function triangles multiple times! }}

{{ Voilà, nous avons appris à utiliser turtle en programmant en langage python. | It's over, we have learned to use turtle by programming in the python language. }}

{{ Il existe d'autres commandes turtle. | There exist other turtle commands. }}

{{ Programmation de jeux vidéos | Videogames programming }}

{{ Dès la 3ème secondaire, le parascolaire de programmation de jeux vidéos vous apprendra à faire de petits jeux 2D ! | Check here my videogames programming course to create some small 2D games! Currently the names of the files are in french only (I'm currently translating the content) but almost all words are almost the same in english (théorie is theory, exercice is exercise, etc.) }}

{{ Pour en savoir plus | To know more }}

{{ Voici un aperçu d'autres fonctionnalités turtle/python. | Here is an overview of other turtle/python functionalities. }}

{{ On peut créer plusieurs tortues (objets python) : | We can create multiple turtles (python objects): }}

            bob = Turtle()  # {{ou|or}} Pen()
            bob.shape("turtle")
            bob.color("blue")
            bob.forward(50)
            alice = Turtle()
            alice.shape("turtle")
            alice.color("green")
            alice.fd(100)
            

{{ Et créer des variables en fonction de la tortue. | And create variables dependent of the turtle. }}

            bob.d{{e|is}}placement = 5
            alice.d{{e|is}}placement = 10

            def {{avancer_en_traits|forward_with_dashes}}({{tortue|the_turtle}}):
              for i in range(3):
                {{tortue|the_turtle}}.penup()
                {{tortue|the_turtle}}.fd({{tortue|the_turtle}}.d{{e|is}}placement)
                {{tortue|the_turtle}}.pendown()
                {{tortue|the_turtle}}.fd({{tortue|the_turtle}}.d{{e|is}}placement)

            bob.lt(90)
            alice.lt(90)
                    
            {{avancer_en_traits|forward_with_dashes}}(bob)
            {{avancer_en_traits|forward_with_dashes}}(alice)
            

{{ Ou créer des listes de tortues : | Or create list of turtles: }}

            {{liste|the_list}} = [bob, alice]
            charles = Turtle()
            charles.shape("turtle")
            charles.d{{e|is}}placement = 7
            liste.append(charles)  {{# ajouter à la fin|}}

            for {{tortue|the_turtle}} in {{liste|the_list}}: # {{ pour chaque tortue dans la liste | for every turtle in the list }} 
              {{ancienne_couleur|previous_color}} = {{tortue|the_turtle}}.color() #{{ on sauve la couleur | we save the color }}
              {{tortue|the_turtle}}.color("blue")
              {{avancer_en_traits|forward_with_dashes}}({{tortue|the_turtle}})
              {{tortue|the_turtle}}.color({{ancienne_couleur|previous_color}}) #{{ on réapplique l'ancienne couleur | we restore the prevous color }}
            

{{ Ou encore créer des conditions pour changer de logique : | Or write conditions to change the logic: }}

            penup()
            fd(-100)
            n = 0
            for i in range(45):
              penup()
              fd(20)
              pendown()
              fd(20)
              n = n + 1
              if n == 4:
                right(90)
                color("red")
              else:
                if n == 7:
                  right(90)
                  color("blue")
                else:
                  if n == 9:
                    right(90)
                    n = 0
            

{{ Et finalement, on peut faire des fonctions récursives. | Et finalement, on peut faire des fonctions récursives : }}

            def {{arbre|tree}}(t):  # {{comment faire un arbre de taille t ?|how to make a tree of size t?}}
                if t < 10:  # {{si t est plus petit que 10...|if t is smaller than 10...}}
                    return  # {{on ne fait rien|let's do nothing}}
                
                if t < 20:
                    color("green")
                else:
                    color("brown")
                
                fd(t)  # {{on avance de t|let's go forward by t}}
                
                lt(30)  # {{on tourne|let's turn}}
                {{arbre|tree}}(t * 0.7)  # {{on fait un arbre plus petit|let's do a smaller tree}}
                rt(60)
                {{arbre|tree}}(t * 0.7)  # {{on fait un autre arbre plus petit|let's do another smaller tree}}
                lt(30)
                
                penup()
                fd(-t)  # {{revenons à notre position initiale|let's go back where we started}}
                pendown()

            speed(10)
            
            up()
            lt(90)
            fd(-200)
            down()
            
            {{arbre|tree}}(100)
            

Exerci{{c|s}}e 13{{ |}}: {{ Le village variable | The variable village }}

{{ Essaie de faire des tailles variables :| Try to make houses with variable sizes: }}

{{ Au revoir et pour toute question, je suis disponible par mail via robertvandeneynde[at]hotmail.com | Bye bye and for any question, I'm available by mail via robertvandeneynde[at]hotmail.com }}