1. Fichiers nécessaires pour P5.js

Un dossier qui contient :
- Un fichier index.html
- Un fichier sketch.js
- Un sous-dossier libraries qui contient :
  - Un fichier p5.js

2. Fichiers et code minimal pour un canevas statique de 512 par 512

Contenu de index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>P5.js statique 512x512</title>
<link rel="icon"
type="image/gif"
href="favicon.gif">
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>

</body>
</html>

Contenu de sketch.js :

/**
CODE VIDE QUI CREE UN CANEVAS DE 512x512 PIXELS.
*/

/**
DEBUT DE LA FONCTION setup()
QUI DETERMINE LE CODE A EXECUTER
AU DEMARRAGE
*/
function setup() {
        // CREER LE CANVAS
        createCanvas(512, 512);

        // CODE PERSONNALISE A EXECUTER AU DEMARRAGE :


} // FIN DE LA FONCTION setup()

3. Fichiers et code minimal pour un canevas qui s'ajuste à la taille de la fenêtre

Contenu de sketch.js :



// EXECUTER UNE FOIS AU DEMARRAGE :
function setup() {
        createCanvas(windowWidth, windowHeight);
}

// EXECUTER 60 FOIS PAR SECONDE :
function draw() {

}

// REDIMENSIONNER LE CANEVAS LORSQUE LA TAILLE DE LA FENETRE CHANGE :
function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
}