Pour suivre cette série d'activités consacrée à la réalisation de pages web avec p5js, il est nécessaire d'avoir quelques connaissances sur HTML et CSS. Si ce n'est pas votre cas, vous trouverez des activités consacrées à ce sujet ici.

Vous pouvez reprendre la structure de base qui avait été mis en place dans les activités consacrées aux "bases" de p5js (dossier "ex0" voir ici). Il suffira, comme précédemment d'effectuer des "copier-collers" de ce dossier à chaque fois que vous voudrez créer un nouvel exemple.

Le fichier HTML présent dans le dossier "ex0" (voir ci-dessus), se présentait comme ceci : 


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>p5.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>

Comme vous pouvez le constater, la balise "body" est vide, mais il est tout à fait possible d'y placer des balises HTML :

À faire vous-même 1.1

Modifiez les fichiers (index.html, script.js et style.css) comme suit :

index.html


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>p5.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/addons/p5.dom.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <h1>p5js</h1>
    <p>Ce site est consacré à la bibliothèque JavaScript p5js</p>
</body>
</html>

ATTENTION : si votre ordinateur n'est pas connecté à internet, il faudra télécharger l'archive suivante, l'extraire, placer le fichier "p5.min.js" et le fichier "p5.dom.js" (vous trouverez ce fichier dans le dossier "addons" de l'archive) dans votre répertoire "ex0". Ensuite, vous devrez modifier le code du fichier "index.html" :

script.js


function setup(){
  createCanvas(400,400);
  background(240);
}
function draw(){
}

style.css


h1 {
    text-align:center;
}

Comme vous pouvez le constater, tout fonctionne, le titre de la balise "h1" est bien centré (voir le fichier "style.css") et nous avons bien un paragraphe qui se situe juste au-dessus de la surface de dessin.

Cette surface de dessin est, en fait, une balise "canvas" qui a été "ajoutée" à la page grâce à la fonction "createCanvas".

P5js propose d'autres fonction permettant d'ajouter d'autres balises HTML depuis le script JavaScript : la fonction "createP" crée une balise "p", cette fonction prend un paramètre, le contenu de la balise "p".

À faire vous-même 1.2

Saisissez, analysez et tester ce programme (les fichiers "index.html" et "style.css" restent inchangés par rapport à l'exemple précédent).

script.js


function setup(){
  createCanvas(400,400);
  background(240);
  createP("je suis un paragraphe ajouté à la page depuis le script JavaScript !")
}
function draw(){
}

L'ordre des "createCanvas" et des "createP" dans le script JavaScript détermine leur ordre d'apparition à l'écran.

À faire vous-même 1.3

Modifiez les fichiers ("index.html" et "script.js") comme suit (le fichier "style.css" reste inchangé) :

index.html


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>p5.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <h1>p5js</h1>
</body>
</html>

script.js


function setup(){
  createP("je suis le premier paragraphe, j'apparais avant le 'canvas'")
  createCanvas(400,400);
  background(240);
  createP("je suis un paragraphe ajouté à la page depuis le script JavaScript !")
}
function draw(){
}

La création d'un "canvas" n'est pas une obligation, si vous n'avez pas besoin de "dessiner", le "createCanvas" (et donc le "background") peuvent être supprimés. Cependant, pour éviter que p5js crée un canvas par défaut, vous devez utiliser la fonction "noCanvas".


noCanvas();

À faire vous-même 1.4

Modifiez l'exemple précédent pour ne plus avoir de surface de dessin (canvas) à l'écran.

P5js propose quelques fonctions du type "create....", celles que vous connaissez déjà ("createCanvas" et "createP") et les autres :

Il existe bien d'autres fonctions du type "createXXXX", pour avoir une liste exhaustive, vous pouvez consulter la documentation officielle ici.

Si vous ne trouvez pas "votre bonheur" dans les fonctions "createXXXX" proposées par p5js (par exemple, il n'y a pas de fonction "createH1"), il est possible d'utiliser la fonction "createElement". La fonction "createElement" prend 2 arguments : la balise que l'on veut créer et le contenu de cette balise.

À faire vous-même 1.5

Modifiez les fichiers ("index.html" et "script.js") comme suit (le fichier "style.css" reste inchangé) :

index.html


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>p5.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
</body>
</html>

script.js


function setup(){
  createElement('h1','je suis un titre h1');
  createP("je suis le premier paragraphe, j'apparais avant le 'canvas'")
  createCanvas(400,400);
  background(240);
  createP("je suis un paragraphe ajouté à la page depuis le script JavaScript !")
}
function draw(){
}