Deux approches
Pour faire exécuter un programme p5Visuel dans une page web donnée, deux approches sont possibles.Remarque importante Pour qu'un programme p5Visuel puisse s'exécuter dans une page web, il faut préparer celle-ci en insérant les instructions suivantes dans son entête (entre les balises <head> et </head>) :
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_HTMLorMML-full" async>
</script>
<script src="http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/p5/p5.min.js"> </script>
<script src="http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/p5/p5.dom.min.js"> </script>
<script src="http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/p5/p5.sound.min.js"></script>
<script src="http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/p5/bibAB.js"> </script>
<script src="http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/programme.js"> </script>
Mise-à-jour (mars 2020) Comme vous le voyez, p5Visuel a été installé sur le serveur ci-dessus, dans le dossier
http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/.
Mais il est maintenant aussi installé sur un second serveur, dans le dossier
https://andreboileau.github.io/p5Visuel/,
et on peut adapter à cet autre contexte tout ce qui est décrit dans cette page. Dans certains cas, l'utilisation de ce second serveur est même nécessaire : pour plus de détails, voir la nouvelle suivante.
Première approche : modèle spécifié lors de l'appel
(via l'utilisation d'une adresse web comportant « &exec=... »)
La première approche consiste à modifier l'appel à l'éditeur p5Visuel de façon à
spécifier, dans l'adresse web de l'éditeur p5Visuel, le programme
p5Visuel utilisé et la page web prédéfinie
dans laquelle ce programme sera exécuté. Ceci prend la forme
adresseEditeur?prog=adresseProgramme&exec=adressePageExecution
Par exemple, on peut avoir
adresseEditeur :
http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/edition.html
adresseProgramme :
http://profmath.uqam.ca/~boileau/p5VisuelWEB/MODELES/StoresTortue/professeur.p5V
adressePageExecution :
http://profmath.uqam.ca/~boileau/p5VisuelWEB/MODELES/StoresTortue/execution.html
et obtenir de cette façon le
lien suivant.
Notez qu'on peut avoir diverses formes partielles de cette adresse web
:
adresseEditeur ➡︎ le programme p5Visuel
et la page d'exécution ne sont pas spécifiés
On part donc avec un programme « vide », qui s'exécutera
dans une page web initialement vide :
exemple.
adresseEditeur?prog=adresseProgramme ➡︎
le programme p5Visuel est spécifié, mais pas la page
d'exécution
On part donc avec un programme « non vide », qui
s'exécutera dans une page web initialement vide :
exemple.
adresseEditeur?exec=adressePageExecution
➡︎ le programme p5Visuel n'est pas spécifié
On part donc avec un programme « vide », qui s'exécutera
dans une page web initialement non vide :
exemple.
Les éléments créés par le programme s'afficheront à la fin de la page web, à moins que le programme ne le spécifie autrement.
Seconde approche : modèle spécifié dans le programme
(via le bloc 
)
La seconde approche ressemble beaucoup à la première, à ceci près qu'on n'identifie pas la page d'exécution
dans l'appel à l'éditeur p5Visuel : on n'utilise donc pas le mécanisme « &exec=... », On procède plutôt comme suit :
adresseEditeur?prog=adresseProgramme
Par exemple, on peut avoir
adresseEditeur :
http://profmath.uqam.ca/~boileau/p5VisuelWEB/p5Visuel/edition.html
adresseProgramme :
http://profmath.uqam.ca/~boileau/p5VisuelWEB/MODELES/StoresTortueP/professeur.p5V
L'adresse de la la page d'exécution est spécifiée dans le programme, à l'aide du bloc .
De cette façon, on obtient
le lien suivant.
On trouvera une courte discussion des mérites respectifs de ces deux approches dans la page d'introduction.