Aller au contenu

p5 : présentation

Basthon propose la bibliothèque p5, qui permet de réaliser rapidement des constructions graphiques et des animations. La bibliothèque propose l'essentiel des fonctions de p5.js, avec la syntaxe de python. En particulier, il ne s'agit pas de la bibliothèque p5 disponible dans d'autres IDE.

Structure du programme

Le programme doit contenir deux fonctions, setup() et draw(), et l'exécution est lancée à l'aide de l'instruction run().

Lorsque l'on exécute l'instruction run(), la fonction setup() est exécutée une fois :

def setup():
    createCanvas(800,600)
    # instructions de paramétrage de l'affichage
Cette fonction permet de définir les dimensions de la fenêtre de tracé, et quelques paramètres initiaux. Les valeurs données aux paramètres de la fonction createCanvas sont affectées automatiquement à deux variables systèmes : width pour le premier paramètre et height pour le second.

Puis la fonction draw() est ensuite exécutée en boucle, après l'exécution de setup():

def draw():
    # instructions de dessin
Elle contient des instructions qui seront exécutées avec une fréquence réglable, permettant de modifier le contenu de la fenêtre et de créer des contenus statiques ou des animations.

L'instruction stop() met fin au programme :

stop()

Variables système

variable description
windowWidth, windowHeight Dimensions de la fenêtre
width, height Dimensions de la zone de dessin. Les valeurs de width et height sont définies par les paramètres de la fonction createCanvas().

Voir également les paragraphes Touches du clavier et Souris.

Rafraîchissement

syntaxe description
frameCount Nombre d'images affichées depuis le démarrage du programme.
frameRate()
getFrameRate()
Renvoie le nombre d'images affichées chaque seconde.
frameRate(valeur)
setFrameRate(valeur)
Spécifie le nombre d'images à afficher chaque seconde.
noLoop() Empêche d'exécuter en boucle le code de la fonction draw().
loop() Relance l'exécution en boucle de draw().

Couleurs

Désigner une couleur

syntaxe description
'red' nom de couleur
120 niveau de gris : 0 - 255
(100, 125, 255) couleur r, v, b (décimal) : 0 - 255
'#222222' couleur r, v, b (hexadécimal) : 00 - ff
(255, 0, 0, 50) couleur r, v, b, alpha
color(0, 0, 255) objet p5.Color

On peut égaler déterminer une couleur à l'aide de la fonction lerpColor:
lerpColor(couleur1, couleur2, coefficient) détermine une couleur intermédiaire entre couleur1 et couleur2. coefficient est un nombre entre 0 et 1. Plus coefficient est proche de 0, plus la couleur obtenue est proche de couleur1, et plus coefficient est proche de 1, plus la couleur obtenue est proche de couleur2.

Dessiner en couleur

syntaxe description
background(couleur) Définit la couleur d'arrière-plan de la zone de dessin (255 par défaut).
fill(couleur) Définit la couleur de remplissage des formes (255 par défaut).
noFill() Désactive la couleur de remplissage.
stroke(couleur) Définit la couleur de tracé des formes (0 par défaut).
noStroke() Désactive le tracé du contour des figures.

Si noFill() et noStroke() sont exécutées en même temps, rien n'est tracé dans la zone de dessin.

Formes

Primitives 2d

L'origine du repère est située en haut à gauche. Les abscisses augmentent de gauche à droite, les ordonnées augmentent de haut en bas.

syntaxe description
point(x, y) Trace un point de coordonnées (x, y).
line(x1, y1, x2, y2) Trace un segment reliant les deux points de coordonnées (x1, y1) et (x2, y2).
circle(x, y, diametre) Tracer un cercle dont le centre a pour coordonnées (x, y) et dont le diamètre prend la valeur fixée.
ellipse(x, y, largeur, hauteur) Tracer une ellipse dont le centre a pour coordonnées (x, y) et dont la largeur et la hauteur prennent les valeurs fixées.
arc(x, y, largeur, hauteur, angleDebut, angleFin) Trace un arc de l'ellipse définie par ellipse(x, y, largeur, hauteur) entre les points repérés par les angles angleDébut et angleFin (en radians).
square(x, y, cote) Trace un carré dont le sommet en haut à gauche a pour coordonnées (x, y) et dont le côté prend la valeur fixée.
rect(x, y, largeur, hauteur) Trace un rectangle dont le sommet en haut à gauche a pour coordonnées (x, y), et dont la largeur et la hauteur prennent les valeurs fixées.
triangle(x1, y1, x2, y2, x3, y3) Trace un triangle dont les trois sommets ont pour coordonnées (x1, y1), (x2, y2), et (x3, y3).
quad(x1, y1, x2, y2, x3, y3, x4, y4) Trace un quadrilatère dont les quatre sommets ont pour coordonnées (x1, y1), (x2, y2), (x3, y3) et (x4, y4).

Tracés

syntaxe description
strokeWeight(epaisseur) Définit l'épaisseur du tracé en pixels (par défaut : 1 pixel).
noStroke() Désactive le tracé du contour des figures.
strokeCap(style) Définit le style de rendu des extrémités de ligne. Ces extrémités sont soit arrondies, carrées ou étendues, chacune spécifiée avec les paramètres correspondants: ROUND, SQUARE et PROJECT (par défaut : ROUND).

Événements

Touches du clavier

syntaxe description
key Nom de la dernière touche appuyée.
keyCode Code de la dernière touche appuyée.
keyIsPressed
isKeyPressed
Vaut True lorsqu'une touche du clavier est appuyée et False sinon.
keyIsDown(code)
keyIsDown(touche)
Vaut True si la touche concernée est appuyée et False sinon.

Souris

syntaxe description
mouseX, mouseY Coordonnées du pointeur de la souris
mouseIsPressed Vaut Truesi la souris est cliquée, et False sinon.
movedX Mouvement horizontal du pointeur de la souris depuis la dernière exécution de draw()
movedY Mouvement vertical du pointeur de la souris depuis la dernière exécution de draw()

Mathématiques

Angles

syntaxe description
angleMode(mode) Définit l'unité de mesure des angles. mode peut prendre la valeur RADIANS ou la valeur DEGREES. La valeur par défaut est RADIANS.
cos(), sin(), tan() Fonctions trigonométriques usuelles
degrees(mesure)
radians(mesure)
Convertit une mesure d'angle en degrés ou en radians
HALF_PI, PI, QUARTER_PI, TWO_PI Constantes permettant respectivement d'approcher les valeurs de \(\frac \pi 2\), \(\pi\), \(\frac \pi 4\), \(2\pi\)
Retour en haut de la page