Hi,
I am trying to draw a shape like this:
It is important that the top and bottom of the shape match the radius of a perfect circle.
I have tried doing this with shapes and beziérs but I can’t get my head around to get it perfect. I also tried masking different circles but can not get the result I desire…
Ideally I would have a function that takes in the top radius and the bottom radius and then spits out a shape like this 
Can’t you just create vertexes?
Like instead of calculating all circle vertexes, just do it between angle A and B, then reduce the radius of the circle and go from B to A.
So this is it.
Could you elaborate a bit more?
I tried using vertexes, curve vertexes and bezier vertexes but can’t get it to work…
Hey,
I add to do the same thing not so long ago. Please find below a function a made to approximate arcs construction with bezier points.
As explained in the code, the function is constructed the same way the arc() function is so it stays coherent with it.
final float cx = 300; // x-coordinate of the center of the arc
final float cy = 300; // y-coordinate of the center of the arc
final float r1 = 150; // 1st radius
final float r2 = 250; // 1st radius
final float startAngle = QUARTER_PI; // Angle at which to start drawing the arc
final float stopAngle = 3 * QUARTER_PI; // Angle at which to stop drawing the arc
void setup() {
size(600, 600);
background(20);
// Define style
noFill();
stroke(230);
strokeWeight(4);
// Draw the shape
beginShape();
vertex(cx + r1 * cos(startAngle), cy + r1 * sin(startAngle));
arcVertex(cx, cy, r1, startAngle, stopAngle, 1);
vertex(cx + r2 * cos(stopAngle), cy + r2 * sin(stopAngle));
arcVertex(cx, cy, r2, stopAngle, startAngle, -1);
vertex(cx + r1 * cos(startAngle), cy + r1 * sin(startAngle));
endShape();
}
/**
* Use bezierVertex to approximate an arc
* The expected parameters are similar to the one found in the arc() function
* Since it uses bezierVertex to approximate an arc, it must be prefaced with a call to vertex() to set the first anchor point of the arc.
*
* @param cx x-coordinate of the center of the arc
* @param cy y-coordinate of the center of the arc
* @param r radius of the arc
* @param a1 angle to start the arc, specified in radians
* @param a2 angle to stop the arc, specified in radians
* @param rotation the direction in which to draw the arc. 1 for clockwise. -1 for counterclockwise
*/
void arcVertex(float cx, float cy, float r, float a1, float a2, int rotation) {
a1 = a1 % TWO_PI;
a2 = a2 % TWO_PI;
float angleSpan;
if (rotation == 1) {
angleSpan = ((a2 - a1) % TWO_PI + TWO_PI) % TWO_PI;
} else {
rotation = -1;
angleSpan = ((a1 - a2) % TWO_PI + TWO_PI) % TWO_PI;
}
int nbOfExtraPts = (int)(angleSpan / HALF_PI);
float angleStep = angleSpan / (nbOfExtraPts + 1);
ArrayList<PVector> anchorPts = new ArrayList<PVector>();
anchorPts.add(new PVector(cx + r * cos(a1), cy + r * sin(a1)));
for (int i = 0; i < nbOfExtraPts; i++) {
anchorPts.add(new PVector(cx + r * cos(a1 + rotation * (i + 1) * angleStep), cy + r * sin(a1 + rotation * (i + 1) * angleStep)));
}
anchorPts.add(new PVector(cx + r * cos(a2), cy + r * sin(a2)));
for (int i = 0; i < anchorPts.size() - 1; i++) {
PVector start = anchorPts.get(i);
PVector end = anchorPts.get(i + 1);
float ax = start.x - cx;
float ay = start.y - cy;
float bx = end.x - cx;
float by = end.y - cy;
float q1 = ax * ax + ay * ay;
float q2 = q1 + ax * bx + ay * by;
float k2 = (4/3.0) * (sqrt(2 * q1 * q2) - q2) / (ax * by - ay * bx);
float x2 = cx + ax - k2 * ay;
float y2 = cy + ay + k2 * ax;
float x3 = cx + bx + k2 * by;
float y3 = cy + by - k2 * bx;
bezierVertex(x2, y2, x3, y3, end.x, end.y);
}
}
EDIT:
Corrected some mistakes in the code and added your shape as an exemple
I got something like this:
I declared a start and end angle. The loop goes clockwise, and doesn’t work if END < START.
I added a current angle, I named C.
So first I set C to START, after that I slowly incremented it until it surpassed END.
After that, I set C to END, to make sure there were no overshoots while incrementing.
Now I just repeated the process, but decreased the radius used and reversed the increment. So the increment is now negative, which makes it go in the opposite direction.
Here is the code:
float St = 0.1, Sp = PI*0.4,c=0;
float increment = 0.001;
float r1 = 250, r2 = 150;
void setup() {
size(600,600);
fill(255);
noStroke();
}
void draw() {
background(0);
translate(width*0.5,height*0.5);
beginShape();
c = St;
for(;c<Sp;c+=increment) { //I ignored the first part of the for loop, since the counter already exists. I could set C to St at the start, but I feel like it would be less clear.
vertex(cos(c)*r1,sin(c)*r1);
}
c = Sp;
for(;c>St;c-=increment) {
vertex(cos(c)*r2,sin(c)*r2);
}
endShape();
}
Hello,
Useful but some of the code is not well formatted:
Simple example:
float angle;
void setup()
{
size(400, 400);
frameRate(1); //Slow things down...
background(0);
}
void draw()
{
float r = 100;
float x = r * cos(radians(angle)) + 200;
float y = r * sin(radians(angle)) + 200;
angle += 6;
stroke(0, 255, 0);
strokeWeight(5);
point(x, y);
}
You can add:
And voila!
Have fun!
:)
Lots of resources here:
Thank you for all your suggestions!! I will try them soon.