Dans ce chapitre nous allons voir comment on peut dessiner des formes dans notre canevas, et utiliser la fonction principale draw(). L'axe des abscisses est nommée x, l'axe des ordonnées est nommée y.
Pour se familiariser dans un premier temps avec la notion de matrice, nous allons dessiner un point avec la fonction point() qui prend deux paramètres, sa position sur l'axe des abscisses et sa position sur l'axe des ordonnées. Pour être sur de voir ce que l'on va dessiner, nous allons ajouter la fonction strokeWeight() qui permet de grossir l'épaisseur des traits et des points. Nous passons le paramètre à 10, mais à vous de jouer avec cela.
function setup() {
createCanvas(windowWidth,windowHeight); //pleine page
background(0); //fond noir
strokeWeight(10); //épaisseur à 10
stroke(255,0,0); //couleur des traits et des points rouge
point(100,130); //position du point
}
Une ligne (ou droite) est tracée par deux points reliés entre eux; ainsi pour dessiner une ligne, nous allons entrer quatre paramètres, les positions x et y du premier et du second point.
function setup() {
createCanvas(windowWidth,windowHeight); //pleine page
line(0,0,width,height);//les méthodes width et height récupèrent la valeur de la taille du canevas
}
La fonction rect() permet de dessiner des rectangles (et donc des carrés). Cette fonction prend quatre paramètres, d'abord les positions du premier point référent en x et en y (le premier point est le sommet à haut à gauche de la forme), ensuite la largeur puis la hauteur du rectangle.
function setup() {
createCanvas(windowWidth,windowHeight); //pleine page
rect(0,0,40,40);//carré placé tout en haut à gauche; les arêtes font 40 pixels
}
La fonction ellipse() permet de dessiner des formes circulaires. Elle prend quatre paramètres:
D'abord sa position en x et en y de son centre puis son diamètre horizontal et enfin son diamètre vertical.
function setup() {
createCanvas(windowWidth,windowHeight); //pleine page
ellipse(width/2,height/2, 30,30); //le cercle est placé au centre et fait 30 pixels de diamètre
}
On peut dessiner bien d'autres choses, je n'ai exposé ici que les formes qui me paraissait primordiales à connaitre. Si vous êtes curieux de voir d'autres fonctions de dessin plus spécifiques, vous pouvez également vous référer à la documentation sur le site officiel: http://p5js.org/reference/#Shape
Pour l'instant nous nous sommes seulement contenté d'afficher des formes. Nous allons essayer d'ajouter à notre programme une couche d'interactivité avec les méthodes mouseX et mouseY, qui permettent de récupérer respectivement la position horizontale et verticale de la souris. Mais pour que le script puisse répondre nous allons devoir utiliser la fonction draw() qui permet de récupérer des informations à chaque itération (le canevas s'actualise perpetuellement), car setup() n'affiche qu'une seule fois des images.
Dans l'exemple suivant, nous voulons dessiner des carrés avec la souris: il faut que la position du carré soit celle de la souris.
function setup() {
createCanvas(windowWidth,windowHeight); //pleine page
}
function draw(){
rect(mouseX,mouseY,30,30); //dessine des carrés avec le curseur
}
a éditer
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.