Les nouvelles technologies pour l’enseignement des mathématiques
Intégration des TICE dans l’enseignement des mathématiques

MathémaTICE, première revue en ligne destinée à promouvoir les TICE à travers l’enseignement des mathématiques.

Geogebra et programmation par blocs

Patrick Raffinat s’intéresse aux apports de la programmation par blocs associée à GeoGebra. Il présente tout d’abord AlgoGGB, une extension de Blockly facilitant la programmation Javascript dans GeoGebra. Il l’adapte ensuite au contexte éducatif du collège en développant ScratchGGB, dont l’éditeur visuel est similaire à celui de Scratch 3.

Article mis en ligne le 22 juin 2020
dernière modification le 28 février 2024

par Patrick Raffinat

Cet article peut être librement diffusé à l’identique dans la limite d’une utilisation non commerciale suivant la license CC-by-nc-nd.

Le logiciel ScratchGGB est disponible en ligne sur les pages Blockly de l’IREM de la Réunion (lien).

Tous les articles de Patrick Raffinat dans MathémaTICE

A) Introduction

De nombreux articles sur l’apport de la programmation par blocs en géométrie dynamique ont été publiés dans MathémaTICE. Mais ils concernent DGPad et pas GeoGebra, un logiciel pourtant plus souvent utilisé par les enseignants du secondaire. Cela m’a donc donné envie de me pencher sur le thème « GeoGebra et programmation par blocs » et d’y consacrer un article.

Même s’il n’y a aucun composant de programmation par blocs dans GeoGebra, il est a priori envisageable de créer un outil externe par blocs : en effet, GeoGebra est interfaçable avec Javascript, et Javascript est le langage d’exécution utilisé par toute extension de Blockly. Ces caractéristiques ont d’ailleurs été exploitées par André Boileau, un professeur canadien, qui a développé un logiciel nommé AlgoGGB (voir lien) que je vais présenter dans la première partie de l’article.

Il est important de noter que la programmation par blocs d’AlgoGGB n’a pas pour objectif de faciliter l’enseignement du codage, mais de permettre à des utilisateurs de GeoGebra de réaliser des figures dynamiques avancées en produisant un code Javascript à insérer dans un fichier GeoGebra. En plus, le « quasi-monopole institutionnel » de Scratch dans le système éducatif français complique toute velléité d’utiliser AlgoGGB pour enseigner le codage dans un cadre mathématique. C’est pourquoi je présente dans la seconde partie de l’article ScratchGGB [1], une application que j’ai développée afin de permettre aux élèves de réaliser des figures GeoGebra à partir d’un éditeur de blocs similaire à celui de Scratch 3 [2].

B) Présentation d’AlgoGGB

Introduction 

A l’origine, André Boileau a développé une bibliothèque de procédures (nommée AlgoGGB) permettant de simplifier l’utilisation de Javascript dans GeoGebra (voir manuel utilisateur).

Ensuite, l’émergence de Blockly lui a permis de réaliser une interface externe par blocs (nommée « AlgoGGB visuel ») facilitant la création du code Javascript correspondant aux figures à construire dans GeoGebra. Cette interface est disponible en ligne, mais elle peut aussi être téléchargée. Une documentation pdf est également disponible, le tout étant accessible à partir de l’onglet « Blocs » du site d’AlgoGGB.

Avec cette version par blocs d’AlgoGGB, le code Javascript ainsi obtenu doit être recopié par l’utilisateur dans un fichier GeoGebra local : le programme Blockly ne peut donc pas être testé directement (par un clic sur un bouton) dans l’éditeur visuel d’AlgoGGB. C’est pourquoi A. Boileau a encore fait évoluer AlgoGGB, en proposant deux outils plus interactifs :

  • un éditeur de blocs permettant, avec des restrictions que j’expliquerai un peu plus tard, d’exécuter directement en ligne le code Javascript engendré (donc sans à avoir à le recopier dans un fichier GeoGebra local).
  • un éditeur textuel, dans lequel on peut recopier et modifier un code Javascript (a priori créé à partir de l’éditeur par blocs, même si ce n’est pas une obligation), code qui peut être exécuté en ligne (donc sans à avoir à le recopier dans un fichier GeoGebra local) ; A. Boileau en justifie l’intérêt pratique en expliquant que « l’éditeur mis à notre disposition par GeoGebra est assez rébarbatif ».

Ces deux nouvelles interfaces sont disponibles à partir de l’onglet « Nouveau » du site d’AlgoGGB. Des exemples de démonstration à tester sont également proposés (polygones emboîtés, carrés tournants, triangle de Sierpinski…).

Principe de fonctionnement

Quand on teste les différents exemples proposés (polygones emboîtés, carrés tournants, Sierpinski…), tout est « magique » : un clic sur un bouton de la page web permet de créer directement une figure à partir d’un programme par blocs (ou d’un programme Javascript). Mais au fait, ils sont où ces programmes GeoGebra ? Et puis, chacun sait que les prestidigitateurs ont des « astuces » pour que ça paraisse magique ! Donc, je vais détailler tout ça avec l’exemple des polygones, ce qui permettra de cerner les limites de l’approche, un peu moins automatique qu’il n’y paraît au premier abord :

A l’origine de ces deux figures, il y a un fichier GeoGebra stocké sur le site d’AlgoGGB :

  • le premier est constitué de la bibliothèque de procédures permettant de simplifier l’utilisation de Javascript dans GeoGebra, ainsi que de deux boutons (Tracer et Effacer).
  • le second est un peu plus complet, puisqu’il comporte aussi deux points et un curseur.

Chacun de ces fichiers est associé à une page web spécifique permettant de communiquer avec le serveur en ligne de GeoGebra. Dans les deux fichiers GeoGebra du site d’AlgoGGB, il n’y a bien sûr pas le code Javascript correspondant aux polygones, ce qui serait une arnaque : leur contenu initial est interprété par le serveur GeoGebra, puis la traduction en Javascript des programmes par blocs est envoyée au serveur GeoGebra pour qu’il construise et affiche les polygones emboîtés.

Supposons maintenant qu’on utilise l’éditeur de blocs d’AlgoGGB pour construire ces figures :

  • dans le premier cas, on obtient un code Javascript qui peut être testé (bouton « Exécuter ») en ligne.
  • dans le second cas, on obtient un code Javascript qui ne peut pas être testé en ligne : en effet, le fichier GeoGebra distant associé à l’éditeur visuel ne comporte que la bibliothèque Javascript d’AlgoGGB, et le programme par blocs suppose l’existence initiale de deux points et d’un curseur.

Donc, dans le second cas, il faudra revenir à l’utilisation initialement prévue par AlgoGGB :

  • construire (avec le GeoGebra local de l’utilisateur) une figure comprenant le curseur et les deux points, sans oublier d’y inclure le code de la bibliothèque AlgoGGB.
  • ajouter dans ce fichier local le code Javascript engendré par l’éditeur visuel.

Cela est détaillé dans la section qui suit, où un fichier de départ incluant le code de la bibliothèque AlgoGGB sera aussi fourni.

Exemple 1 : polygones emboîtés 

Voici un programme par blocs possible pour la figure statique (10 polygones emboîtés) :

Le programme est aisé à comprendre, si ce n’est le bloc fixant à deux le nombre d’objets qui peut surprendre : ces deux objets sont les boutons « Tracer » et « Effacer ». Pour obtenir une figure dynamique (avec un curseur et deux points mobiles à la base de la construction des polygones), il faut faire preuve de plus de persévérance, mais le jeu en vaut la chandelle et cela fournit un premier exemple significatif illustrant l’apport d’AlgoGGB. Comme la procédure « polygone » est la même, je ne la reproduis pas :

Ce qui est relatif au curseur « n » est entouré en bleu :

  • le curseur, à créer dans le fichier GeoGebra local par manipulations, est mis dans la liste des valeurs à surveiller : concrètement, cela signifie que la figure sera actualisée chaque fois que le nombre de polygones à construire changera.
  • la valeur du curseur est prise en compte dans la boucle « compter avec » : il y aura un polygone à n côtés, un polygone à n-1 côtés … et un polygone à 3 côtés.

Ce qui est relatif aux deux points P et Q est entouré en bleu :

  • P et Q sont mis dans la liste des points à surveiller : concrètement, cela signifie que la figure sera actualisée chaque fois qu’on déplacera un des deux points.
  • les autres instructions entourées permettent que le segment PQ (et tous les autres segments des polygones) soit redessiné quand on bouge l’un des deux points ; en effet, la tortue est initialement placée en P (bloc « sauter »), puis orientée vers Q (bloc « fixer le cap »), puis avance d’une distance « distance(P,Q) » dans la procédure « polygone ».

Et voici (légèrement retouché) le code Javascript ainsi obtenu :

  1. function mathRandomInt(a, b) {
  2.   return Math.floor(Math.random() * (b - a + 1) + a);
  3. }
  4.  
  5. function tracerFigure() {
  6.   fixerNbInitialObjets(5);
  7.   fixerValeursAsurveiller(['n']);
  8.   fixerPointsAsurveiller(['P', 'Q']);
  9.   initialiser();
  10.   sautePos((coordX('P')),(coordY('P')));
  11.   fixeCap((vers((coordX('Q')),(coordY('Q')))));
  12.   for (i = valeur('n'); i >= 3; i++) {
  13.     couleurCrayon((mathRandomInt(0, 255)),(mathRandomInt(0, 255)),(mathRandomInt(0, 255)));
  14.     couleurRemplissage((mathRandomInt(0, 255)),(mathRandomInt(0, 255)),(mathRandomInt(0, 255)),0.1);
  15.     debutRemplir();
  16.     polygone(i, valeur('Distance(P,Q)'));
  17.     finRemplir();
  18.   }
  19. }
  20.  
  21. function polygone(nbCotes, taille) {
  22.   for (var count = 0; count < nbCotes; count++) {
  23.     avance(taille);
  24.     gauche(360 / k);
  25.   }
  26. }

Télécharger

La figure obtenue (voir copie d’écran) peut être testée sur le site d’AlgoGGB. Si on dispose de GeoGebra localement, on peut aussi partir du fichier GeoGebra ci-dessous, qui stocke la bibliothèque Javascript d’AlgoGGB.

fichier GeoGebra avec la bibliothèque d’AlgoGGB

Il reste à le compléter en y insérant le code Javascript engendré par le programme par blocs [3], sans oublier de créer par manipulations directes deux points (à nommer « P » et « Q ») et un curseur (à nommer « n »).

Exemple 2 : triangle de Sierpinski 

Cet exemple, également disponible en ligne, est un classique de la géométrie dynamique permettant de mettre en valeur les capacités d’AlgoGGB. Voici une copie d’écran de la figure finale :

Cette figure peut être obtenue à partir du fichier GeoGebra fourni à la fin de la section précédente, en y insérant le code ci-dessous, sans oublier de créer par manipulations directes trois points (à nommer A, B et C) et un curseur (à nommer « Niveau »).

  1. function tracerFigure() {
  2.         fixerNbInitialObjets(6);
  3.         fixerValeursAsurveiller(['Niveau']);
  4.         fixerPointsAsurveiller([]);
  5.         initialiser() ;
  6.         var n = valeur('Niveau') ;
  7.         commandeG('sAB=Segment[A,B]') ; cacheEtiquette('sAB') ;
  8.         commandeG('sAC=Segment[A,C]') ; cacheEtiquette('sAC') ;
  9.         commandeG('sBC=Segment[B,C]') ; cacheEtiquette('sBC') ;
  10.         sierpinski(n, 'A', 'B', 'C') ;
  11. }
  12.  
  13. function sierpinski(niveau, point1, point2, point3) {
  14.         if (niveau == 0) {return ;}
  15.         var point12, point13, point23;
  16.         point12=nouveau('P') ; point13=nouveau('P') ; point23=nouveau('P') ;
  17.         commandeG('@1=(@2+@3)/2',point12,point1,point2);
  18.         commandeG('@1=(@2+@3)/2',point13,point1,point3);       
  19.         commandeG('@1=(@2+@3)/2',point23,point2,point3);
  20.         cacheObjet(point12); cacheObjet(point13); cacheObjet(point23);
  21.         commandeG('@1=Polygon[@2,@3,@4]',
  22.                                           nouveau('tri'), point12, point13, point23);
  23.         sierpinski(niveau-1, point1, point12, point13) ;
  24.         sierpinski(niveau-1, point2, point12, point23) ;
  25.         sierpinski(niveau-1, point3, point13, point23) ;
  26. }

Télécharger

Ce code peut être obtenu à partir d’un programme par blocs, mais il n’est pas certain que ça soit plus facile qu’une écriture directe en Javascript. La première partie ne me semble pas poser de difficultés de compréhension :

Le bloc « exécuter la commande », utilisé ici pour construire les côtés du triangle ABC, nécessite une connaissance des commandes GeoGebra [4]. Il est réutilisé dans la procédure Sierpinsky (voir copie d’écran), qui construit récursivement la figure, pour obtenir les milieux des segments qu’on découpe.

C) Une interface « Scratch » pour GeoGebra

Introduction

 Un atout important d’AlgoGBB, par rapport à Scratch, est de pouvoir animer avec un curseur les figures construites. Les polygones emboîtés vus précédemment en sont une illustration un peu complexe, mais on peut commencer avec des exemples plus élémentaires tels que celui des « carrés tournants » (disponible sur le site d’AlgoGGB). Pour le rendre encore plus accessible dans ScratchGGB, j’ai fait en sorte que les élèves n’aient pas à se préoccuper des instructions d’initialisation entourées en rouge ci-dessous :

Un autre atout d’AlgoGGB est la construction de figures dynamiques illustrant des propriétés mathématiques : par exemple, ce programme par blocs (voir copie d’écran) permet de conjecturer que les 3 médianes d’un triangle « semblent de couper en un point ». Toutefois, des alternatives au bloc « exécuter une commande » d’AlgoGGB sont à prévoir pour une utilisation pédagogique au collège.

Je détaillerai quatre exemples dans cet article : carrés tournants, médianes, dessin d’un chat et nid d’abeilles. Les deux derniers sont des adaptations à la programmation par blocs d’activités GeoGebra disponibles sur le web :

  • l’exemple 3 (voir activité sur le site de Juliette Hernando) a nécessité une modification de ScratchGGB, puisque la construction est à réaliser à partir d’un fichier GeoGebra à compléter.
  • l’exemple 4 ne nécessite pas l’utilisation du fichier GeoGebra (à compléter) fourni par l’IREM Paris-Nord (voir activité), car il peut être directement traité à partir de la configuration par défaut de ScratchGGB.

Exemple 1 : carrés tournants

ScratchGGB est accessible à partir de ma page professionnelle consacrée à Blockly (voir lien). L’exemple des « carrés tournants » peut être téléchargé en cliquant sur le bouton « Demo1 » du menu « Démos ».

L’éditeur Javascript, a priori peu utile à des collégiens, occupe au départ une petite fraction de la hauteur de l’écran. Celle-ci peut être ajustée avec un curseur (en haut à droite). Sa largeur (qui est aussi celle de l’éditeur visuel) peut être ajustée par un clic-glissé de la barre verticale orange. La taille de l’éditeur GeoGebra peut aussi être ajustée, grâce à l’icône en bas à droite (qui ne fonctionne qu’avec certains navigateurs) ou à un lien hypertexte agrandissant la figure dans un nouvel onglet.

La figure créée (à partir de l’éditeur visuel ou de l’éditeur textuel) comportera toujours un curseur nommé « n », quel que soit le programme par blocs exécuté : cela vient du fichier GeoGebra utilisé par ScratchGGB quand il communique avec le serveur en ligne de GeoGebra. Ce fichier Geogebra de base comporte non seulement un curseur (n), mais aussi deux points (P et Q) : cela explique les points bleus « parasites » apparaissant sur la figure des « carrés tournants » alors que le programme initial n’en introduit aucun.

L’intérêt de ces points « parasites » [5] peut être illustré en les prenant comme sommets du premier carré : en effet, la taille et l’orientation des carrés tournants évolueront en déplaçant un de ces deux points par clic-glissé dans GeoGebra. Et pour pimenter le tout, on peut changer la couleur de la figure et remplir les carrés.

Exemple 2 : médianes

Voici le début de la construction, telle qu’elle est disponible dans ScratchGGB à partir du menu « Demos » (bouton « Demo3 ») :

La construction des autres médianes du triangle n’a pas été réalisée afin de laisser un peu de travail aux élèves. Il est à noter que la figure obtenue par programme peut ensuite être être complétée par des manipulations GeoGebra, ce qui est une option pédagogique intéressante quand le programme par blocs devient « trop volumineux » ou quand il n’y a pas de blocs adéquats. Cette possibilité a été utilisée ici pour faire apparaître le nom des points (A, B, C, mAB) et les axes du repère.

Afin d’éviter que le menu de l’éditeur visuel ne soit surchargé, j’ai regroupé plusieurs commandes (segment, milieu, cercle…) en un unique bloc paramétré par une liste déroulante et deux points [6].

Exemple 3 : chat

Les activités GeoGebra proposées par Juliette Hernando sont classées par année scolaire et accessibles à partir de la rubrique TICE (voir lien). L’exemple du chat est une des activités de 6ième, pour laquelle on dispose d’une vidéo et d’une fiche détaillant les manipulations GeoGebra à suivre pour construire la figure. Les objectifs pédagogiques annoncés sont « utiliser les notions de droite, segment et longueur » et « se familiariser avec un logiciel de géométrie dynamique ».

Dans le fichier GeoGebra à compléter, il y a tous les points bleus et l’ellipse délimitant la tête du chat. Tout le reste est à construire, en particulier les trois points rouges (G, V et S) et les droites (à effacer à la fin) permettant d’obtenir les points V et S par intersection.

Pour adapter cette activité à la programmation par blocs, j’ai dû télécharger le fichier GeoGebra, lui adjoindre la bibliothèque d’AlgoGGB et le stocker sur le site de ScratchGGB. Cela est transparent pour l’utilisateur qui, à partir du menu « Demos » (bouton « Demo 4 ») configure automatiquement ScratchGGB en récupérant les points permettant de dessiner le chat. Il ne reste plus qu’à interpréter en blocs les instructions GeoGebra de la fiche d’activité fournie par J. Hernando (voir lien).

Comme il y aura probablement des collègues tentés d’adapter à la programmation par blocs une autre activité GeoGebra de J. Hernando, j’ai cherché une solution évitant tout stockage de fichier GeoGebra sur le serveur de ScratchGGB :

  1. pour l’activité à traiter (par exemple « l’éléphant dans le cercle »), récupérer le fichier GeoGebra fourni et le stocker sur le disque dur.
  2. après avoir ouvert le fichier dans ScratchGGB (bouton « Ouvrir »), il est conseillé de vérifier si la figure à compléter est bien positionnée (bouton « Executer ») ; si ce n’est pas le cas, il faut la recentrer (par un clic-glissé) et/ou en changer l’échelle (molette de la souris), puis l’enregistrer (commande « exporter » de GeoGebra) et ouvrir le fichier modifié dans ScratchGGB.
  3. dans le programme par blocs, il ne faut pas oublier le bloc « initialiser le graphisme tortue » : sinon, on ne verra que la figure initiale à l’exécution.

Je ne prétends nullement qu’il soit plus pertinent de traiter ces activités GeoGebra en programmation par blocs avec ScratchGGB : je propose juste une option pédagogique complémentaire, de surcroît en accord avec l’introduction du codage au collège. Et, même en traitant un exercice en programmation par blocs, il peut s’avérer nécessaire de le compléter par des manipulations : par exemple, il n’y a pas de blocs pour colorier l’intérieur de l’éléphant [7] et, pour obtenir la figure du chat dans cet article, les droites rouges en pointillés ont été mises en forme après l’exécution du programme par blocs.

Exemple 4 : nid d’abeilles

Dans un article du N°69 (voir lien), je m’étais intéressé à plusieurs activités géométriques proposées par l’IREM Paris-Nord dans une optique « règle et compas » (à réaliser avec GeoGebra ou DGPad) :

Les deux premières activités (nid d’abeilles et Soissons) sont des classiques en programmation Logo et peuvent donc être traitées avec ScratchGGB. En voici la preuve pour le nid d’abeilles :

Dans l’article du N°69, j’avais montré qu’une approche par blocs était également possible pour les deux dernières activités (rhomboïdes et lunules), à condition d’utiliser MathémaBlocs, une « surcouche » de DGPad que j’avais développée. J’ignore encore s’il est possible traiter ces exemples avec AlgoGGB (ou avec une évolution de ScratchGGB), mais c’est une piste que je songe à explorer à moyen terme… Ma motivation principale serait alors la curiosité intellectuelle, car cela me semble a priori trop compliqué comme activités de codage au collège, à moins de beaucoup guider les élèves.

D) Compléments

Création d’un bloc à partir de manipulations GeoGebra

Cet exemple, qui peut être testé à partir du menu « Démos » (bouton « Démo5 ») de ScratchGGB, montre comment définir un bloc « orthocentre » à partir de manipulations GeoGebra.

Initialement, je souhaitais que ScratchGGB puisse transformer une macro GeoGebra [8] en une procédure visuelle, mais je n’y suis pas parvenu. J’ai donc développé un outil alternatif permettant de préserver l’essentiel : le code Javascript à copier-coller dans le bloc « renvoyer » résulte encore de manipulations effectuées dans GeoGebra (création d’un triangle à partir de 3 points, puis de 2 médiatrices dont on prend l’intersection).

Avant d’entrer dans les détails, voici une synthèse du travail à effectuer par l’utilisateur :

  • créer un programme visuel initial, devant au minimum comporter le bloc « initialiser graphique » ; pour cet exemple, on ajoutera également les blocs permettant de définir les points (A, B, C).
  • exécuter le programme visuel initial, ce qui ouvre GeoGebra (avec une taille réduite) et fait apparaître un lien « agrandir figure » sur lequel il faut cliquer ; on voit alors (dans un nouvel onglet) une page web où il y a non seulement GeoGebra, mais aussi (en dessous) divers boutons et zones textuelles permettant d’obtenir le code Javascript correspondant aux constructions effectuées.
  • effectuer les manipulations GeoGebra requises (ici pour construire l’orthocentre des points A, B et C).
  • utiliser les boutons et les zones textuelles sous GeoGebra pour obtenir le code Javascript correspondant ; comme ils ne sont pas visibles au départ, il faut utiliser la barre verticale de défilement pour les faire apparaître.

Un clic sur le bouton « Synthèse » fait apparaître le récapitulatif des constructions effectuées dans GeoGebra : par exemple, la première construction a créé un triangle (t) à partir des 3 points (A, B, C) ainsi que 3 segments (a, b, c) correspondant aux côtés du triangle. Ensuite, il faut indiquer les objets initiaux et finaux, puis cliquer sur le bouton « Javascript » qui crée le code suivant :

  1. var nom1 = "Polygon";
  2. var input1 = [A,B,C];
  3. var output1 = ggbApplet.evalCommandGetLabels(nom1 + "(" + input1 + ")");
  4. var nom2 = "OrthogonalLine";
  5. var input2 = [A,output1.split(",")[2]];
  6. var output2 = ggbApplet.evalCommandGetLabels(nom2 + "(" + input2 + ")");
  7. var nom3 = "OrthogonalLine";
  8. var input3 = [B,output1.split(",")[3]];
  9. var output3 = ggbApplet.evalCommandGetLabels(nom3 + "(" + input3 + ")");
  10. var nom4 = "Intersect";
  11. var input4 = [output2.split(",")[0],output3.split(",")[0]];
  12. var output4 = ggbApplet.evalCommandGetLabels(nom4 + "(" + input4 + ")");
  13. cacheObjet(output1.split(",")[0]);
  14. cacheObjet(output1.split(",")[1]);
  15. cacheObjet(output1.split(",")[2]);
  16. cacheObjet(output1.split(",")[3]);
  17. cacheObjet(output2.split(",")[0]);
  18. cacheObjet(output3.split(",")[0]);
  19. return output4.split(",")[0];

Télécharger

Pas besoin d’en comprendre le contenu heureusement : il suffit de le coller dans le bloc « renvoyer ».

Mobilité d’une figure réalisée avec la tortue

Cet exemple, qui peut être testé à partir du menu « Démos » (bouton « Démo6 ») de ScratchGGB, construit deux fusées mobiles : la fusée rouge se déplace tangentiellement au cercle de centre P passant par Q, tandis que la fusée verte se déplace sur le segment PQ.

P et Q sont les deux points du fichier GeoGebra initial de ScratchGGB (voir « carrés tournants ») : donc, quand ils sont déplacés avec un clic-glissé, les points A et B bougent aussi et l’orientation des fusées est mise à jour. Par contre, quand on démarre l’animation, A et B se déplacent sans que les fusées ne suivent le mouvement : en effet, contrairement aux points P et Q, A et B ne font pas partie du fichier GeoGebra initial utilisé par ScratchGGB. J’ai donc apporté quelques modifications au code Javascript produit par ScratchGGB (quand on clique sur le bouton « Traduire ») :

  1. var nb_tracerFigure = 0; // ajout : nombre d'appels de tracerFigure
  2. function tracerFigure() {
  3.         nb_tracerFigure += 1; // ajout : un appel de plus de tracerFigure
  4.         if (nb_tracerFigure === 1) { // ajout : premier appel de tracerFigure
  5.                 //// création des 4 objets (code JS initial déplacé)
  6.                 commandeG('@1=Segment(@2,@3)','segPQ','P','Q');
  7.                 commandeG('@1=Circle(@2,@3)','cerPQ','P','Q');
  8.                 commandeG('@1=Point(@2)','A','segPQ'); ggbApplet.setAnimating('A',true);
  9.                 commandeG('@1=Point(@2)','B','cerPQ'); ggbApplet.setAnimating('B',true);
  10.                 // ajout : écouteurs pour déplacements de A et B
  11.                 ggbApplet.registerObjectUpdateListener("A", "retracerFigure");
  12.                 ggbApplet.registerObjectUpdateListener("B", "retracerFigure");
  13.         }
  14.         fixerNbInitialObjets(9); // 5 (deux boutons, n, P, Q) + 4 créés (segPQ, A, cerPQ, B)
  15.         fixerValeursAsurveiller(['n']);
  16.         fixerPointsAsurveiller(['P','Q','A','B']);
  17.         // ------------------------------
  18.         // tout ce qui suit est inchangé
  19.         // ------------------------------
  20.         initialiser();
  21.         sautePos((coordX('A')),(coordY('A')));
  22.         fixeCap(vers((coordX('Q')),(coordY('Q'))));
  23.         couleurRemplissage(0,255,0,0.2);
  24.         couleurCrayon(0,255,0);
  25.         fusee();
  26.         sautePos((coordX('B')),(coordY('B')));
  27.         fixeCap(vers((coordX('P')),(coordY('P'))));
  28.         droite(90);
  29.         couleurRemplissage(255,0,0,0.2);
  30.         couleurCrayon(255,0,0);
  31.         fusee();
  32. }
  33. function fusee() {
  34.         debutRemplir();
  35.         droite(180);
  36.         for (var count = 0; count < 3; count++) {
  37.                 avance(1);
  38.                 gauche(90);
  39.         }
  40.         droite(60);
  41.         for (var count2 = 0; count2 < 2; count2++) {
  42.                 avance(1);
  43.                 gauche(120);
  44.         }
  45.         finRemplir();
  46. }

Télécharger

Une variable « nb_tracerFigure » est introduite afin de déterminer si la procédure « tracerFigure » est utilisée au démarrage de l’applette GeoGebra ou, plus tard, quand la figure est retracée parce qu’un des points (P, Q, A, B) est déplacé. Les points A et B ne sont créés qu’au premier passage, et des écouteurs leurs sont associés : lorsque ces points seront modifiés (en particulier quand ils se déplaceront), la procédure « retracer » (de la bibliothèque d’AlgoGGB) sera déclenchée, donc les fusées suivront le mouvement de A et de B.

Il ne reste plus qu’à exécuter le programme (dans l’éditeur textuel de ScratchGGB) ou, si vous êtes pressé, à cliquer sur ce lien. Evidemment, cette partie Javascript finale n’est pas destinée à des collégiens [9].

Utilisation d’un bloc « chat » et symétrie axiale

Cet exemple, qui peut être testé à partir du menu « Démos » (bouton « Démo7 ») de ScratchGGB, construit deux chats à partir d’un bloc « chat » disponible dans le menu « sous-programmes » :

La fonction « chat », dont il est inutile de comprendre le code « obscur », renvoie une liste d’objets : comme le premier est l’ellipse du visage du chat, il suffit d’en changer la couleur pour le colorier en vert. La liste des objets d’un chat peut aussi être utilisée pour créer de nouveaux chats par symétrie [10], par exemple un chat rouge dans une symétrie axiale par rapport à la droite « PQ ».

On peut aussi, ce qui est plus futile [11], mettre un chat en orbite dans une fusée en adaptant le code Javascript du complément 2 (tester).

chat dans une fusée avec GeoGebra