Chapitre N° 4, Titre : On commande la Tortue.
Le Canvas et la Tortue, commandes d’exécution.
Nous allons étudier en détail les commandes que l’on peut donner à la Tortue sur le Canvas.
Avant ce faire, terminons rapidement notre découverte du Canvas. Oui on peut en modifier la taille avec l’ordre CANVASSIZE (X, Y).
Comme on peut aussi lui donner une couleur de fond avec CANVASCOLOR (R,V, B) pour la couleur ; on se souvient d’un ordre similaire pour le crayon PENCOLOR (R, V, B).
Nous verrons bientôt l’usage de l’outil (TOOLS COLORPICKER), qui permet d’ajuster la couleur désirée, puis de retourner sa valeur dans le source.
N.B.
Toutes les commandes possèdent une abréviation, je vous les donnerais
plus tard dans un tableau qui les récapitulera toutes, mais aujourd’hui
pour une meilleure compréhension nous travaillerons avec les commandes
« natives ».
Il
faut donc donner des « ordres » à notre serviteur Tortue pour que
celle-ci fasse la moindre action. Comme toujours en informatique la
Tortue ne fera que ce que vous lui demanderez. Si le résultat vous surprend ou déçoit, vous avez du commettre une « mistake ».
La Tortue peut bouger, cela nous l’avons vu avec la création de notre petit carré de 75 pixels de coté.
forward nb, la Tortue avance du nb de px
backward nb, la Tortue recule de nb px
turnleft nb, la Tortue tourne à gauche de nb degrés
turnright nb, la Tortue à droite de nb degrés
direction nb, la Tortue se déplace dans la direction active de nb dégrés
getdirection, retourne l’angle actif que fait la Tortue par rapport à 0°
center, la Tortue va au centre du Canvas
go X, Y la Tortue se positionne dans son repère orthonormé
gox, la Tortue ne se déplace que sur l’axe des X, de X px
goy, la Tortue fait de même sur l’axe des ordonnées de Y px
getx retourne la position de la Tortue par rapport à l’axe des abscisses
gety fait la même chose pour le haut du Canvas (ordonnée)
N.b.
Center et les ordres go, gox, goy, n’entraînent aucun traçage sur le
Canvas. Ils agissent comme si l’attribut du pinceau était positionné à
« UP »
Exercice n°1.
Nous allons reprendre notre exemple de carré et essayer d’en construire un second au milieu du premier.
Pour
ce faire il faudra se positionner (x, y) avec des valeurs supérieures à
x0, y0, valeurs de l’abscisse et de l’ordonnée de départ.
Il
faudra en second faire des déplacements inférieur à 75 px et si on veut
être symétrique des deux cotés il faudra donc réduire le nombre de px
de 2 fois la distance entre x et x0, idem pour y et y0.
Ce n’est peut-être pas clair. Il faut réfléchir et faire une bonne analyse du problème avant de se jeter sur l’écriture du code.
Je vous joins le code de départ actuel, éventuellement mettre à jour le votre (canvassize 300, 300 et cavascolor 220, 220, 220)
reset # remise à zéro du Canvas
canvassize 300, 300 # nouvelle taille du Canvas
canvascolor 220, 220, 220
go 100, 180 # On positionne la tortue sur le Canvas
penwidth 2 # Epaisseur du pinceau
pencolor 100, 200, 130 # couleur du pinceau
spritehide
forward 75 # On avance de 75 pixels
turnright 90 # On tourne à droite de 90°
pencolor 100, 200, 200 # couleur du pinceau
forward 75
turnright 90
pencolor 100, 20, 230 # couleur du pinceau
forward 75
turnright 90
pencolor 100, 100, 100 # couleur du pinceau
forward 75
turnright 90
Solution de l’Exo1.
En
réalité à cet instant de nos travaux il suffit de dupliquer le carré du
début, de modifier l’abscisse (x) par rapport à celle initialement
posée, idem pour (y) ; puis de modifier la longueur du déplacement en
px.
Si on
augmente x de 5px, il faudra modifier le déplacement (forward) de 2x5 =
10px. Soit poser la commande : forward 75px – 10 (65px).
Bon je vous laisse voir pour l’adresse de y, le déplacement restera forcément de 65px puisque nous traçons un carré.
Si vous avez un décalage, réfléchissez ; peut-être que le point (x=0, y=0) n’est pas à l’endroit que vous croyez.
Vous pouvez interroger la Tortue avec getx et gety pour savoir où elle se trouve à un instant, notamment à la fin du script.
Voici ma copie.
Amusez vous.
Le chapitre 5 consistera à utiliser le petit outil qui nous donnera les couleurs, que ce soit pour le fond que pour le pinceau.
Chapitre N° 5, Titre : On complexifie le travail de la Tortue.
Le Canvas et la Tortue, exemples simples.
Nous
continuons avec notre petit PGM du chapitre 4. Là nous avons fait
réapparaître la Tortue, évidement elle se trouve à la fin du 4eme coté
du second carré !
Exercice.
Maintenant
nous allons continuer à mettre des carrés inscrits derrière celui qui a
les cotés « Oronge », mais nous ferons en sorte que l’épaisseur du
pinceau soit de 5px, c’est à dire qu’elle sera égale à l’augmentation de
l’abscisse à la diminution de l’ordonnée.
Ensuite nous inscrirons un 4eme carré pour lequel nous modifierons sa « direction ».
Cela ne vous paraît pas très clair, faites sans trop vous occuper des termes, bonne découverte.
Amusez vous.
Voici mon exemple.
Reprenons nos esprits.
Le second carré vous vous en souvenez, celui de couleur Orange, nous lui avons donné une épaisseur identique au premier (2px).
Pour cela nous avons du recalculer la longueur du coté et dupliquer le carré n°1.
Pour
le troisième rien de nouveau, si ce n’est que l’épaisseur du trait est
passé à 5px. Donc nouveau petits calculs et duplication des lignes du
carré après recalcul de l’abscisse et de l’ordonnée du départ.
Pour
la quatrième et dernier, là une petite nouveauté. En effet le carré a
une direction imposée (45°), la couleur aussi à changé,mais ça vous
connaissez maintenant, attention la direction a changé et maintenant tous les ordres seront exécutés avec cette valeur de 45° !
Voilà je vous laisse quelques temps expérimenter.
Chapitre N° 6, Titre : Optimisation du travail du chapitre N°5.
Optimisation du code.
Résultat à la fin de l’exécution du Pgm Chapitre n° 5
Qu’appelle t-on « Optimisation ». et pourquoi ?
De
tout temps les hommes ont essayé de créer des outils, puis des façons
de les utiliser, pour être toujours plus efficaces, améliorant sans
cesse à la fois l’outil et son utilisation, c’est pareil en
informatique..
Optimiser
du code informatique a pour but principal de rendre ce code
« efficace », c’est à dire d’en avoir une bonne « lisibilité », ainsi
qu’une logique plus rigoureuse. Le but étant de gagner du temps
« machine » et de ne pas trop gaspiller de ressources.
Comme pour le reste, ici aussi apprendre aux enfants à être économes.
Le programme du KT- CHP5 est très perfectible. De quoi s’agit-il ?
De construire 4 rectangles inscrits (les uns dans le autres, dont le dernier a une « direction » de 45°).
Pour
ce faire nous avons dupliqué les commandes de traçage de ligne, la
rotation angulaire et procédé ainsi en pivotant 4 fois de revenir au
point de départ. Ainsi nous avions un carré.
Peut-on optimiser ces commandes en une seule ?
Presque ! Nous allons ici découvrir ce que plus part dans les « grands outils de programmation » on nomme « fonction ».
Nous allons tout simplement indiquer à l’ordinateur sous Kturtle, ce que nous appelons : « carré ».
Ici
nous ferons un « carré » simple, juste avec les commandes de base de
création du carré. Une fois positionné à l’endroit voulu, nous
exécuterons la fonction « carré », dont l’appel sera simple. Nous allons
y aller tout doucement.
Petits rappels.
On appelle « carré » un polygone régulier de 4 cotés, dont la longueur
est unique (les 4 cotés étant égaux, les angles aussi de 90°, car on se
souvient que la somme des angles d’un quadrilatère est de 360°).
Analyse du problème.
Cela
signifie que pour dessiner le premier carré nous n’aurons besoin que de
son adresse de départ sur le Canvas (x=px ; y=px), l’épaisseur du
pinceau, sa couleur.
Pour
le second, il nous faudra calculer son point de départ (modifs des x et
y), l’épaisseur du pinceau et surtout calculer la nouvelle valeur du
coté.
Pour le troisième c’est pareil, pensez à l’épaisseur du pinceau.
Pour le quatrième la difficulté vient du fait qu’il faut penser à modifier la direction.
Que faut-il faire ?
Dans
cette exemple nous allons apprendre beaucoup de choses, aussi nous
allons avancer pas à pas et nous modifierons le code au fur et à mesure
de notre étude ; n’ayez pas peur, cela pourra vous apparaître compliqué
pour obtenir le même résultat.
Pourtant ce que vous apprendrez ici est fondamental.
Voici le résultat avec un début d’optimisation.
Reprenons nos esprits.
Nous
avons un résultat presque identique à l’écran du début ; mais le
premier carré n’a pas de couleur ! En regardant le code vous allez voir
que nous avons créé « quatre » carrés (carr1, carr2, carr3, carr4), qui
sont identiques !
Est-ce normal ?
Non bien sur. Mais c’est pour que vous compreniez mieux, car dans notre
petite fonction, nous aurions pu y mettre des éléments de chaque carré,
par exemple, l’épaisseur du pinceau, la couleur du coté et même, mais
nous verrons cela plus tard, du code spécifique (avec des tests pour
épaisseur du pinceau, couleurs des cotés, calcul de la longueur du coté,
…..).
Nous allons relancer le Pgm en utilisant qu’une fonction « carre ». Qui contiendra les éléments de base de la création d’un carré c’est à dire : tracer 4 fois le coté « repeat » en tournant ici à droite (turnright 90).
En trois lignes nous avons exprimé ce qu’était un carré.
Vous
avez sans doute observé aussi de drôles de signes « vert » qui
encadrent la fonction, ils sont très important et sont « ouvert ou
fermé » deux à deux, ils délimitent les éléments ou blocs de la
fonction.
learn carre $x {
repeat 4 {
forward $x # On avance de nb pixels en fonction du carré à dessiner
turnright 90
}
}
Dernière découverte de notre exemple, « la variable », ici $x qui représente la longueur du coté.
Voici le résultat de l’utilisation de la seule fonction « carre ».
On
a créé une fonction CARRE que j’appelle 4 fois, mettant devant chaque
fois les paramètres de longueur, couleur, épaisseur du pinceau,
correspondants à chaque carré.
La
« fonction » est constitué donc de son nom et ici d’une valeur qui
change correspondant à la longueur du carré que nous traçons.
On commence réellement a optimiser le programme.
Que faut-il retenir des chapitres 4 à 6 ?
On a vu apparaître la notion de « fonction » permettant de remplacer de nombreuses lignes de code
On voit aussi apparaître une autre notion importante : la « variable », petit conteneur portant une valeur
Dans
les chapitres suivants, nous allons manipuler et aussi approfondir les
notions de fonctions et de variables, qui sont la base de ce langage,
avec lequel nous pourrons réaliser de petites choses intéressantes qui
j’espère ouvriront chez les enfants et les plus grands, la curiosité
simple et informatique.
Bon travail !
Les chapitres se trouvent sous une page Facebook de groupe qui est :
facebook.com/groups/322841393132104
peire.martinez@gmail.com
