A) Introduction
Et si Python n’était pas la panacée ? C’est en tout cas ce qu’écrit Patrice Debrabant dans le N°59 (voir article) où il propose le langage de scripts de CaRMetal comme alternative à Python au lycée.
Malgré l’intérêt de ce langage de scripts et, bien sûr, de la possibilité de travailler dans un environnement de géométrie dynamique, je n’abonderai pas dans son sens : selon moi, c’est en effet une très bonne chose qu’un langage soit fortement encouragé par le Ministère de l’Education Nationale, que ce soit Python ou un autre d’ailleurs, car cela permet d’envisager une continuité pédagogique totalement absente des débats depuis la mise en place de la réforme de 2009. Et puis, à qualités pédagogiques équivalentes, je préfère un langage usuel (Python) à un langage plus confidentiel [1].
Par contre, tout comme Patrice Debrabant, je crois à l’intérêt de combiner algorithmique et géométrie. Seule la nature du support algorithmique diffère : la programmation sera ici visuelle et non textuelle. Pour y parvenir, les blocs seront traduits sous forme textuelle puis envoyés au serveur DGPad qui les exécutera.
Certes, DGPad permet aussi de faire de la programmation visuelle. Mais c’est dans un contexte de programmation événementielle associée à des objets spécifiques (points et expressions), alors que mon approche est plus classique : Blockly est simplement enrichi par des blocs permettant d’effectuer des traitements géométriques de base (dessiner des points, des cercles...). Ces blocs géométriques seront présentés dans la première partie de l’article à partir de plusieurs exemples.
Dans la seconde partie, j’introduirai également des blocs non géométriques correspondant aux expressions DGPad, une notion protéiforme permettant notamment de faire varier des paramètres par l’intermédiaire de curseurs. Des actions pourront leur être associées avec des blocs externes à DGPad, afin d’éviter que les élèves n’aient à se familiariser à DGPad, ce qui peut être chronophage. Et puis, autre raison expliquant ce choix, leurs enseignants ne connaissent pas nécessairement DGPad !
C’est pourquoi un des objectifs de l’article est aussi de leur faire découvrir ce logiciel en sortant des sentiers battus : il me semble en effet, sans en avoir la certitude évidemment, que ma vision de non spécialiste de DGPad peut amener un nouveau public d’enseignants du secondaire à s’y intéresser en pratique. Cela me conduira à aborder la programmation par blocs proposée par DGPad dans une troisième partie, avec notamment des dessins de tortues paramétrés par des curseurs.
L’extension DGPad est accessible à partir de mes pages professionnelles consacrées à Blockly (voir lien). Plusieurs exemples de cet article peuvent y être directement testés en cliquant sur les boutons de démonstration (« Démo 1 », « Démo 2 »...).
B) De CaRMetal à Blockly
Vue d’ensemble de l’interface
Dans cet article, je supposerai que les lecteurs sont familiers avec l’utilisation de Blockly. Si tel n’est pas le cas, je suggère la lecture d’un article d’introduction à SofusPy (consulter), qui rappelle plusieurs manipulations de base : création de variables (exemple 1), création de sous-programmes (exemple 3)...
Les trois premiers exemples de cet article peuvent d’ailleurs être repris tels quels dans l’extension DGPad, puisque les blocs utilisés sont communs aux deux extensions. Je reproduis ici le premier, mais dans l’interface de l’extension DGPad où l’on constate l’existence d’un menu spécifique à DGPad :
On retrouve les mêmes boutons que pour l’extension SofusPy :
- le bouton « Plier/Déplier » masque (ou montre) l’éditeur Blockly en fonction de son état initial (visible ou caché).
- le bouton « Exécuter » exécute le programme Blockly dans l’environnement DGPad qui apparaît alors, même si ici le programme n’a aucun caractère géométrique ; comme cela a aussi pour effet de masquer l’éditeur Blockly, il faudra cliquer sur « Plier/Déplier » pour le faire réapparaître.
- le bouton « Sauver » sauvegarde le programme Blockly dans dossier de téléchargement du navigateur, seul dossier autorisé pour des raisons de sécurité par le navigateur ; il est conseillé de déplacer ensuite le fichier ainsi sauvegardé dans un autre dossier.
- le bouton « Ouvrir » permet de récupérer un programme Blockly pouvant être stocké dans n’importe quel dossier du poste utilisateur ; il peut aussi être utilisé pour importer un fichier Scratch et le traduire en Blockly, avec des restrictions évidemment.
- le bouton « Editeur » permet d’accéder à un éditeur de texte dans lequel on voit la traduction en Javascript du programme Blockly, code qu’on peut éventuellement modifier puis exécuter.
L’éditeur textuel a ici un rôle marginal, contrairement à celui de SofusPy dont l’objectif principal est de faciliter l’enseignement de Python : en effet, comme l’illustre la section suivante, le code Javascript est « peu élégant » quand on introduit des objets géométriques.
Javascript dans CaRMetal et Javascript Dans DGPad
Pour être exécuté, un programme Blockly doit d’abord être traduit en Javascript, la traduction étant ensuite envoyée au serveur DGPad. Même si le propos de cet article n’est pas de s’attarder sur Javascript, j’en dirai néanmoins quelques mots dans cette section. Pour illustrer mes propos, je reprendrai (en les adaptant) des exemples de scripts CaRMetal d’un article du N°40 (consulter). Et dans les sections suivantes où je passerai à Blockly, je m’inspirerai de leur thématique.
Le premier, construisant l’orthocentre d’un triangle, a nécessité une adaptation mineure pour passer de CaRMetal à DGPad :
- Point("A",1,2) ;
- Point("B",-1,1) ;
- Point("C",2,-1) ;
- Segment("s1","A","B");
- Segment("s2","B","C");
- Segment("s3","A","C");
- Perpendicular("d1","s1","C");
- Perpendicular("d2","s2","A");
- OrderedIntersection("h1","d1","d2",0); // CaRMetal : Intersection("h1","d1","d2");
Il peut être testé en collant son code dans l’éditeur de texte de mon extension Blockly (éditeur accessible via le bouton « Editeur »), puis en cliquant sur le bouton « Exécuter ». Voici le résultat obtenu :
Le second exemple construit 5 rangées de 5 pions bleus :
Dans le code Javascript permettant de l’obtenir, les disques sont construits à partir de leur centre qu’il faut masquer afin de ne pas voir de petits cercles internes :
- var P= []; // liste de points
- var C= []; // liste de cercles
- var compt= 0;
- for (var j=-2; j<=2; j++){
- for (var i=-2; i<=2; i++){
- P[compt] = Point(i,j);
- C[compt]=Circle1(P[compt],0.44); // C[compt]=FixedCircle(P[compt],0.44);
- STL(P[compt],"h:1"); // SetHide(P[compt],true);
- STL(C[compt],"c:#00009A"); // SetRGBColor(C[compt],0,0,154);
- STL(C[compt],"o:0.5"); // SetFilled(C[compt],true);
- compt = compt + 1;
- }
- }
On peut noter que l’apparence des objets (masquage, couleur et opacité) est gérée de façon très différente en DGPad (STL) comparativement à CaRMetal (SetHide, SetRGBColor et SetFilled). L’introduction de listes n’est pas nécessaire, mais j’ai conservé l’esprit du programme CaRMetal initial qui introduisait une liste de points et une liste de cercles.
Exemple 1 : orthocentre d’un triangle
Voici le programme Blockly correspondant au premier exemple Javascript :
Deux blocs de styles ont été ajoutés pour faire apparaître le nom du point A et le colorier en rouge.
Exemple 2 : rangées de pions
Pour simplifier le programme Blockly correspondant au second exemple Javascript, on peut introduire un sous-programme paramétré par l’abscisse et par l’ordonnée du pion ainsi créé :
Comme le nom des objets (centres et cercles) ne peut être le même pour tous les pions, on utilise des blocs « fonctionnels » permettant au programme de choisir lui-même les noms. Le programme principal n’est alors plus qu’une formalité :
Et comme c’est trop facile, je propose une variante en alternant disques rouges et disques bleus :
- on peut aisément définir une procédure « pionRouge » en dupliquant la procédure « pion » (faire un clic droit sur la procédure, puis choisir « dupliquer ») et en changeant la couleur.
- il reste ensuite à utiliser la fonction « pair » dans le programme principal.
Une autre variante possible est de changer la forme des pions, par exemple avec des pions carrés :
Cette variante sera reprise dans la section D, en la traitant avec une tortue DGPad.
C) Programmation par blocs et curseurs
Equation du second degré
Pour faire découvrir à des élèves les expressions via la programmation visuelle, je suggère de commencer par leur proposer ces deux blocs, puis d’en observer les effets afin de les analyser :
Les élèves pourront facilement vérifier que le premier bloc fait varier le nombre « a » entre deux valeurs (les paramètres min et max), tandis que le second calcule et affiche l’expression algébrique « a*a-2 ». Un bouton de DGPad (en bas à droite) permet d’afficher les axes du repère et donc de comprendre que les paramètres x et y des blocs déterminent la position d’affichage des expressions.
Après cette mini-initiation, on peut demander aux élèves de s’en inspirer pour saisir à l’aide de curseurs les paramètres (a, b et c) du trinôme du second degré et calculer le discriminant. L’attendu est qu’ils soient capables, sans l’aide de l’enseignant, de produire quelque chose comme ceci :
Ensuite, on peut leur demander d’ajouter deux blocs pour calculer les racines de l’équation, sans se préoccuper de savoir si le discriminant est positif ou non :
Ce n’est en effet pas un problème pour DGPad lorsqu’on lui transmet ce programme visuel pour qu’il l’exécute : on voit apparaître « ??? » quand le discriminant est négatif. Un affichage de la courbe permet de vérifier graphiquement les résultats :
Une variante possible est de calculer et d’afficher le nombre de solutions :
Rangées de pions : version avec un curseur
Cet exercice a été abordé dans la section B, mais sans curseur pour faire varier le nombre de rangées :
Deux écueils doivent être contournés pour adapter les solutions de la section B :
- les sous-programmes Pion et PionRouge ne peuvent pas être utilisés dans une expression.
- les pions ne doivent pas être créés dans une expression, ce qui serait possible sans sous-programme, car ils seraient recréés chaque fois qu’on ferait varier le curseur.
Pour illustrer ce dernier point, on peut tester le programme suivant : si on fait décroître le curseur de 5 à 4, 4 nouveaux points seront créés sans que les 5 précédents ne soient effacés, si bien qu’on verra toujours 5 points.
Ces écueils peuvent être contournés en créant d’abord tous les pions (ici 9*9, 9 étant la taille maximale du curseur), avant d’introduire l’expression finale (« prog ») qui aura pour rôle de masquer ou d’afficher les pions.
La première étape est facile à réaliser, puisqu’on peut reprendre (en grande partie) le travail effectué dans la section B, la petite différence portant sur le nommage des pions qui doit être explicite, afin d’en permettre le masquage (ou l’affichage) à la seconde étape.
Dans une seconde étape, il reste à créer le curseur « n » et l’expression finale (« prog ») qui est évaluée chaque fois que n varie. Les pions dont l’abscisse et l’ordonnée sont inférieures ou égales à n sont affichés, tandis que les autres sont masqués.
D) Les tortues de DGPad
Introduction
La programmation par blocs de DGPad est un sujet très vaste, comme le souligne le tutoriel de l’IREM de Toulouse. Je ne ferai que l’effleurer par le prisme des tortues, un thème très présent au collège et donc propice pour amener un nouveau public d’enseignants à s’intéresser en pratique à DGPad. Et comme le thème des tortues DGPad est lui aussi un vaste sujet, de surcroît en constante évolution, je ne ferai que l’effleurer en associant tortues et curseurs afin de créer des figures dynamiques.
Avant de détailler plusieurs exemples, voyons d’abord comment comment accéder à l’environnement de programmation d’une tortue DGPad. C’est simple, mais un peu déroutant au départ car il faut d’abord créer un point : en effet, il ne peut y avoir de tortue sans point dans le monde un peu étrange de DGPad !
En cliquant sur l’icône en forme de puzzle, on voit alors apparaître un environnement Blockly comportant plusieurs onglets, dans lequel on choisira ici l’onglet « Tortue » :
Une particularité des tortues DGPad est qu’elles dessinent en temps réel : par exemple, dès qu’on ajoute un bloc « avancer 60 », on voit apparaître le segment correspondant.
Un exercice Scratch de cinquième : c’est bien mieux avec DGPad !
Récemment, on a posé l’exercice suivant (à chercher à la maison) au neveu d’un des membres du comité de rédaction de MathémaTICE :
Une tortue avance de 50 et tourne de 10 degrés, puis avance de 50 et tourne de 20 degrés, puis avance de 50 et tourne de 30 degrés… A l’aide de Scratch, déterminer quand la tortue recoupe sa trajectoire.
L’exercice peut être rendu plus ludique en résolvant le problème avec une tortue DGPad et un curseur faisant varier le nombre de segments. Pour cela, nous allons d’abord créer le curseur et le point hors de DGPad, ce qui n’est évidemment pas nécessaire pour des élèves habitués à utiliser DGPad :
Après l’exécution de ce programme, il reste à accéder à l’environnement de programmation de DGPad comme indiqué en introduction, puis à écrire le programme suivant :
La figure s’affiche en temps réel avec 8 segments, 8 correspondant à la valeur initiale du curseur « n ». Si on déplace le point avec un clic-glissé, on s’aperçoit que toute la trajectoire est translatée. Cela peut donner d’autres « envies ludiques », par exemple de faire pivoter la figure. Or, c’est relativement aisé à réaliser, en faisant intervenir un second point : donc, je montre comment faire dans cet article … tout en me gardant bien d’affirmer que c’est une activité algorithmique fondamentale à proposer aux collégiens !
Dans le programme, deux adaptations sont ensuite à effectuer : orienter initialement la tortue vers le second point, et avancer de la distance entre les deux points dans la boucle.
Il ne reste plus qu’à déplacer le point B :
Rangées de pions : encore !
Tout d’abord, voici comment créer une rangée de pions en alternant les couleurs :
Le passage à plusieurs rangées me semble trop compliqué pour le collège, car il ne suffit pas d’imbriquer les boucles, les déplacements d’une rangée à la suivante devant également être gérés :
E) Conclusion
Les textes officiels n’imposant pas Scratch au collège, pourquoi ne pas travailler avec d’autres environnements de programmation par blocs plus adaptés aux mathématiques et tout aussi ludiques ? Les curseurs de DGPad permettent même d’introduire une dose de programmation événementielle qui, si besoin était, pourrait être étendue par d’autres possibilités que je n’ai pas présentées.
Au lycée, la programmation par blocs dans un cadre géométrique n’a pas la même légitimité car le Ministère de l’Education Nationale encourage la programmation textuelle avec Python. Mais si on fait travailler les élèves avec SofusPy, une utilisation ponctuelle de l’extension DGPad est aisée à réaliser (interfaces similaires) et peut apporter un plus, comme le montre l’activité « équation du second degré » présentée dans l’article.
Et puis, que ce soit au collège ou au lycée, il n’y a pas besoin d’alibi algorithmique pour justifier l’utilisation d’un logiciel de mathématiques. Cela devrait être une évidence, mais l’introduction de l’algorithmique au lycée en 2009 a parfois été faite en dépit du bon sens en n’étant ni profitable à l’enseignement des mathématiques ni à celui de l’informatique : il y a par exemple des programmes de simulation trop sophistiqués qui pourraient avantageusement être remplacés par des commandes R, ce qui permettrait aux élèves de se concentrer sur l’essentiel, à savoir l’interprétation mathématique des résultats. A force de (faire semblant de) courir plusieurs lièvres à la fois...