Page web sur le théorème de Pythagore ( code source )
Interagissez avec les sept vidéos, les deux figures GeoGebra ou le site web.
p5Visuel, un environnement de
programmation visuelle pour le web
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 x 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 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.
Extrait de la vidéo Présentation de p5Visuel : Pourquoi p5Visuel ?
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.
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.
On peut aussi incruster des pages web créées avec p5Visuel pour enrichir d’autres pages web, comme nous le montre l’exemple suivant.
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.
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.
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 ( 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.
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.
De plus, on peut modifier la présentation de nos tableaux de données, comme en font foi les deux exemples suivants.
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.
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.
Nous allons maintenant voir comment créer une version simplifiée de la page web suivante :
La façon de procéder sera décrite pas à pas dans la vidéo ci-dessous :
Vidéo décrivant comment créer le programme
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.
Bonus : programme surprise (et son code source)
1 Je suis professeur retraité de l’UQAM (Université du Québec à Montréal). À l’époque, j’étais membre de la section didactique du département de mathématiques.
2 p5Visuel 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 .
3 Je 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.
