Version textuelle

Introduction

Dans la leçon précédente sur Logo vous avez développé des algorithmes pour des formes simples. Le dessin de ces formes a parfois été difficile, en particulier le dessin du visage, car le niveau d' abstraction du jeu de commandes (Logo) utilisé, est faible et assez rigide.

Par exemple, la commande avancer permet seulement de se déplacer de 10 pixels, et la commande tourner permet seulement de tourner d'un angle de 90 degrés. Avec ces commandes le dessin d'un carré de 100 pixels de côté est très fastidieux. Même si nous avons pu utiliser des boucles pour alléger ces algorithmes, il reste impossible de dessiner un triangle avec ce jeu de commandes.

Dans cette leçon, nous allons améliorer le niveau d'abstraction du jeu de commandes Logo en les rendant plus générales. Les premières améliorations porteront sur les fonctions associées aux commandes avancer(N) et tourner(D) :

• La commande avancer(N) va permettre d'avancer de N pixels.
• La commande tourner(D) va permettre de tourner à droite de D degrés.

N et D sont des "paramètres" (ou des arguments) de la fonction avancer ou tourner. Un paramètre est une variable utilisée pour transmettre des données à une procédure. Un exemple simple va nous permettre d'illustrer les avantages apportés par l'utilisation de paramètres.

Dans la version précédente de notre application, il fallait 4 instructions pour avancer de 40 pixels, chacune faisant avancer le personnage de 10 pixels:

avancer avancer avancer avancer

Avec le nouveau jeu de commandes, pour avancer de 40 pixels nous transmettons la valeur 40 à la procédure avec le paramètre. Donc, avancer de 40 pixels ne nécessite qu'une seule instruction:

avancer(40)

La version précédente de la commande avancer() était très spécifique. La nouvelle version est plus générale, grace à l'ajout du paramètre. Au lieu d'avancer de 10 pixels à chaque fois, elle permet d'avancer d'un nombre quelconque de pixels avec un seul appel, en indiquant simplement la distance dans la valeur du paramètre.

Les mêmes remarques sont valides pour la procédure tourner(). La version précédente était trop spécifique, et permettait seulement de tourner de 90 degrés. La nouvelle version, avec son paramètre, permet de tourner d'un nombre de degrés quelconque.

L'ancienne et la nouvelle version des procédure Logo, sont toutes les deux des abstractions. Mais le niveau d'abstraction de la nouvelle version est plus élevé, et elle est plus puissante.

En règle générale, plus une procédure (ou une abstraction) est générale, meilleure elle est..

Présentation de cette leçon

Dans cette leçon vous allez concevoir, réaliser et tester des algorithmes pour dessiner des formes complexes avec les commandes Logo. Par exemple, vous aller écrire un programme pour dessiner des formes comme la fleur illustrée à gauche. Objectifs: vous allez apprendre à : utiliser les commandes Logo pour dessiner des formes; ajouter et utiliser des paramètres dans vos procédures; définir vos propres procédures et abstractions, pour dessiner des formes plus complexes. Pour ce jeu d'exercices nous utiliserons un jeu de procédures ou d'abstractions plus puissantes pour avancer et tourner: La commande avancer(N) déplace le personnage Android de N pixels. La commande tourner(D) fait tourner à droite le personnage Android de D degrés.

Pour commencer, ouvrez le canevas Logo2 dans un onglet séparé et suivez les indications du tutoriel qui suit.
Vous pouvez aussi cliquer ici pour lire le tutoriel.

Exercices

Pour ces exercices, avant de coder vos algorithmes et vos procédures dans App Inventor, commencez par concevoir votre algorithme en l'écrivant sous forme de pseudocode. Ensuite vérifiez cette conception en déroulant mentalement chaque étape du pseudo-code. Faites le à deux avec votre partenaire.

0. Prenez une page quadrillée ou téléchargez et imprimez celle-ci pour concevoir vos algorithmes dans les exercices qui suivent.

1. Dessiner un carré :
Avec un algorithme basé sur une boucle 'pour chaque' (ou for-each) utilisée ci-dessus pour dessiner un carré, définissez une procédure appelée dessinerCarre(L) qui dessinera un carré de côté L où L est la longueur du côté. Pour vérifier votre algorithme, vous devez appeler la procédure à partir du gestionnaire d'évènement (handler) BoutonDessiner.Clic.

NOTE #1: Dans App Inventor (et la plupart des autres langages de programmation) le choix du nom du paramètre n'a pas de signification pour l'ordinateur lui même. Le choix est libre, mais il vaut mieux le choisir pour que le nom corresponde au contenu , de manière à ce que vous sachiez ce qu'il y a dedans quand vous lisez le programme(ou quand quelqu'un d'autre le lit).
Par exemple, vous pouvez utiliser dessinerCarre comme nom de procédure et L ou taille comme nom de paramètre.

NOTE #2 en particulier pour les utilisateurs francophones:
Il vaut mieux éviter les caractères accentués comme 'dessinerCarré' pour les noms de variables et les noms de fichiers.

NOTE #3 - autres règles courantes et bonnes pratiques:
Dans beaucoup de langages de programmation, le nom d'une variable ne doit pas commencer par un chiffre ni par un caractère réservé comme $ %, ... et il vaut mieux éviter les caractères accentués comme dans 'dessinerCarré' pour les noms de variables et les noms de fichiers. Dans la pratique, commencez le nom de variable par une lettre (de préférence une minuscule) ou un _ (caractère de soulignement en dessous du 8) et utilisez des majuscules au début de chaque nouveau mot dans la suite du nom, par exemple : 'tailleDuCarre'. C'est plus facile à lire.
Par convention, les majuscules sont plutôt réservées aux constantes et/ou (pour App Inventor) à de svariabels qui ne changent pas, par exemple SCREEN_WIDTH.

2. Dessiner un triangle :
Commencez par faire la conception à la main, sur une feuille -- Combien de fois doit-on faire tourner le personnage ? Comme c'est une répétition, vous pouvez utiliser le bloc de commande pour-chaque (for-each) dans votre algorithme. Combien de fois faut-il répéter ici ? Une fois que vous avez écrit l'algorithme sur papier, codez cet algorithme dans App Inventor et vérifiez le. Vous aurez peut-être besoin plus tard de cet algorithme pour dessiner des triangles, donc faites-en une procédure avec un paramètre. Que doit représenter de paramètre ?

3. Dessiner un pentagone régulier (polygone de 5 côtés et 5 angles de même valeur):
De nouveau, commencez par la conception à la main et sur papier -- combiende fois doit-on tourner pour un pentagone ? Puisque c'est encore une répétition, utilisez le bloc de commande pour-chaque (for-each). Combien de fois faut-il répéter ici ?
INDICE: Pour dessiner un carré il fallait tourner 4 fois de 90 degrés, soit 360 degrés au total. Comment peut-on réutiliser ou modifier cette règle pour un pentagone ?
Vous aurez peut-être besoin plus tard de cet algorithme pour dessiner des triangles, donc faites-en une procédure avec un paramètre. Que doit représenter de paramètre ?

4. (programmation avancée) généralisation aux polygones réguliers :
Les carrés et les pentagones sont des cas particulier de polygones réguliers et de polygones en général. Un polygone est une surface fermée à plusieurs côtés. Un carré est un polygone de 4 côtés, dont les côtés et les angles sont égaux. Un pentagone est un polygone à 5 côtés. Si vous pouvez définir une procédure polygone(N) où N est le nombre de côtés, vous pourrez l'utiliser pour dessiner un carré, un pentagone, un hexagone (6 côtés), un octogone (8 côtés) ou un polygone avec encore plus de côtés qui va finir par ressembler à un cercle (36 côtés ?).
Alors essayez. Bravo si vous y arrivez, ça vous rendra service.

INDICE n°1 : Il vous faudra 2 paramètres dans votre procédure, N et L, où N est le nombre de côtés (par exemple 4, 5, 6, etc.) et L la longueur de chaque côté.

INDICE n°2 : un polygone à 4 côtés implique de tourner de 90 degrés à chaque fois, soit 360/4 degrés. et un polygône à 5 côtés implique de tourner de 72 degrés à chaque fois, soit 360/5 degrés, ...

Vérifiez votre procédure 'polygone()' en dessinant un hexagone (6 côtés) et un octogone (8 côtés). De nouveau vous devrez appeler votre procédure depuis le gestionnaire d'évènement (handler) BoutonDessiner.Clic.

5. Utilisez votre procédure dessinerPolygone() pour dessiner un cercle :
Définissez une procédure dessinerCercle dans laquelle vous appelez dessinerPolygone(N,L) avec les valeurs adéquates des paramètres. Cet exercice va nécessiter quelques essais pour mettre au point le nombre de côtés et la longueur de chaque côté. Est-ce qu'un polygone à 36 côtés a l'air d'un cercle ? (NOTE: si vous voulez que la forme dessinée tienne dans la fenêtre visible, il vous faudra réduire la longueur des côtés à proportion de l'augmentation du nombre de côtés.

6. Dessinez une fleur en répétant le dessin d'un carré et en tournant à chaque fois d'un certain nombre de degrés. (NOTE: Pour changer la couleur du trait vous pouvez utiliser la propriété couleur de dessin du composant Canvas. . La modification de la variable globale penColor, modifiera cette variable mais n'aura aucun effet sur la couleur de dessin : c'la propriété canvas.couleur de dessin qu'il faut modifier.)

7. Dessinez une fleur avec des pétales qui manquent. INDICE: Utilisez un bloc si/Sinon (if/else) et un test sur variable aléatoire pour dessiner le carré uniquement un pourcentage de fosi dans la boucle.

8. Concevez et dessinez vos propres dessins, par exemple des fleurs, des spirales, des étoiles. Vovii par exemple un dessin en forme de fleur qui est obtenu en répétant le dessin d'un cercle en le faisant tourner :

Ajouter des commentaires au code

Un aspect essentiel dans tout langage informatique, dont App Inventor, est la possibilité d'ajouter des commentaires au code. Un commentaire est un texte qui n'est pas exécutable, que l'on peut ajouter au programme pour faciliter la compréhension, pour clarifier et pour documenter le code. L'ajout de commentaires au code est une pratique habituelle des programmeurs pour aider les autres (ou eux mêmes) à comprendre le code.

Avec App Inventor, tous les blocs qui ne sont pas affichés sous leur forme 'réduite' permettent l'ajout de commentaires. Pour ajouter un commentaire faites un clic-droit sur le bloc et sélectionnez l'option Ajouter un commentaire. Ceci ajoutera au bloc un petit icône en forme de cercle bleu, avec un point d'interrogation, (comme dans le bloc ci-dessous).

Pour ajouter ou modifier le commentaire, cliquer sur l'icône bleu et entrez votre commentaire, comme ci-dessous :

Bonnes pratiques pour l'ajout de commentaires

Un bonne pratique à suivre est d'ajouter des commentaires dans les cas suivants :

• Documenter les procédures que vous réalisez, comme das l'exemple ci-dessous.
• Documenter les algorithmes compliqués ou dont le contenu n'est pas évident quand on lit le code.

A FAIRE : Avant de quitter ce projet (ou cette leçon), revenez aux procédures que vous avez écrites et ajoutez en commentaire, une description des blocs de chaque procédure.

Solutions

Auto-contrôle

Exemple de questions posées à l'examen de fin d'année