olivier evrard

*********************
*********************

5.1 p5.js

p5.js

Nous devons à Lauren McCarthy et à ses collaborateurs une toute récente bibliothèque Javascript nommée p5.js. Pour les initiés à Processing, c’est une véritable aubaine : p5.js combine la puissance de javascript avec l’intuitivité de la syntaxe de Processing.

p5.js permet de créer facilement, au sein d’un canevas, un espace de dessin interactif; il permet également de jouer avec des éléments HTML de la page comme les objets vidéo, son, les sliders, les boutons de formulaire, etc…

p5.js et sa bibliothèque p5.dom permettent de coder directement un fichier en .js et rend possible l’interaction avec les éléments HTML de la page et la combinaison avec d’autres bibliothèques javascript comme jQuery.js, Hammer.js, Paper.js, Three.js, etc…

Cette bibliothèque pourrait permettre le développement rapide d’interfaces graphiques interactives, comme des applications web ou des webdocumentaires. (source : FlossManuals)

Editeur en ligne – mode débutant

Dans un premier temps, par facilité, nous allons coder du p5.js en ligne via l’éditeur officiel. Il permet de gagner du temps et d’avoir rapidement un résultat satisfaisant sans se prendre la tête avec des dossiers, des fichiers, du code, ou même un serveur local à installer.

Code sur votre ordi – mode développement

À placer dans la balise <head>:

<script language="javascript" type="text/javascript" src="p5.js"></script>
<script language="javascript" type="text/javascript" src="p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>

Ouvrez « sketch.js » dans un éditeur de code type Sublime Text et testez ce code:

function setup() {
createCanvas(800, 600);
}

function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}

Ressources

*********************