p5.js pour le webdocumentaire
Le canevas
Le concept de p5.js, c'est de pouvoir dessiner au sein d'un canevas, c'est-à-dire un espace de dessin. À partir du moment ou vous importez la bibliothèque dans un fichier HTML, vous créez cet espace de dessin. Par défaut ce canevas fait 100 pixels par 100 pixels, mais on verra comment on peut modifier sa taille, son emplacement à l'intérieur d'un fichier HTML. Avec p5.js et son extension p5.dom, on peut également interagir avec des éléments HTML extérieur au canevas.
Nous avons vu dans le chapitre précédent les fonctions principales setup() et draw().
setup() sert davantage à "fixer" des choses, à configurer les paramètres globaux de notre sketch. Mais dans setup() nous ne pourrons pas créer des choses dites "interactives", c'est-à-dire des choses modifiables par le biais d'un utilisateur quelconque.
Donnons la couleur: background()
Bien reprenons le fichier sketch.js. Nous n'allons garder que la fonction principale setup() vierge et effacer tout le reste.
Nous allons changer la couleur fond de notre canevas (par défaut transparent). Pour faire cela, on utilise la fonction background(). Attention! En programmation il faut être rigoureux: la moindre faute de frappe peut empêcher votre code de fonctionner. baCkground() est différent de backgrounnd ou encore de backgrou nd.
function setup() {
background(0); //on passe "0" en paramètre.
}
Et nous obtenons un carré noir de 100 pixels de chaque côté. Maintenant si nous voulons du blanc, il suffira de changer notre présent paramètre.
function setup() {
background(255);
}
Nous pouvons ainsi obtenir une gamme de gris, allant du noir au blanc, la valeur minimum étant 0, la valeur maximum étant 255. Essayez de changer de ton en jouant sur ce paramètre.
function setup() {
background(127);
}
Pourquoi 0 est noir, et 255 est blanc? Un écran génère de la couleur avec de la lumière; il se base ainsi sur un système colorimétrique de synthèse additive (RVB). Ainsi quand un des pixels est noir (sans lumière et sans couleurs), il est "éteint". On lui attribue alors une valeur nulle. Si le pixel est blanc (et est donc composé des trois couleurs primaires lumière rouge, vert et bleu) on lui attribue la valeur maximum. Pour en savoir plus, allez au chapitre "À propos des pixels et des images matricielles".
Maintenant nous allons mettre un peu de couleurs. Nous remarquons dans les exemples suivant, que background() peut prendre 3 paramètres. Le première paramètre est le taux de rouge dans la synthèse, le deuxième est le taux de vert, et le dernier est le taux de bleu. Si nous mettons 255 sur chacun des trois paramètres, nous obtiendrons du blanc, et si nous mettons 0, nous obtiendrons du noir. Essayez de changer la couleur du fond en jouant sur ces trois paramètres.
function setup() {
background(255,255,0); //fond jaune
}
Le paramètre alpha.
Nous pouvons aussi ajouter une couche alpha, c'est à dire pouvoir donner une opacité à notre couleur ou à notre ton de gris.
function setup() {
background(10,140,255,127);
}
function setup() {
background(0,127);
}
createCanvas()
Avec ce petit carré ingrat, on ne peut pas faire (de) grand(es) chose(s).
On peut changer la taille du canevas avec la fonction createCanvas(), qui prend deux paramètres:
la largeur puis la hauteur de l'espace de dessin. Attention! createCanvas() doit précéder toutes les autres fonctions; Si on place createCanvas après background(), ça ne fonctionnera pas.
function setup() {
createCanvas(800,600);
background(10,140,255,127);
}
On peut également récupérer la largeur et la hauteur maximum de l'écran du navigateur afin de faire un plein écran. Pour cela, on utilise les méthodes windowWidth, et windowHeight.
function setup() {
createCanvas(windowWidth,windowHeight);
background(10,140,255,127);
}
On remarque qu'il y a du "mou" dans notre onglet; Pour enlever ce scroll disgracieux, on passera tout simplement par du css.
body{
overflow: hidden;
}
La matrice
On peut imaginer une matrice invisible cadrillant l'ensemble de notre canevas. L'axe x des abssisses et l'axe y des ordonnées commencent au premier pixel en haut à gauche de l'espace de dessin. Tout élément placé dans le canevas est assujetti à la règle de la matrice: l'emplacement d'un point par exemple sera défini par deux paramètres: son placement en abssise et en ordonnée (x,y).
