Sites


p5.js pour le webdocumentaire

Installation

Pour utiliser la bibliothèque p5.js, il faut bien sur l’avoir téléchargé (*) et l’avoir placé dans l’arborescence du site. Vous remarquez dans le dossier téléchargé qu’il y a plusieurs fichiers: pour l’instant nous nous intéresserons uniquement à la version compressée de p5.js (p5.min.js) qui est plus légère que la version non-compressée (p5.js). Ensuite, il va falloir importer ce script entre les balises <head> ou <body> d’une page HTML que vous allez créer (dans l’exemple je crée un ‘index.html’ mais le nom du fichier HTML a ici peu d'importance):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>p5</title>
</head>
 
<body>
<script src="js/p5.min.js"></script>
<!-- on utilise les balises <script> -->
</body>
 
</html>

Maintenant, nous allons créer un fichier javascript (vide pour l’instant) qui doit s’appeller « sketch.js ». C’est donc dans ce fichier javascript que nous allons programmer notre canevas: c’est en quelque sorte l’équivalent de l’IDE de Processing. On n’oubliera pas d’importer ce dernier dans le html via les balises <script>.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>p5</title>
</head>
 
<body>
<script src="js/p5.min.js"></script>
<script src="js/sketch.js"></script>
<!-- on utilise les balises <script> -->
</body>
 
</html>

Ci-dessous, l’arborescence du site. Un fichier HTML appelant la bibliothèque p5.js, la bibliothèque, et le fichier sketch.js ou nous allons entrer du code en javascript.

arborescence structure p5.js

J’ai choisi de placer mes scripts (fichiers en .js) dans un dossier, mais bien sur, ce choix n’engage que moi… Nous avons donc en tout, un index, la bibliothèque p5.js compressée, et notre sketch. Notre arborescence est opérationnelle: nous commençons à coder dans le prochain chapitre.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.