Adoucir les formes

Les polygones, c'est très bien pour tracer une étoile, mais pour d'autres choses, c'est un peu trop "anguleux". Comment dans ces conditions adoucir les formes ? P5JS propose deux solutions : les courbes par points de passage et les courbes de Bézier. Nous nous intéressons d'abord au courbe par point de passage qui sont les plus simples.

Le principe de ces courbes est assez simple. On donne un ensemble de point de passage et P5JS essaye de calculer la courbe qui passe par ces points la plus "arrondie" possible. En multipliant les points de passage, on peut arriver à avoir quelque chose de plus précis.

Techniquement, on utilise les fonctions de début et de fin de forme

beginShape();

endShape();

Et au lieu d'utiliser l'instruction Vertex, on utilise l'instruction

curveVertex(x,y);

Bien entendu, x et y sont les coordonnées des points de passage. Le premier et le dernier point de passage ne sont pas utilisés. Ils servent à indiquer la direction de la courbe. Dans l'exemple ci dessous, on a tracé une "larme". On voit la courbe bleu qui fait le contour de la larme, et pour bien voir le processus, les points de passage ont été matérialisé par des cercles rouges. Le premier et le dernier vertex sont reliés au reste par une ligne rouge pour bien prendre conscience de la façon dont ils indiquent la direction.