Mathématice, intégration des Tice dans l'enseignement des mathématiques  
Sommaire > N°75 - mai 2021 - En cours d’élaboration > p5Visuel, un environnement de programmation (...)

p5Visuel, un environnement de programmation visuelle pour le web
Moteur de recherche
Mis en ligne le 1er mars 2021, par André Boileau

À propos de l’auteur :

André Boileau est professeur retraité de l’UQAM (Université du Québec à Montréal). À l’époque, Il était membre de la section didactique du département de mathématiques.

Cet article peut être librement diffusé et son contenu réutilisé pour une utilisation non commerciale (contacter l’auteur pour une utilisation commerciale) suivant la licence CC-by-nc-sa.
http://creativecommons.org/licenses/by-nc-sa/3.0/fr/legalcode

NDLR :

Un sommaire en début d’article vous permet d’accéder aux différentes parties. Des liens précédant ( ) les titres permettent de revenir au niveau du sommaire.
Les liens Internet s’ouvrent par défaut dans la même fenêtre.
Les captures d’écran des pages web sont des liens vers ces pages interactives.
Pour profiter d’une illustration en parallèle de votre lecture, nous vous conseillons l’usage du clic droit puis ouvrir dans un nouvel onglet.

 Introduction

Le but de cet article est de vous faire connaître p5Visuel, un environnement de programmation libre et gratuit [1] destiné aux élèves [2] et à leurs professeurs. Pour ce faire, nous allons tout d’abord présenter brièvement divers exemples illustrant les possibilités offertes par p5Visuel. Puis nous étudierons de façon plus détaillée un exemple simple.

L’idée de p5Visuel m’est venue en constatant que plusieurs professeurs de mathématiques avaient tendance à utiliser Scratch avec leurs élèves, mais qu’un nombre grandissant de ceux-ci se heurtaient à certaines limitations de cet environnement : scène limitée à 480×360 pixels, difficulté d’utiliser des notations mathématiques, lourdeur du recours à des tableaux de données à plusieurs colonnes, etc.

J’ai alors résolu de créer un nouvel environnement de programmation visuelle visant, non pas une « représentation sur une scène », mais bien la création de pages web interactives. Dès le départ, j’ai décidé qu’il ne serait pas du tout nécessaire de connaître quoi que ce soit de la mécanique des pages web (HTML, CSS et JavaScript) pour programmer dans p5Visuel, mais que ceux et celles qui disposent de telles connaissances pourraient les utiliser pour aller plus loin.

À qui s’adresse p5Visuel ? Pour dire vrai, je ne sais pas exactement. Il nécessite probablement un peu plus de maturité que ce qui est exigé des premiers utilisateurs de Scratch. Mais je crois qu’il peut s’utiliser à un niveau assez élémentaire. À vous de me le dire. Par contre, je suis convaincu que le plafond est moins bas qu’avec Scratch, pour qui veut allier programmation et mathématiques.

Mentionnons que p5Visuel s’utilise en ligne, mais qu’il existe aussi une version autonome que vous pouvez télécharger. Il est doté d’une documentation en ligne, comprenant notamment des vidéos de formation pour débutants, ainsi que des exemples de programmes et de problèmes à résoudre. Le lecteur intéressé pourra consulter le site web principal de p5Visuel.

NDLR : pour compléter la présentation, nous vous proposons cet extrait d’une vidéo réalisée par l’auteur. Vous pouvez accéder à la vidéo complète ainsi qu’aux autres concernant p5Visuel en suivant ce lien.

 p5Visuel vise la création de pages web interactives

p5Visuel est un environnement de programmation visuelle : il permet de mettre au point des programmes en assemblant des blocs. Et quel est le résultat de l’exécution de tels programmes ? Une page web interactive. Pour vous donner une idée de ce qu’on peut accomplir de cette manière, voici un exemple de page web créée avec p5Visuel : elle comporte des éléments textuels dotés de divers formats, des images (dont un GIF animé), des vidéos, des figures GeoGebra, et même un site web incrusté. On peut accéder à cette page web par un clic sur l’image ci-dessous. On peut aussi voir le programme l’ayant engendrée par un clic sur le texte « code source » de la légende.

Page web sur le théorème de Pythagore
Voir le code source
Interagissez avec les sept vidéos, les deux figures GeoGebra ou le site web.

Pour créer une telle page, p5Visuel comporte divers blocs permettant de créer ou d’importer les divers éléments constituant une page web.

blocs de creation de page web

On peut aussi incruster des pages web créées avec p5Visuel pour enrichir d’autres pages web, comme nous le montre l’exemple suivant.

Une application du théorème de Pythagore
Voir le code source Interagissez avec les cases à cocher et les glissières.

Ce deuxième exemple illustre la capacité de p5Visuel de faire des graphiques décrit en géométrie analytique. On verra plus loin qu’on peut aussi utiliser la géométrie de la tortue, et même la géométrie 3D (dans les figures GeoGebra). Ceci met en lumière la caractéristique suivante : bien que p5Visuel soit un environnement de programmation général, ses possibilités mathématiques sont puissantes et variées.

 p5Visuel comporte des outils spécifiques aux maths

 Le symbolisme mathématique

Dans p5Visuel, on peut afficher des notations mathématiques, comme le montre l’exemple suivant, qui nous donne la possibilité de changer la taille (via une glissière) et la couleur (via un menu local) de nos formules.

Notations mathématiques
voir le code source

Soulignons que, bien que la description de nos formules fasse appel à une codification particulière, le débutant peut faire appel à un éditeur visuel de formules pour les engendrer automatiquement.

Résolution d’équations quadratiques
Voir le code source

L’exemple ci-dessus crée des expressions mathématiques en fonction des valeurs de a, b et c entrées par l’utilisateur. Il utilise aussi une figure GeoGebra créée entièrement par le programme p5Visuel. Notons aussi que p5Visuel permet aussi l’importation de figures GeoGebra déjà présentes sur le web, comme nous le montre le premier exemple de cet article.

 Les tableaux de valeurs (avec format)

p5Visuel met à notre disposition des tableaux à plusieurs colonnes, comme nous le montre l’exemple suivant, qui permet de calculer interactivement et de façon élémentaire (par essais et erreurs) les remboursements hypothécaires en fonction de la loi canadienne.

Calculs hypothécaires
Voir le code source

De plus, on peut modifier la présentation de nos tableaux de données, comme en font foi les deux exemples suivants.

Factorisation première
Voir le code source
Sudoku
Voir le code source

 Des outils graphiques variés

Dans p5Visuel, on peut utiliser plusieurs zones graphiques, qui disposent chacun d’un système de coordonnées et de paramètres tortue propres, comme nous le montre l’exemple suivant : les trois glissières du bas modifient le tracé de la figure choisie dans le menu local.

Cinq zones graphiques dans p5Visuel
Voir le code source

 Création et utilisation de figures GeoGebra

Les deux figures GeoGebra ci-dessous ont été créées dans p5Visuel qui, outre des figures 2D et 3D, peut créer des tableurs et des zones de calculs formels.

Familles de fonctions
Voir le code source
Réseau de sphères
Voir le code source

Veuillez noter que la manipulation d’un grand nombre de sphères requiert un ordinateur puissant : pensez-y avant d’augmenter la valeur de la glissière correspondante (n → (2n+1)³ sphères).

 Un exemple simple : spirales et paramètres

Nous allons maintenant voir comment créer une version simplifiée de la page web suivante :

Un programme pour tracer diverses spirales
Voir le code source

La façon de procéder sera décrite pas à pas dans la vidéo ci-dessous :

 En conclusion

p5Visuel est un environnement de programmation à la fois simple et puissant, qui permet au débutant de faire des programmes (mathématiques ou autres) intéressants, et qui donne aux utilisateurs plus avancés les outils nécessaires pour réaliser des projets spectaculaires : outils de mise au point de pages web, éditeur de formules mathématiques, intégration d’éléments interactifs (images animées, vidéos, figures GeoGebra, sites web), et création de figures sur mesure (analytique, tortue, GeoGebra).
Terminons par un dernier exemple de programme p5Visuel, qui illustre une autre facette de ses possibilités : la gestion de vidéos interactives.

Vidéo et figure GeoGebra contrôlées par p5Visuel
Voir le code source

Bonus : programme mystère (et son code source)


notes

[1p5Visuel est basé sur plusieurs logiciels libres, dont Blockly, p5.js, MathJax, Visual Math Editor, GeoGebra et jQuery. Certains exemples de programmes mentionnés dans cet article utilisent des ressources tirées de Pixabay, Giphy, YouTube, Vimeo, DailyMotion et GeoGebra .

[2Je vous laisse apprécier l’âge à partir duquel les élèves peuvent utiliser p5Visuel. Par contre, il est important de souligner que les programmes donnés en exemples dans cet article ont été choisis pour illustrer les caractéristiques et les possibilités de p5Visuel : ils ne sont donc pas destinés à être proposés directement à des élèves.

Réagir à cet article
Vous souhaitez compléter cet article pour un numéro futur, réagir à son contenu, demander des précisions à l'auteur ou au comité de rédaction...
À lire aussi ici
MathémaTICE est un projet
en collaboration avec
Suivre la vie du site Flux RSS 2.0  |  Espace de rédaction  |  Nous contacter  |  Site réalisé avec: SPIP  |  N° ISSN 2109-9197