Loading [MathJax]/extensions/Safe.js

Utilisation des fonctionnalités de dessin du module p5.js

Le module p5.js fonctionne dans les notebooks Basthon mais ne fonctionne pas dans les notebooks Jupyter classiques. Il correspond à l'adaptation en langage python de la librairie p5.js.

Attention : Même si l'import de p5.js se fait en utilisant l'instruction from p5 import *, le module p5.js n'est PAS le même que le module p5 disponible sur pypi.org.

C'est donc bien la référence de p5.js qu'il faut consulter en cas de besoin.

Introduction

p5.js est très riche, nous nous limiterons ici à la description de l'utilisation sommaire d'une zone interactive de dessin appelée canvas. Essentiellement un script p5.js est constitué de trois fonctions. la principale est la fonction run qui se charge d'exécuter le script et plus précisément :

  • run commence par appeler une seule fois - si nécessaire - la fonction désignée par preload : preload sert - si nécessaire - à télécharger des ressources distantes (utilisation experte),
  • run commence par appeler une seule fois la fonction désignée par setup : setup sert essentiellement à initialiser certains paramètres graphiques,
  • run appelle indéfiniment à intervalles réguliers (par exemple 60 fois par seconde) la fonction désignée par draw : draw permet essentiellement :
    • de faire des animations,
    • de gérer de l'interactivité grâce à la gestion d'évènements clavier ou souris.

Voici un exemple (sans utiliser la fonction preload) :

Entrée[ ]:

Remarque : dans ce notebook nous ne décrivons pas tout ce qui concerne la gestion de l'interactivité du canvas.

Fonctions de contexte

  • createCanvas(l, h) : pour indiquer les dimensions du canevas (l : largeur et h : hauteur).
  • frameRate(f) : pour indiquer le nombre d'appels par seconde à la fonction draw.
  • run() : pour lancer l'exécution du script (appel unique à setup() puis appels successifs à draw()).
  • frameCount : donne le numéro de l'image en train d'être tracée.

Fonctions de l'environnement de dessin

  • background(r, g, b, a) : pour indiquer la couleur de fond (r, g, b, a : entre 0 et 255 ; la transparence a étant facultative).

  • clear() : pour effacer le canevas.

  • stroke(r, g, b, a) : pour indiquer la couleur de contour (r, g, b, a : entre 0 et 255 ; la transparence a étant facultative).

  • strokeWeight(s) : pour indiquer l'épaisseur du contour.

  • noStroke() : pour ne plus dessiner les contours.

  • fill(r, g, b, a) : pour indiquer la couleur de remplissage (r, g, b, a : entre 0 et 255 ; la transparence a étant facultative).

  • noFill() : pour ne plus dessiner de remplissage.

  • erase(fr, fc) : pour «gommer» : fr et fc désignent la force (entre 0 et 255) sur le remplissage et sur le contour.

  • noErase() : pour sortir du mode «effacer».

Fonctions basiques de dessin

  • circle(x, y, d) : pour tracer un cercle de centre de coordonnées (x, y) et de diamètre d.
  • line(x1, y1, x2, y2) : pour tracer un segment allant du point de coordonnées (x1, y1) à celui de coordonnées (x2, y2).
  • point(x, y) : pour tracer un point de coordonnées (x, y).
  • rect(x, y, l, h) : pour tracer un rectangle de largeur l et de hauteur h dont le coin supérieur gauche est de coordonnées (x, y).
  • text(chaine, x, y) : pour afficher le texte de la chaîne de caractères chaine au point de coordonnées (x, y).

Tracés de polygones

Pour un polygone avec n sommets :

beginShape()
vertex(x1, y1)
vertex(x2, y2)
...
vertex(xn, yn)
endShape(CLOSE)

Si on omet CLOSE, le segment entre le dernier sommet et le premier sommet ne sera pas tracé (on obtient donc une ligne brisée).

Un deuxième exemple

Remarquez :

  • la fonction background() appelée par draw : permet de repartir à chaque dessin sur un nouveau fond jaune,
  • frameRate(20) qui permet d'actualiser l'affichage à une fréquence plus élevée que ci-dessus,
  • la syntaxe pour le tracé d'une ligne brisée (beginShape() etc.).

Ne vous attardez pas sur les formules avec sin et cos, ce n'est pas l'objet de ce cours, sachez juste que cela permet de faire se déplacer les quatre sommets de la ligne brisée sur des cercles ...

Entrée[ ]:

setup(), draw(), run() et frameCount : dernière remarque

Tout se passe comme si run était composée ainsi :

def run():
    fonction_preload()
    fonction_setup()
    frameCount = 0
    repeter indéfiniment:
        fonction_draw()
        frameCount = frameCount + 1

C'est à dire :

def run():
    fonction_preload()
    fonction_setup()
    frameCount = 0
    while True:
        fonction_draw()
        frameCount = frameCount + 1

Autres

Il est possible de faire beaucoup plus de choses en dessin avec p5.js mais nous nous arrêterons là.


  • Attention certaines méthodes de la référence de p5.js ont besoin que la fonction run() ait été exécutée au moins une fois avant de pouvoir être prises en compte.

  • Certaines méthodes gestionnaires d'évènements ne sont pas prises en compte alors que les booléens détecteurs d'évènements le sont.

Chargement de Basthon...