I’m having trouble getting this to draw the shape nicely. I have one function that evenly draws six petals, rotating them around, and one function to draw a single petal. The issue is not apparent when there is noStroke, but adding a stroke makes it clear. Some of the points are not pointy, and it only happens at certain rotations. Is it some way that the stroke is handled (I tried different joins and caps), should I try P2D instead (the curves are off in that)? Do I need more or less vertices? Any ideas?
float rotateAngle = 90;
void setup() {
size(800, 800);
// Draw the flower at the center with a radius of 300 pixels
strokeWeight(10);
strokeJoin(MITER);
strokeCap(SQUARE);
drawFlower(width / 2, height / 2, 300);
}
void drawFlower(float x, float y, float radius) {
pushMatrix();
translate(x, y);
rotate(rotateAngle);
for (int i = 0; i < 6; i++) {
pushMatrix();
rotate(TWO_PI / 6 * i);
vesicaPiscis(0, 0, radius);
popMatrix();
}
popMatrix();
}
void vesicaPiscis(float x, float y, float r) {
float apex = r - ((r * sqrt(3)) / 2);
beginShape();
vertex(x, y);
curveVertex(x, y);
curveVertex(x - apex, y - r / 2);
curveVertex(x, y - r);
curveVertex(x, y - r);
vertex(x, y - r);
curveVertex(x, y - r);
curveVertex(x + apex, y - r / 2);
curveVertex(x, y);
curveVertex(x, y);
vertex(x, y);
endShape(CLOSE);
}
I suggest using a vector graphics editor – anything where you can inspect the handles of a curve – to help you construct the seed of life with either a radius or diameter of 1.0.
Then, in Processing, I would use bezierVertex instead of curveVertex.
Below, for example, are screen captures from Blender, made with the help of some Python scripts.
This is a circle with six Bezier knots. You’ll start to see geometric relationships as you go, for example, sin(60) = sqrt(3) / 2 = 0.866025 approximately.
The orthonormal knots on the side of the vesica aren’t necessary because 120 - 60 is only 60 degrees arc length, but they make calculating its width easier.
Not sure how to quickly summarize the relationship between the coordinates in a Bezier shape and their handles. It’s easier to learn if you start with a circle where 4 Bezier knots approximate a 90 degree arc each. Tutorials on how to make a Bezier circle will often refer to a magic number called kappa: (sqrt(2.0) - 1.0) * (4.0 / 3.0) or approximately 0.55228 .
It’s inspiring to see what can be done with shaders.
I presented this code to my group of young programmers and I got a lot of exaggerated jawdrops.
It might be a little overwhelming for those still building foundational skills in Processing and graphics programming.
This is currently beyond my scope of understanding. Could you recommend how someone new to shaders might start learning to understand code like this?
As far as I know, scale within pushMatrix and popMatrix can inflate the stroke weight, exaggerating errors. I would try PVector methods to transform a shape instead. Single precision (32 bit) floating point error might be a contributing factor as well, but there’s little to be done about it with Processing’s methods.
I got flickering with the P2D renderer on version 4.4.1 .
Other than that, the default AWT renderer passes the strokeJoin constant on to BasicStroke. For an angle that sharp, BEVEL is what’s left when MITER raises problems.
If you had access to the AWT renderer directly, you might be able to fiddle with the miterLimit of the BasicStroke:
Shaders, fragment shaders in particular, tend to be very math based and often are largely based around manipulating the coordinate system. When people talk about making art with shaders, they usually mean fragment shaders such as the thousands of examples you can find on https://www.shadertoy.com/, though you can also make things with vertex shaders such as those on https://www.vertexshaderart.com/.
As to learning how to learn them, https://thebookofshaders.com/ is a great place to start. Inigo Quilez, who created shadertoy, is one of the gods of raymarching fragment shaders and he has a ton of resources at https://iquilezles.org/articles/.
Or you can search youtube for “shader programming” and find tons of stuff.
Some angles gave better miters than others!
The big question is why… but I will not be exploring that anytime soon.
It is a work around… the OP can decide what his project requirements are.
I removed the bulk of the code so the OP can have some fun exploring this!
