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.

Activités ludiques en programmation par blocs avec un logiciel de mathématiques

Patrick Raffinat montre que l’alternative à Scratch de la programmation par blocs avec un logiciel de mathématiques est non seulement crédible, mais peut aussi être ludique. Des exemples le prouvent.

Article mis en ligne le 14 juin 2019
dernière modification le 10 octobre 2023

par Patrick Raffinat

A) Introduction

Récemment, je relisais un très intéressant ouvrage collectif intitulé « Scratch au collège » [1], qui débute par :

Scratch est un logiciel idéal pour apprendre à programmer. Il a été spécialement conçu pour les enfants et les débutants. La programmation avec Scratch est ludique car il est facile de faire de beaux dessins et des petits jeux. En plus, la programmation est simple, car il suffit de déplacer des blocs pour écrire son code.

La qualité pédagogique de Scratch est indéniable, mais il n’est pas certain que ce soit le langage de programmation par blocs le plus adapté à l’enseignement du codage dans un cadre mathématique. C’est un point que j’ai abordé dans plusieurs articles, notamment « Scratch ou Blockly au collège : un nouveau leurre ? », et qui est à l’origine de plusieurs extensions mathématiques de Blockly que j’ai développées.

Par ailleurs, je m’étonne de l’omniprésence de Scratch au collège, sachant que ce logiciel est utilisé dans des enseignements de mathématiques : comment se fait-il que l’alternative de la programmation par blocs avec des logiciels de mathématiques ne soit pas plus mise en valeur ? Je vais donc m’attacher à montrer dans cet article que c’est une option pédagogique non seulement crédible, mais qu’on peut aussi la rendre attractive.

Par exemple (tester), on peut animer une fusée programmée par blocs avec un logiciel de mathématiques. Cela m’amènera à parler du logiciel de géométrie dynamique DGPad, puis de développements effectués à partir de son code source qui complètent un travail présenté dans l’article « Comment promouvoir l’algorithmique dans un contexte géométrique ? ».

B) Animations et tortues avec DGPad

Points mobiles

La palette d’outils de DGPad permet de construire en quelques manipulations un segment (ou un cercle), d’y placer un point mobile, puis de l’animer :

  • on crée un premier point avec un simple clic dans la fenêtre de DGPad
  • un clic (droit) sur le point fait apparaître une palette contextuelle : pour créer un segment ou un cercle à partir de ce point, il suffit ensuite de sélectionner l’icône correspondante.
  • un clic sur le segment ou le cercle ainsi créé permet d’y placer un point mobile (le point peut être déplacé manuellement avec un clic glissé).
  • dans la palette contextuelle du point lié, il suffit de cliquer sur l’icône en forme de ressort afin de l’animer (voir lien).

Tortues

Dans DGPad, tout point peut être associé à une tortue : il suffit de cliquer sur l’icône en forme de puzzle dans la palette contextuelle associée à ce point pour accéder à l’environnement de programmation par blocs de sa tortue.

La programmation avec la tortue est « classique », à un détail près : il est possible d’orienter initialement la fusée dans la direction du segment P2P1. Et comme DGPad est un logiciel de géométrie dynamique, on peut déplacer les deux points P1 et P2 en cours d’exécution : on constate alors que la fusée adapte dynamiquement sa trajectoire aux évolutions du segment initial, y compris lorsqu’il change de direction. Ce programme peut être testé en ligne (lien).

Il est possible de procéder de façon analogue pour des orbites circulaires. La principale différence est que la tortue, après avoir pivoté vers le centre du cercle, doit encore tourner à droite de 90 degrés pour que sa direction initiale (avant le dessin de la fusée) soit tangentielle au cercle. Ce programme peut être testé en ligne (lien).

Enregistreur de macros et clones d’une fusée mobile

Grâce à l’enregistreur de macros de DGPad, il est possible de créer des clones d’une fusée mobile, ce qui va être illustré avec une fusée se déplaçant sur un segment :

  • on accède à l’enregistreur de macros en cliquant sur l’icône en forme de boite à outils dans la barre de menus [2].
  • un clic sur les points P1 et P2 les fait apparaître comme points initiaux (c’est à dire plus ou moins comme paramètres d’entrée) de la macro en cours de création.
  • on donne un nom à la macro (ici fusée_mobile), puis on clique sur la touche « Entrée » pour valider la création de la macro, ce qui la fait apparaître dans la fenêtre « Macros personnelles »
  • la macro « fusée_mobile » peut alors être lancée à volonté en la sélectionnant dans la fenêtre « Macros personnelles » : les deux points initiaux peuvent soit être sélectionnés (en cliquant sur des points existants), soit être créés (en cliquant à la position souhaitée).

Et on peut donner libre cours à son imagination en modifiant ensuite l’apparence d’une fusée clonée...

C) De DGPad à MathémaBlocs

Introduction

La programmation par blocs de DGPad est arrivée plusieurs années après la première version du logiciel [3]. Elle répond avant tout à des besoins en géométrie dynamique (faciliter la création de « figures géométriques dynamiques avancées »), et pas à des besoins en enseignement du codage. Certes il peut y avoir concordance des points de vue (tortues notamment), mais DGPad ne me semble pas véritablement adapté à l’enseignement du codage.

Cela m’avait conduit, dans un article intitulé « Comment promouvoir l’algorithmique dans un contexte géométrique », à proposer un environnement de programmation par blocs (externe à DGPad) pouvant être utilisé par des élèves ne connaissant pas ce logiciel :

  • les élèves disposent dans cet environnement externe de blocs algorithmiques et de quelques blocs géométriques (dessin d’un segment, d’un cercle…).
  • lorsqu’ils demandent l’exécution de leur programme par blocs, celui-ci est traduit en Javascript, avant que le code ainsi créé ne soit envoyé au serveur en ligne de DGPad.

Pour créer cet environnement, je n’avais donc pas eu à récupérer le code source de DGPad puisque c’était le serveur en ligne de DGPad qui exécutait la traduction des blocs. En poursuivant dans cette voie, j’aurais pu ajouter à l’environnement de nouveaux blocs (création d’un point animé associé à un segment ou à un cercle, milieu d’un segment…), mais ce n’aurait pas été pleinement satisfaisant : en effet, cela aurait poussé à une inflation de blocs, sans oublier que la palette d’outils de DGPad proposerait encore plein de fonctionnalités non disponibles dans l’environnement de programmation externe.

C’est une des raisons qui m’ont conduit à récupérer le code source de DGPad (voir lien) et à en modifier le contenu à quelques endroits stratégiques. Cela permet notamment de récupérer le code Javascript qu’engendre l’enregistreur de macros, afin d’en faire un bloc réutilisable dans le menu sous-programme de l’interface Blockly. C’est ce que je vais illustrer ici, en restant sur la thématique des points mobiles et des fusées.

Enregistreur de macros et blocs réutilisables

L’enregistreur de macros a déjà été présenté pour créer des points mobiles sur un segment : les objets initiaux étaient deux points (P1 et P2), et les objets finaux étaient le segment créé (S1) et le point mobile (P3).

A partir de la même construction de base, les objets initiaux et finaux de la macro vont être changés : l’objet initial sera le segment (S1) et l’objet final sera le point mobile (P3). Après avoir enregistré la macro (sous le nom pointSegment), il ne reste plus qu’à la transformer en bloc réutilisable dans l’interface Blockly (bouton « Macros »).

On dispose alors d’une fonction nommée « macro_pointSegment », paramétrée par un segment, qui crée et retourne un point mobile sur ce segment. Il est important de noter que la fonction est alors indépendante de la macro initiale, ce qu’on peut vérifier avec les exemples en ligne accompagnant l’article : en effet, seuls les programmes par blocs sont téléchargés, et cela fonctionne toujours sans les macros initiales.

Trois fusées mobiles avec des blocs provenant d’une macro DGPad

Avec des élèves ne connaissant pas DGPad, mieux vaut éviter de passer par l’enregistreur de macros et donner directement un programme par blocs à compléter, par exemple celui-ci :

La tortue du point mobile ainsi créé dessine alors un trait, lui aussi mobile. Il reste à compléter le programme pour obtenir une fusée mobile. Comme exercice d’application, on peut demander aux élèves de créer une nouvelle fusée mobile à partir de deux nouveaux points. En voici une solution, avec un sous-programme évitant de dupliquer le code dessinant une fusée :

On peut sophistiquer l’exercice en ajoutant une troisième fusée sur un segment dont les extrémités sont des points mobiles :

Après avoir exécuté ce programme, je l’ai enregistré au format DGPad (à partir de la barre de menus de DGPad), ce qui permet de le tester directement en cliquant sur ce lien. Mais comme le programme par blocs est alors perdu, mieux vaut le sauvegarder (bouton « Sauver » de l’éditeur Blockly) : c’est en procédant ainsi que je l’ai mis à disposition des lecteurs pour qu’ils puissent l’adapter (voir conclusion de l’article).

Une autre façon de gérer l’animation d’un point

Il existe un autre mécanisme que celui de DGPad pour mouvoir des points. Moins complet, mais plus proche d’une vision algorithmique classique, il permet d’animer le déplacement d’un point à l’aide d’une boucle « Pour ». Voici par exemple comment mouvoir un point (C) entre deux points (A et B) appartenant à la droite d’équation cartésienne « y=3*x-6 » :

Ce mécanisme alternatif permet aussi de dessiner une fusée mobile avec la tortue du point C :

D) Bouquet final : polygone régulier et fusées

Introduction

A partir d’un polygone régulier à n côtés, n fusées mobiles vont être mises en orbite (circulaire ou rectiligne) :

La tortue du point A doit non seulement dessiner le polygone, mais aussi créer des objets (les sommets du polygone) dans l’espace dynamique de DGPad : en effet, les fusées gravitent soit autour d’un sommet (orbite circulaire), soit entre deux sommets consécutifs (orbite rectiligne). Il a donc fallu adapter la tortue native de DGPad afin qu’elle ait un comportement semblable à celle du logiciel CaRMetal  [4] : des points sont créés lorsque la tortue se déplace, et ils peuvent être récupérés grâce au bloc « liste des points de la tortue ».

Petite digression concernant CaRMetal : le programme par blocs ci-dessus, si on lui ôte la dernière instruction, peut être traduit automatiquement (bouton « Editeur ») dans le pseudo-code de CaRMétal.

Variante avec orbite circulaire

Lors de son parcours, la tortue du point A crée n nouveaux points (dont le dernier se superpose au point A). Il y a donc n+1 points dans la variable « listeSommets » (A étant le premier), mais seuls les n premiers sont pris en compte dans la boucle « Pour » où :

  • le k-ième sommet est mis dans la variable « sommet ».
  • le bloc « macro_pointCercle » ajoute un point mobile sur le cercle (de centre « sommet ») créé par le bloc « cercle ».
  • la tortue de ce point mobile (ptTortue) pivote vers le centre du cercle, tourne à droite de 90 degrés pour être tangentielle au cercle, puis appelle un sous-programme (dessin_fusee) qui dessine la fusée.

Variante avec orbite rectiligne

La boucle « Pour » permet de parcourir les n segments et d’ajouter les n fusées :

  • le k-ième sommet est mis dans la variable « debutSegment ».
  • le (k+1)-ième sommet est mis dans la variable « finSegment ».
  • le bloc « macro_pointSegment » ajoute un point mobile sur le segment créé par le bloc « segment ».
  • la tortue de ce point mobile (« ptTortue ») pivote vers une extrémité du segment [debutSegment, finSegment], puis appelle un sous-programme (dessin_fusee) qui dessine la fusée.

E) Conclusion

Je me suis efforcé de démontrer qu’il est possible de faire des activités ludiques en programmation par blocs avec un logiciel de mathématiques : avis aux amateurs…

Les exemples de l’article concernant MathemaBlocs peuvent être téléchargés et testés sur mes pages professionnelles consacrées à Blockly (menu « Démos » de ce lien pour les tests).