Apprendre à dessiner avec du code
La base: Création du "canvas"
Le setup() est une fonction qui s'éxécute au lancement du programme.
Ci-dessous, le programme crée une fenêtre (canvas) de dimension (300x300 pixels) avec une couleur de fond (background) (verte).
- Modifiez les dimensions du canvas. Par exemple: createCanvas(300, 100);
- Modifiez la couleur de fond.
Ainsi (0,0,0) donne du noir, (255,255,255) donne du blanc, (255,0,0) donne du rouge, (255,99,71) donne la couleur appelée tomato etc..
On trouve sur internet des sites qui donnent les codes couleurs: couleurWeb
Comment se repérer dans le canvas ?
Quand on travaille en 2 dimensions (2D), on utilise deux axes de coordonnées x et y correspondant respectivement à la largeur (axe horizontal) et à la hauteur (axe vertical).
Par convention, le coin en haut à gauche du canvas correspond aux valeurs x=0 et y=0. Les valeurs x sont croissantes vers la droite et les valeurs y sont croissantes vers le bas, contrairement à notre habitude en mathématique.
Ces valeurs x et y peuvent s'étendre théoriquement à l'infini, même si, en réalité, cela dépendra des dimensions de l’écran de l’ordinateur. C'est donc dans cet espace que nous allons dessiner.
Dessiner avec P5.Js
Comment dessiner une ligne, un point ?
Le programme ci-dessous dessine une ligne entre deux points dont les coordonnées sont (20,60) et (100,30).- Modifiez les coordonnées des deux points. Par exemple: line(0,0,180,100); et dessinez l'autre diagonale.
- Rajoutez d'autres lignes. Attention! toute instruction doit se terminer par un point-virgule.
l'instruction pour : "prendre un stylo rouge" est : stroke(255,0,0);
- Placez là au bon endroit pour que l'une des lignes que vous avez dessinée soit rouge. l'instruction pour ne plus utiliser de "stylo de couleur" est: noStroke();
- On peut également changer l'épaisseur du trait avec l'instruction : strokeWeight(3); ou encore strokeWeight(5);. Faites des essais.
Comment dessiner un rectangle ?
L'instruction pour dessiner un rectangle est : rect(x,y, largeur, hauteur); où x et y sont les coordonnées du coin supérieur gauche du rectangle, largeur et hauteur sont les dimensions du rectangle. comme dans l'exemple ci dessous.fill(255,0,0); est la couleur de remplissage(rouge) du rectangle.
noFill(); est l'instruction qui abandonne la couleur de remplissage.
- Rajoutez d'autres rectangles de couleurs différentes. Attention! toute instruction doit se terminer par un point-virgule.
- l'instruction : rect(50,100,100,50,10); il apparaît un 5ème nombre. Celui-ci permet d'arrondir les bords 10 pixels avant le coin. Essayez avec d'autres nombres.
Comment dessiner une ellipse ?
Linstruction pour dessiner une ellipse est : ellipse(x,y,diamètre horizontal, diamètre vertical); où x et y sont les coordonnées du centre de l'ellipse et les diamètres ...comme dans l'exemple ci-dessous.
- Rajoutez d'autres ellipses de couleurs différentes. Attention! toute instruction doit se terminer par un point-virgule.
- Le quatrième nombre qui apparaît dans la couleur de remplissage : fill(255,0,0,50); permet de rendre plus ou moins transparente la couleur de remplissage. Si on la met à 0 la transparence est maximale si on la met à 255 la transparence est nulle.
- Rajoutez des ellipses de formes, couleurs et de transparences différentes
Comment dessiner un triangle, un quadrilatère ?
l'instruction pour dessiner un triangle est : triangle(x1,y1,x2,y2,x3,y3); où x1,y1,x2,y2,x3,y3 sont les coordonnées des sommets du triangle.L'instruction pour dessiner un quadrilatère est : quad(x1,y1,x2,y2,x3,y3,x4,y4); où ....(devinez).
- Rajoutez (enlevez) des triangles et des quadrilatères
Comment dessiner une courbe de Bézier ?
Une courbe de Bézier est une courbe passant par le premier et le dernier de quatre points en ajustant au mieux la courbure par rapport au deux autres points.L'instuction pour dessiner une courbe de bezier est : bezier(x1,y1,x2,y2,x3,y3,x4,y4); où x1,y1,x2,y2,x3,y3,x4,y4 sont les coordonnées des quatre points dans l'ordre. Dans l'exemple ci-dessous on a dessiné une courbe de bézier.
Ce n'est pas la courbe la plus facile à manipuler...
- le premier et le dernier point sont des points d'ancrage, les deux autres points permettent de donner une courbure sans être atteints
- Modifiez cette courbe, rajoutez en d'autres et essayez une couleur de remplissage.
Des lignes et des courbes passants par des points...
Pour dessiner des lignes passants par des points on utilise l'instruction :beginShape();
vertex(x1,y1);
vertex(x2,y2);
.........
endShape();
- Cela dessine un polygone passant par tous les points
- Modifiez ce polygone, rajoutez d'autres points et essayez une couleur de remplissage.
Pour dessiner une courbe passant par des points on utilise l'instruction :
beginShape();
curveVertex(x1,y1);
curveVertex(x2,y2);
.........
endShape();
- Cela dessine une courbe passant par tous les points
- Le premier et le dernier point donnent une direction à la courbe, on peut se passer de cette direction en mettant pour les deux premiers points les mêmes coordonnées ainsi que pour les deux derniers.
- Modifiez l'exemple ci-dessous à volonté..et essayer une couleur de remplissage.
- Essayez de dessiner un coeur ♥
Comment dessiner des arcs de cercles ?
L'instruction pour dessiner un arc de cercle est :arc(x,y,diamètre horizontal,diamètre vertical,angle de départ, angle d'arrivée)
Par défaut les angles sont exprimés en radian, on peut forcer le programme à les lire en degré avec l'instruction :
angleMode(DEGREES);
- On a dessiné quelques arcs de cercles.
- les angles varient de -180 à 180.
- Modifiez ces arcs, rajoutez d'autres arcs et essayez une couleur de remplissage.
Maintenant vous savez l'essentiel pour réaliser votre propre dessin...
- Réalisez le dessin d'un smiley original.
Sur cette page on ne peut pas sauvegarder le travail que l'on a fait.
Pour garder une trace du programme que vous avez écrit, copiez le et coller le dans un fichier texte ( worpad,bloc note ...) et enregistrez le. On pourra le faire exécuter plus tard dans un autre environnement.