Réaliser un miniPaint en p5js

L'objectif est de réalisé un mini logiciel paint.

Travail à réaliser :

Ressources à disposition :

Pas à pas (d'après frédéric Ferré - Site progencours) :

Je vous propose de découvrir comment créer un bouton sous P5js et de modifier son apparence en utilisant les styles css.

Tout d’abord il faut savoir que les boutons (« button ») font partie de la librairie p5.dom qu’il faut donc utiliser dans votre projet.

Pour cela , il faut vérifier que vous avez cette bibliothèque dans votre dossier >libraries / P5.dom.js et que dans votre fichier > index.html contient la ligne :
<... src="libraries/p5.dom.js" type="text/javascript"></...>

Sur openprocessing, il faudra activer p5.dom dans Settings/Libraries qu’on ouvre en cliquant sur les 3 points en haut à droite de l’interface.

Si je souhaite maintentant créer un bouton, rien de plus simple :

function setup() {
// je créé une zone de travail de la taille de la fenêtre
createCanvas(windowWidth, windowHeight);
// je choisis une couleur de fond en niveau de gris (entre 0 et 255)
background(100);
// je créé un bouton qui contient le texte Appuyer ici
mon_bouton=createButton('Appuyer ici');
// la position du bouton en x , y
mon_bouton.position (20,30);
}


Si je souhaite associer une action à ce bouton, il faut ajouter dans le setup l’événement mousePressed :

// lorsqu'on clique sur le bouton , la fonction mon_action se lance
mon_bouton.mousePressed(mon_action);


et créer une fonction mon_action qui va être déclenchée seulement lorsque l’utilisateur cliquera sur le bouton (par exemple mettre le fond de la fenêtre en noir).


function mon_action() {
background(0);
}


Mon bouton est donc créé.

Maintenant je souhaite modifier son apparence, alors voici les différents styles qu’on peut utiliser (ce sont des styles css qui fonctionnent sous P5js) :

// le fond du bouton dans la couleur #4CAFF8
mon_bouton.style("background-color",'#4CAFF8');

// la couleur du texte du bouton
mon_bouton.style("color",'#FF0000');

// la taille de la police
mon_bouton.style("font-size",'20px');

// les bords arrondis ou carré en % ou en pixel : 20px
mon_bouton.style("border-radius",'40%');

// la couleur du bord
mon_bouton.style("border",'#00FF00');

// la largeur du bouton
mon_bouton.style("width",'100px');

//la hauteur du bouton
mon_bouton.style("height",'110px');

A vous de jouer !

PS : si vous souhaitez remplacer le bouton par une image aux mêmes dimensions alors

// image dans le bouton
mon_bouton.style("background","url('mon_image.png')");

Pour le voir en fonctionnement :

  ( Christophe Béasse - Octobre 2018 - d'après Progencours - Frédéric Férré )