Profitez-en, après celui là c'est fini

Processing, cinquième cours

novembre 27th, 2008 Posted in Processing

On reprend, avec quelques nouvelles formes en deux dimensions. Nous avons vu la ligne, le rectangle et l’ellipse, voici à présent le point, le triangle, l’arc et le quad.

Le point

La commande point est simplissime, puisqu’elle s’invoque tout bêtement comme ceci : point(abscisse, ordonnee);, où abscisse et ordonnée sont des chiffres. Pour être plus précis, on peut ajouter un troisième axe (la cote), afin de placer le point dans l’espace et non sur un plan : point(abscisse, ordonnée, cote);. Mais nous ne parlerons pas de ça aujourd’hui.
Le point est soumis aux paramètres des traits en général, c’est à dire que l’on peut régler sa couleur avec stroke(couleur);, son épaisseur avec strokeWeight(épaisseur); et la précision visuelle de son affichage avec smooth();.
En revanche la commande noStroke(); n’a pas d’effet sur l’affichage des points.

La suite de points ci dessus a été obtenue avec ce programme :

size(530,50);
point(53,25);
strokeWeight(25);
point(159,25);
smooth();
point(265,25);
stroke(255,0,0);
strokeWeight(10);
point(371,25);
stroke(255,255,255);
point(477,25);

On peut noter la différence visuelle appréciable qui intervient après l’utilisation de la commande smooth(), sur le troisième point, au centre de l’image.

Le triangle

Le triangle, qui comme chacun sait est défini par trois points, se dessine de manière très simple avec la commande triangle(), qui est invoquée comme suit : triangle (x1, y1, x2, y2, x3, y3);, où x1 est l’abscisse du premier point, y1 l’ordonnée du premier point, et ainsi de suite. La commande triangle est sensible aux commandes fill (couleur de remplissage), stroke (couleur des traits), strokeWeight (épaisseur des traits) et smooth (qualité d’affichage).
Dans cet exemple, nous commençons par « peindre » la fenêtre en noir (background(0);) puis nous décrétons que la couleur de remplissage en cours est le rouge (fill(255,0,0);) et que les traits devront être dessinés en jaune (stroke(255,255,0);).
Enfin, nous traçons notre triangle avec trois points : (10,90), (50,10) et (90,90).

background(0);
fill(255,0,0);
stroke(255,255,0);
triangle(10,90,50,10,90,90);

L’arc

Le dessin des arcs n’est pas beaucoup plus compliqué, la syntaxe de la commande étant la suivante :
arc(x, y, largeur, hauteur, départ, arrivée); où x et y sont les coordonnées cartésiennes de l’origine de l’arc, ou largeur et hauteur sont les diamètres horizontaux et verticaux dans lesquels s’inscrit l’arc (comme pour les ellipses) et où, pour finir, départ et arrivée sont l’angle de départ et l’angle d’arrivée de l’arc. Par défaut, ces angles sont exprimés en radians (de zéro à deux fois Π) et non en degrés (de zéro à trois-cent soixante). Pour convertir des degrés en radians on utilise la commande radians (radians(180); donne Π (PI), par exemple.
Le pacman qui est dessiné ci-dessus est réalisé avec le code suivant :

fill(255,255,0);
arc(50, 50, 90, 90, radians(45), radians(315));

On remarque que les arcs sont soumis à la commande fill (remplissage). Ils sont aussi soumis aux commandes stroke, strokeweight et smooth, qui ne sont pas utilisées ici. On remarque par ailleurs que les valeurs de l’angle de départ et de l’angle d’arrivées ne sont pas des chiffres mais le résultat d’une conversion de chiffre. Pour processing, écrire radians(45) équivaut en fait à écrire 0.7853982.

Le quad

Le quad est un quadrilatère quelconque, repéré par quatre points. on le dessine à l’aide de cette commande.: quad (x1, y1, x2, y2, x3, y3, x4, y4);, où x1 et y1 sont les coordonnées d’un des quatre points, x2 et y2 les coordonnées d’un second point, x3 et y3 les coordonnées d’un troisième point et x4 et y4 les coordonnées du quatrième et dernier point. Les quads sont soumis aux commandes strokestrokeweight et smooth. Voici quelques exemples de quads.

Ils ont été obtenus avec ce programme :

quad (10,10,90,10,90,90,10,90);
quad (10,10,90,10,10,90,90,90);
quad (10,20,90,10,80,90,20,80);
smooth();
quad (10,20,90,10,80,90,20,80);
noStroke();
fill(200,190,0);
quad (10,20,90,10,80,90,20,80);

On remarque la différence d’affichage des quads dessinés après la commande smooth(); (le quatrième et le cinquième quad sont dans ce cas). On remarque aussi que les deux premiers quads, qui utilisent les mêmes points, mais pas dans le même ordre, ce qui fait que deux traits du second quad se croisent.

Nous pouvons nous arrêter là avec les formes dessinées par processing, pour l’instant, mais il en existe d’autres : les courbes et les courbes de bézier, les « vertex » (qui sont en fait des formes à n points reliés par des lignes ou par des courbes), et bien entendu les formes en 3D.
Nous ne sommes pas non plus rentrés dans les détails concernant le rendu des lignes, que permettent les commandes strokeCap(); et strokeJoin();, qui permettent de décider si une ligne se termine par un arrondi, par un angle ou par un biseau et qui permet de définir le rendu de l’intersection de deux lignes.

Prochain épisode : l’utilisation du hasard.

  1. 2 Responses to “Processing, cinquième cours”

  2. By MAnu on Fév 23, 2015

    Hello

    une question me titille en ce moment. Comment se font les répétitions de triangle ou autre quad ?

    merci

  3. By Jean-no on Fév 23, 2015

    @MAnu : dessiner plusieurs triangles ?
    Eh bien par exemple avec une boucle :

    for(int a=0;a<100;a+=5){
    triangle(a,a-10,a-10,a+5,a+10,a+5);
    }

    ...qui dessinera un certain nombre de triangles (une vingtaine), situés à 5 pixels d'écart latéral et vertical. Essayez le code, vous verrez le résultat.

Postez un commentaire


Veuillez noter que l'auteur de ce blog s'autorise à modifier vos commentaires afin d'améliorer leur mise en forme (liens, orthographe) si cela est nécessaire.
En ajoutant un commentaire à cette page, vous acceptez implicitement que celui-ci soit diffusé non seulement ici-même mais aussi sous une autre forme, électronique ou imprimée par exemple.