Introduction

Par défaut, un programme p5Visuel s'exécute dans une page web vierge : tous les éléments affichés seront créés par le programme. Cependant, il peut aussi être intéressant d'exécuter nos programmes dans des pages web prédéfinies, en faisant référence (via leurs noms ou ID) aux éléments préexistants qu'on y retrouve. C'est cette dernière possibilité qui est illustrée dans ce petit site.

Les exemples choisis illustrent aussi une utilisation pédagogique possible : il peut être motivant pour les élèves d'obtenir un résultat satisfaisant avant même d'écrire leur programme (voir la version vide, ou cliquer sur l'image). De plus, on peut écrire pour les élèves une partie du programme, pour les laisser se concentrer sur ce qui est essentiel à nos yeux (voir la version élève). Finalement, il est toujours utile de pouvoir visualiser le résultat final désiré, que le programme soit accessible (version professeur) ou non (version autonome) aux élèves.

Comment choisir entre les deux approches ?

Pour exécuter un programme p5Visuel dans une page web prédéfinie, on aura le choix entre deux approches. Les détails techniques seront expliqués à la page suivante, mais pour l'instant illustrons ceci par un exemple.

Si vous cliquez sur le lien suivant, vous serez conduit vers l'éditeur p5Visuel qui affichera un programme. De plus, si on exécute ce programme, cette exécution se fera dans une page web prédéfinie.

Si c'est tout ce qu'on veut, alors tout va bien. Mais faisons maintenant l'expérience suivante :
• enregistrons le programme p5Visuel
• fermons maintenant la fenêtre de l'éditeur p5Visuel
• ouvrons maintenant la fenêtre de l'éditeur p5Visuel en suivant le lien suivant
• ramenons le programme que nous avons enregistré, et exécutons-le.
Ça ne fonctionne pas : le programme a perdu la trace de la page web prédéfinie dans laquelle il doit s'exécuter.

La seconde approche va nous permettre de régler ce problème, car le programme contiendra cette fois une référence à la page web prédéfinie dans laquelle il doit s'exécuter.

Pour le vérifier, cliquez sur le lien suivant : encore ici, vous serez conduit vers l'éditeur p5Visuel qui affichera un programme. Et ici encore, si on exécute ce programme, cette exécution se fera dans une page web prédéfinie.

Répétons maintenant l'expérience précédente dans ce nouveau contexte :
• enregistrons le programme p5Visuel
• fermons maintenant la fenêtre de l'éditeur p5Visuel
• ouvrons maintenant la fenêtre de l'éditeur p5Visuel en suivant le lien suivant
• ramenons le programme que nous avons enregistré, et exécutons-le.
Cette fois, tout se déroule correctement car le programme a gardé la trace de la page web dans laquelle il doit s'exécuter.

Notons en terminant que la première approche a aussi ses avantages : par exemple, elle permet d'utiliser un même programme p5Visuel dans des pages web prédéfinies différentes, comme l'illustrent l'exemple suivant, exécuté dans une première page, puis dans une seconde.