10) Dessiner avec curveVertex

curveVertex permet de dessiner des courbes vectorielles. Il existe d’autres méthodes en Processing pour utiliser les vecteurs, mais curveVertex est la méthode la plus simple, du moment que l’on a compris sa logique.

Précédent | 11/16 | Suivant

La fonction est documentée sur le site de processing, ici. Elle contient, dans les parenthèses, deux ou trois informations : les coordonnées en x,y et éventuellement z.

curveVertex(10,30);

Pour créer une forme vectorielle avec curveVertex, on commencera et finira par la déclaration beginShape()

beginShape();
// ici le dessin
endShape();

Attention, la majuscule sur Shape est importante.

A partir de là on va déclarer une série de points qui vont servir de point de relai pour le dessin vectoriel. On ne doit pas, avec curveVertex, déclarer de poignée comme dans une courbe de Bézier standard. Les poignées, pour rappel, sont des points qui influent sur la trajectoire du tracé. Chaque trait possède une poignée à son point de départ et d’arrivée.

CurveVertex gère lui-même les poignées, sauf la première et la dernière du tracé. C’est important a retenir : la première et la dernière commande curveVertex() d’un tracé sont des poignées et pas des points du dessin. En conséquence, un simple trait sera défini par 4 commandes :
- la première contient les coordonnées x et y de la poignée de départ
- la deuxième contient les coordonnées x et y du premier point
- la troisième contient les coordonnées x et y du deuxième point
- la quatrième contient les coordonnées x et y de la poignée de fin de tracé.

Ces quatre commandes dessinent dont une ligne droite, car les poignées ont les mêmes coordonnées que les deux points du dessin. Si nous modifions les coordonnées des deux poignées, nous allons dessiner une ligne unique composée de deux points, mais cette fois ce sera un arc.

Tous les points ajoutés dans le tracé avec curveVertex() créeront des points supplémentaires, avec des poignées "automatiques" guidant les courbes, ce qui suffit la plupart du temps.

Fermer une forme

Si on veut fermer une forme de manière fluide, il faudra jouer avec les poignées de manière réfléchie.

- Le premier et le dernier point sont identiques, on aura donc 5 points pour une forme dessinée en 4 points comme ce losange arrondi.
- la première poignée a les mêmes coordonnées que l’avant dernier point.
- la dernière poignée a les mêmes coordonnées que le deuxième point.