olivier evrard

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

Cours n°5.1

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)

Exercices

  • Adaptation Processing
  • Test Sound
  • Rectangle draw
  • Générateur de Trump Tweet
  • Générateur d’affiche

Code

À 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>

Premier code à tester dans l’éditeur p5:

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

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

Ressources

 

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