Durée estimée: 45 minutes

Version textuelle

Présentation

Dans cette leçon, vous allez concevoir, réaliser et tester des algorithmes de dessin pour des formes simples. Par exemple, vous allez dessiner un visage avec deux carrés pour les yeux, un trait pour la bouche et un carré pour le visage. Nous allons utiliser des commandes simples, à la manière du langage Logo. Objectifs: Dans cette leçon vous allez apprendre à utiliser une commande Logo simple pour dessiner des formes; définir des procédures pour simplifier le processus de dessin. Dans notre implémentation de Logo, nous avons remplacé la tortue par un personnage Android. Les commandes que vous pouvez utiliser sont les suivantes : avancer : Cette commande déplace le personnage Android de 10 pixels vers l'avant (dans la direction où il est orienté). tourner : Cette commande fait tourner le personnage Android de 90 degrés vers la droite. leverCrayon et baisserCrayon : Ces commandes font lever ou baisser le crayon (le petit Android écrira en se déplaçant si le crayon est baissé et il n'écrira pas si le crayon est levé).

Introduction

Logo est un langage de programmation inventé dans les années 60 par Seymour Papert, principalement dans un but éducatif. Papert était convaincu que la meilleure façon d'apprendre est d'adosser la construction de nos connaissances des objets tangibles qui nous aident à créer nos propres modèles mentaux et à comprendre le monde qui nous entoure.
Dans cette leçon, les objets tangibles que vous allez construire, ce sont les algorithmes de dessin pour des formes simples.

Ce qui est le plus connu dans Logo, c'est sa tortue -- ou une image de tortue -- que l'utilisateur contrôle en lui disant comment se déplacer. En se déplaçant, la tortue laisse une trace, autrement dit elle dessine ! Comme le dessin que laisserait un animal qui rampe dans le sable. Logo peut être utilisé pour créer des algorithmes très sophistiqués, donc des dessins sophistiqués, comme celui à gauche.

Les commandes Logo

Le langage de programmation Logo comprend un jeu de commandes (ou primitives) qui controlent la tortue. Vous avec vu quelque chose du même genre dans les exercices Blockly Maze sur les labyrinthes (cf. leçon 2.6 : Si vous n'avez pas eu le temps, essayez, c'est amusant et instructif).
Prises ensemble, ces commandes constituent une abstraction – ou un langage – pour dessiner des formes.

Dans cette leçon, nous avons créé des abstractions pour dessiner des formes, mais ce sont des abstractions de niveau assez faible, et assez peu pratiques. Pendant que vous les utliserez pensez à ce que vous pourriez faire pour améliorer ce langage de dessin. en proposant des abstractions de meilleur niveau, plus pratiques et plus puissantes pour dessiner.

Tutoriel

Pour démarrer, ouvrez App Inventor dans un onglet séparé avec le modèle Logo 1 et suivez les instructions des tutoriels. Quand le projet App Inventor s'ouvre, vous verrez, des blocs assez nombreux sous leur forme "réduite" (c'est à dire plusieurs blocs compactés dont on ne voit plus que le premier).  N'OUVREZ PAS ET (surtout) NE MODIFIEZ PAS CES BLOCS!

Vous pouvez suivre le tutoriel vidéo ou cliquer ici si vous préférez le lire.

 

Exercices

Avant de commencer ces exercices, utilisez le bouton "Enregistrer le projet sous ..." (dans l'onglet Projets) et choisissez comme nom Logo1 (ou LogoV1 comme indicatif de la version). Pour cet exercice, avant de commencer à coder votre solution, ça serait bien de commencer par écrire le "pseudoCode" de votre programme sur un papier, puis d'en discuter avec votre partenaire (dans les groupes de programmation à deux).
Vous verrez que ça vous sera très utile, même si ça n'est pas évident au début.

1. Téléchargez et imprimez cette feuille ou utilisez un papier à carreaux pour concevoir les algorithmes des exercices qui suivent.
2. Réalisez le codage du gestionnaire d'évènement (event andler) de "BoutonDeDessin.Clic" selon les indications ci-dessous. Puis testez l'application sur votre appareil. Quand vous cliquez sur le bouton de dessin, un carré de 10 par 10 doit se dessiner. C'est un peu petit ! Vous devrez peut-être devoir cacher le petit Android pour bien le voir.
   
3. Concevez à présent un algorithme pour dessiner un carré de 20 par 20 (pixels).
   Remarque : Concevoir un algorithme, ce n'est pas la même chose que le programmer. Vous allez d'abord écrire le pseudocode et le vérifier avec votre partenaire de programmation. Une partie de la conception consiste également à clarifier comment le programme va se dérouler. Par exemple en vous mettant à la place du petit Android qui parcourt pas à pas les instructions de l'algorithme. Vérifiez de cette manière ce que ça va donner. Faites l'exercice avec votre partenaire en alternant celui qui fournit le pseudocode et celui qui joue le rôle du petit Android qui exécute les instructions.
   Lorsque vous avez vérifié que votre conception est correcte avec un pseudocode clair et valide, passez à sa réalisation en modifiant le code de l'évènement "BoutonDeDessin.Clic".
   
4. Faisons à présent un peu d'abstraction. Un avantage c': vous pourrez sauvegarder tous vos algorithmes pour les réutiliser dans les prochains exercices. Définissez une procédure appelée carréDe20 avec les blocs de code de dessin d'un carré de 20 par 20. Puis modifiez le gestionnaire d'évènement BoutonDeDessin.clic pour qu'il appelle cette procédure. Suggestion pour anticiper la suite : Il vaut mieux que cette procédure (de même que les autres procédures que vous allez créer) se terminent en laissant - à la fin du programme - le petit Android dans la même configuration qu'au départ, c'est à dire au même endroit et dans la même direction (si vous ne le faites pas, vous aurez des difficultés pour maîtriser l'enchainement de plusieurs procédures).

   Abstraction Procédurale : L'utilisation de procédures est une forme de l'abstraction procédurale. La procédure que vous définissez cache - pour celui qui l'utilise - les détails de l'algorithme, et le remplace par un nom (carréDe20) que l'on appelle à chaque fois que l'on a besoin de cette procédure.

   Une bonne raison pour apprendre maintenant l'utilisation des procédures, c'est que vous devrez les utiliser pour résoudre d'autres problèmes. Par exemple, dans la suite ce cette leçon, pour dessiner un visage. Dans le langage Logo, commme dans les autres langages, la définition de procédures est une manière d'étendre le langage. Par exemple, maintenant que vous avez écrit la procédure carréDe20 vous pourrez la réutiliser exactement comme les commandes initiales du langage.

5. Concevez un algorithme pour dessiner un carré de 40 par 40. Puis réalisez cet algorithme sous forme de procédure appelée carréDe40 qui dessine un carré de 40 par 40. Ensuite, modifiez le gestionnaire d'évènement BoutonDeDessin.clic pour qu'il appelle cette procédure.

   INDICE: Pour simplifier cet algorithme, utilisez un bloc de contrôle pour chaque (ou 'for each' en anglais) pour simplifier cet algorithme. Cette commande est une boucle qui permet de répéter les commandes nécessaires pour dessiner un carré (en l'occurence répéter 4 fois le dessin d'un côté avec une rotation de 90°à la fin).

6. Définissez une procédure nommée ligne40 qui dessine une ligne de longueur 40. Vérifiez que cette procédure fonctionne bien en l'appelant depuis le gestionnaire d'évènement BoutonDeDssin.clic.
7. Remaniez le code de votre procédure carréDe40 pour qu'elle utilise une boucle pour chaque (for-each), ainsi que la procédure ligne40 dans le dessin du carré de 40 par 40. Comme nous l'avons vu plus tôt, le remaniement (refactoring en anglais), ou le retrofit ou le re-engineering du code veut dire que l'on met à jour le code, sans changement notoire des fonctionnalités de l'application. Testez le bon fonctionnement de votre nouvelle procédure carréDe40 en l'appelant depuis le gestionnaire d'évènement BoutonDeDessin.Clic.
8. Concevez un algorithme pour dessiner un visage avec un grand carré pour la tête, deux petits pour les yeux et une ligne pour la bouche, comme ci-dessous. Concevez et réalisez les autres procédures qui peuvent vous aider à simplifier le problème, par exemple "dessiner la tête", "dessiner les yeux", etc. Faites bon usage des boucles dans vos algorithmes.
   

   Concevez d'abord, codez ensuite : Cet algorithme va être sensiblement plus complexe que tous ceux que vous avez déjà réalisés. Vous devrez utiliser la commande (ou procédure) CrayonLevé pour les déplacements sans dessiner, et vous devrez prévoir de combien avancer et dans quelle direction pour dessiner les yeux et la bouche au bon endroit. Il vous faudra construire et tester votre algorithme sur papier ou au tableau avant de commencer à le programmer. Utilisez le papier a carreaux ou le modèle proposé pour calculer les distances.

   Une fois que vous avez terminé et vérifié votre conception, avec le pseudocode, réalisez le sous forme d'une procédure appelée "DessinerVisage". Puis testez votre code pour vérifier que ça marche comme prévu.
   Mettez une copie d'écran dans votre Portfolio.

   Voici le plan à suivre :

   • Commencez par dessiner un visage à l'échelle. Vous devrez décider combien de pixels représente chaque carré de votre papier : 5, 10 ?
   • A partir de ce modèle sur papier, écrivez avec un crayon et un papier les commandes pour dessiner le visage -- autrement dit, écrivez votre algorithme sur la feuille de papier elle même.
   • Codez votre algorithme pour "dessiner un visage" et testez le.
     Définissez une procédure nommée "DessinerVisage" et appelez là depuis le gestionnaire d'évènements BoutonDeDessin.clic. Continuez à tester et mettre au point vote algorithme jusqu'à ce qu'il dessine correctement le visage attendu.
   • Abstraction : Une fois que vous avez dessiné le visage avec succès,remaniez votre code pour faire une bonne utilisation des procédures pour décomposer de dessin avec une procédure pour chaque partie : la tête, l'oeil gauche, l'oeil droit, la bouche et les déplacements.
9. Remaniement/Retrofit décomposez la procédure dessinerVisage en procédures plus petites. Le code sera plus facile à comprendre quand on le lit. Voici par exemple un algorithme que vous pourriez utiliser :
   

   Pour dessiner Visage, faire: carréDe100 positionnerEtDessinerOeilGauche positionnerEtDessinerOeilDroit positionnerEtDessinerBouche revenirPointDeDépart

   Comme leurs noms le suggèrent, les sous-procédures comprendront la gestion du levé de crayon, du posé de crayon et des déplacements pour positionner les yeux et la bouche au bon endroit et pour revenir au point de départ (en bas à gauche du visage).
   Rappel : Dans l'idéal, vos algorithmes - après avoir terminé le dessin - doivent remettre le personnage Android dans l'état où il était au départ, c'est à dire au même endroit avec la même orientation.

Quelques Solutions & indices

 

Auto-contrôle