Premiers pas avec p5.js

Récupération des fichiers

Pour commencer, télécharger l’archive ZIP applications-javascript.zip contenant les fichiers qui seront utilisés pour découvrir le javascript et la bibliothèque p5.js.

Extraire les fichiers dans un répertoire dédié et observer leur organisation :

• le répertoire racine contient les fichiers HTML.
• le répertoire assets contient les contenus de média (images, sons…).
• le répertoire scripts contient les fichiers javascript (extension .js).
• le répertoire styles contient les fichiers CSS.

On trouvera dans le répertoire scripts les fichiers p5.js et p5.sound.js. Ces deux fichiers font partie de la bibliothèque p5.js.

Une bibliothèque (library) rassemble un ensemble de fonctions déjà codées qui peuvent alors être utilisées directement dans un programme. p5.js permet très facilement de dessiner, de jouer un son, de faire des animations… Il s’agit du portage en en javascript du programme Processing (qui utilise un autre langage de programmation, le Java).

Toutes les fonctions de p5.js sont recensées sur la page :

https://p5js.org/reference/

Par ailleurs on trouvera sur le site de nombreux exemples et tutoriaux.

HTML et javascript

Pour être interprétable par un navigateur web, un programme javascript doit être intégré dans une page web. On utilise pour cela la balise <script> :

<script type="text/javascript">
  // Mon code Javascript
  ...
</script>

Il est aussi possible de lier directement un fichier javascript avec :

<script type="text/javascript" src="monscript.js"></script>

Ouvrir le fichier exercice-debogage.html avec un éditeur de texte (Notepad++, Sublimtext…) et identifier les deux fichiers javascript qui sont appelés.

Puis ouvrir le fichier exercice-debogage.html dans un navigateur web et observer ce qu’il fait.