Procession - Historique des versions

Admin : /* Formes */

2020-02-03T12:38:52Z

‎Formes

Admin : /* Contours */

2020-02-03T12:37:58Z

‎Contours

Admin : /* Ellipse */

2020-02-03T12:37:02Z

‎Ellipse

Admin : /* Espace de dessin */

2020-02-03T12:32:48Z

‎Espace de dessin

Admin le 3 février 2020 à 12:13

2020-02-03T12:13:23Z

Admin : Page créée avec « https://fr.flossmanuals.net/processing/ = Espace de dessin = L'espace de dessin constitue l'espace de représentation proprement dit. Cette fenêtre de visualisation... »

2020-02-03T12:12:14Z

Page créée avec « https://fr.flossmanuals.net/processing/ = Espace de dessin = L'espace de dessin constitue l'espace de représentation proprement dit. Cette fenêtre de visualisation... »

Nouvelle page

https://fr.flossmanuals.net/processing/

= Espace de dessin =

L'espace de dessin constitue l'espace de représentation proprement dit. Cette fenêtre de visualisation affichera vos réalisations dans Processing en 2 ou 3 dimensions.

Cet espace est créé par l'instruction size() qui prend deux arguments :
size(largeur,hauteur);.

size(200,200);

size(200,400);

@@ Ligne 36 : / Ligne 36 : @@
 Le triangle est un plan constitué de trois points. L'invocation de triangle(x1,y1,x2,y2,x3,y3) définit les trois points de ce triangle :
-triangle(10, 90, 50, 10, 90, 90);
+  triangle(10, 90, 50, 10, 90, 90);
 triangle.tiff.png
@@ Ligne 44 : / Ligne 44 : @@
 Un arc ou section de cercle, peut se dessiner avec l'appel de arc(x, y, largeur, hauteur, début, fin), où la paire x, y définit le centre du cercle, la seconde paire ses dimensions et la troisième paire, le début et la fin de l'angle d'arc en radians :
-arc(50, 50, 90, 90, 0, PI);
+  arc(50, 50, 90, 90, 0, PI);
 arc.tiff.png
@@ Ligne 52 : / Ligne 52 : @@
 Le quadrilatère se construit en spécifiant quatre paires de coordonnées x et y sous la forme quad(x1,y1,x2,y2,x3,y3,x4,y4) dans le sens horaire :
-quad(10, 10, 30, 15, 90, 80, 20, 80);
+  quad(10, 10, 30, 15, 90, 80, 20, 80);
 quad.tiff.png
@@ Ligne 60 : / Ligne 60 : @@
 Une courbe se dessine à l'aide de curve(x1, y1, x2, y2, x3, y3, x4, y4), où x1 et y1 définissent le premier point de contrôle, x4 et y4 le second point de contrôle , x2 et y2 le point de départ de la courbe et x3, y3 le point d'arrivée de la courbe :
-curve(0, 300, 10, 60, 90, 60, 200, 100);
+  curve(0, 300, 10, 60, 90, 60, 200, 100);
 courbe1.tiff.png
@@ Ligne 68 : / Ligne 68 : @@
 La courbe de type Bézier se construit à l'aide de bezier(x1,y1,x2,y2,x3,y3,x4,y4)
-bezier(10, 10, 70, 30, 30, 70, 90, 90);
+  bezier(10, 10, 70, 30, 30, 70, 90, 90);
 courbe2.tiff.png
@@ Ligne 76 : / Ligne 76 : @@
 L'appel de curveVertex() dessine plusieurs paires de coordonnées x et y, entre deux points de contrôle, sous la forme curveVertex(point de contrôle initial,xN,yN,xN,yN,xN,yN, point de contrôle final) ce qui permet de construire des courbes lissées :
-beginShape();
+ beginShape();
-curveVertex(0, 100);
+ curveVertex(0, 100);
-curveVertex(10, 90);
+ curveVertex(10, 90);
-curveVertex(25, 70);
+ curveVertex(25, 70);
-curveVertex(50, 10);
+ curveVertex(50, 10);
-curveVertex(75, 70);
+ curveVertex(75, 70);
-curveVertex(90, 90);
+ curveVertex(90, 90);
-curveVertex(100, 100);
+ curveVertex(100, 100);
-endShape();
+ endShape();
 curveVertex.tiff.png
@@ Ligne 92 : / Ligne 92 : @@
 Plusieurs formes libres peuvent être dessinés par une succession de points en utilisant la suite d'instructions beginShape(),vertex(x,y),...,endShape(). Chaque point se construit par ses coordonnées x et y. La fonction CLOSE dans endShape(CLOSE) indique que la figure sera fermée, c'est-à-dire que le dernier point sera relié au premier, comme dans l'exemple ci-dessous de dessin d'un hexagone :
-beginShape();
+ beginShape();
-vertex(50, 10);
+ vertex(50, 10);
-vertex(85, 30);
+ vertex(85, 30);
-vertex(85, 70);
+ vertex(85, 70);
-vertex(50, 90);
+ vertex(50, 90);
-vertex(15, 70);
+ vertex(15, 70);
-vertex(15, 30);
+ vertex(15, 30);
-endShape(CLOSE);
+ endShape(CLOSE);
 hexagone.tiff.png
@@ Ligne 112 : / Ligne 112 : @@
 nostroke.tiff.png
 Remplissage

@@ Ligne 108 : / Ligne 108 : @@
 Vous avez remarqué que jusqu'à présent, toutes les figures données en exemple comportent un contour, ainsi qu'une surface de remplissage. Si vous voulez rendre invisible le contour, utilisez noStroke() en faisant bien attention de le placer avant la forme à dessiner :
-noStroke();
+  noStroke();
-quad(10, 10, 30, 15, 90, 80, 20, 80);
+  quad(10, 10, 30, 15, 90, 80, 20, 80);
 nostroke.tiff.png
@@ Ligne 116 : / Ligne 116 : @@
 De la même manière, il est possible de dessiner des formes sans surface de remplissage avec l'instruction  noFill() :
-noFill();
+  noFill();
-quad(10, 10, 30, 15, 90, 80, 20, 80);
+  quad(10, 10, 30, 15, 90, 80, 20, 80);
 nofill.tiff.png

← Version précédente		Version du 3 février 2020 à 12:37
Ligne 30 :		Ligne 30 :

	ellipse(50, 50, 80, 80);		ellipse(50, 50, 80, 80);
		+
		+
		+	== Le triangle ==
		+
		+	Le triangle est un plan constitué de trois points. L'invocation de triangle(x1,y1,x2,y2,x3,y3) définit les trois points de ce triangle :
		+
		+	triangle(10, 90, 50, 10, 90, 90);
		+
		+	triangle.tiff.png
		+
		+	== L'arc ==
		+
		+	Un arc ou section de cercle, peut se dessiner avec l'appel de arc(x, y, largeur, hauteur, début, fin), où la paire x, y définit le centre du cercle, la seconde paire ses dimensions et la troisième paire, le début et la fin de l'angle d'arc en radians :
		+
		+	arc(50, 50, 90, 90, 0, PI);
		+
		+	arc.tiff.png
		+
		+	== Le quadrilatère ==
		+
		+	Le quadrilatère se construit en spécifiant quatre paires de coordonnées x et y sous la forme quad(x1,y1,x2,y2,x3,y3,x4,y4) dans le sens horaire :
		+
		+	quad(10, 10, 30, 15, 90, 80, 20, 80);
		+
		+	quad.tiff.png
		+
		+	== Courbe ==
		+
		+	Une courbe se dessine à l'aide de curve(x1, y1, x2, y2, x3, y3, x4, y4), où x1 et y1 définissent le premier point de contrôle, x4 et y4 le second point de contrôle , x2 et y2 le point de départ de la courbe et x3, y3 le point d'arrivée de la courbe :
		+
		+	curve(0, 300, 10, 60, 90, 60, 200, 100);
		+
		+	courbe1.tiff.png
		+
		+	== Courbe Bézier ==
		+
		+	La courbe de type Bézier se construit à l'aide de bezier(x1,y1,x2,y2,x3,y3,x4,y4)
		+
		+	bezier(10, 10, 70, 30, 30, 70, 90, 90);
		+
		+	courbe2.tiff.png
		+
		+	== Courbe lissée ==
		+
		+	L'appel de curveVertex() dessine plusieurs paires de coordonnées x et y, entre deux points de contrôle, sous la forme curveVertex(point de contrôle initial,xN,yN,xN,yN,xN,yN, point de contrôle final) ce qui permet de construire des courbes lissées :
		+
		+	beginShape();
		+	curveVertex(0, 100);
		+	curveVertex(10, 90);
		+	curveVertex(25, 70);
		+	curveVertex(50, 10);
		+	curveVertex(75, 70);
		+	curveVertex(90, 90);
		+	curveVertex(100, 100);
		+	endShape();
		+
		+	curveVertex.tiff.png
		+
		+	== Formes libres ==
		+
		+	Plusieurs formes libres peuvent être dessinés par une succession de points en utilisant la suite d'instructions beginShape(),vertex(x,y),...,endShape(). Chaque point se construit par ses coordonnées x et y. La fonction CLOSE dans endShape(CLOSE) indique que la figure sera fermée, c'est-à-dire que le dernier point sera relié au premier, comme dans l'exemple ci-dessous de dessin d'un hexagone :
		+
		+	beginShape();
		+	vertex(50, 10);
		+	vertex(85, 30);
		+	vertex(85, 70);
		+	vertex(50, 90);
		+	vertex(15, 70);
		+	vertex(15, 30);
		+	endShape(CLOSE);
		+
		+	hexagone.tiff.png
		+
		+
		+	== Contours ==
		+
		+	Vous avez remarqué que jusqu'à présent, toutes les figures données en exemple comportent un contour, ainsi qu'une surface de remplissage. Si vous voulez rendre invisible le contour, utilisez noStroke() en faisant bien attention de le placer avant la forme à dessiner :
		+
		+	noStroke();
		+	quad(10, 10, 30, 15, 90, 80, 20, 80);
		+
		+	nostroke.tiff.png
		+	Remplissage
		+
		+	De la même manière, il est possible de dessiner des formes sans surface de remplissage avec l'instruction noFill() :
		+
		+	noFill();
		+	quad(10, 10, 30, 15, 90, 80, 20, 80);
		+
		+	nofill.tiff.png
		+
		+	Par défaut, l'arrière-fond de la fenêtre de visualisation (l'espace de dessin) est gris neutre, les contours des figures sont noirs, et la surface de remplissage est blanche. Vous apprendrez au prochain chapitre comment modifier les couleurs à votre convenance.
		+
		+	= Primitives 3D =
		+
		+	Les formes prédéfinies disponibles en 3 dimensions (primitives 3D) peuvent être réalisées de manière simple en appelant size(x, y, P3D) au début de notre sketch puis en employant en fonction de vos besoins les instructions sphere(taille) et box(longueur, largeur, profondeur). Il est également possible de produire des effets d'éclairage sur nos formes tridimensionnelles à l'aide de lights().
		+
		+	== La sphère ==
		+
		+	size(100, 100, P3D);
		+	noStroke();
		+	lights(); // éclairer l'objet 3D
		+	translate(50, 50, 0); // voir Chapitre "Transformations"
		+	sphere(28);
		+
		+	sphere.tiff
		+
		+	== La boîte ==
		+
		+	size(100, 100, P3D);
		+	noStroke();
		+	lights();
		+	translate(50, 50, 0);
		+	rotateY(0.5);
		+	box(40);
		+
		+	cube.tiff

← Version précédente		Version du 3 février 2020 à 12:32
Ligne 11 :		Ligne 11 :

	size(200,200);		size(200,200);
		+
		+
		+	= Formes =
		+
		+
		+	== Point ==
		+
		+	point(50, 50);
		+
		+	== Ligne ==
		+
		+	line(15, 90, 95, 10);
		+
		+	== Rectangle ==
		+
		+
		+	== Ellipse ==
		+
		+	ellipse(50, 50, 80, 80);

@@ Ligne 7 : / Ligne 7 : @@
 Cet espace est créé par l'instruction size() qui prend deux arguments :
   size(largeur,hauteur);.
   size(200,200);