Trouble configuring bezier start and end points for uniform arc

I’d like to create a shape that is, in essence, two, uniform concentric arcs connected by lines (radius segments) so that I can fill them individually. I’ve come close to doing it with Bezier curves but it’s still not right. In Illustrator I see how the control points are configured to create the arc but I can’t seem to duplicate it in P5. I’ve attached a screenshot from Illustrator to depict the scenario. Maybe curveVertex would be easier?? Thanks for any insights!

1 Like


Consider making it with just vertex().

Processing example:

void setup() 
  size(200, 200);
  translate(width/2, height/2);
  vertex(0, 40);
  vertex(0, 50);
  vertex(50*cos(TAU/8), 50*sin(TAU/8));
  vertex(50, 0);
  vertex(40, 0);
  vertex(40*cos(TAU/8), 40*sin(TAU/8));
  circle(0, 0, 90);

You can generate all the missing points with a for() loop and some trigonometry:
Trigonometry Primer \



1 Like

Now that’s a fascinating idea I had not considered!! Thank you! I’ll give that a shot.

1 Like

Worked like a charm. Thanks again.

1 Like

Hi, if you still want to you brazier curve, what you wanna draw is a half circle.

Look online for how to approximate circle with bezier curves and it will gives you the values to input.

Hi @psemme ,

To draw an arc with the bezier() function, you just need to indicate the control points as you did in your picture from the vector based drawing software :


You have two bezier curves (from left to right) that use the same middle point as anchor point.

The way the control points are computed is based on the ratio of the radius multiplied by the radius of the arc, see this animation :

bezier_anim bezier_anim_full_circle

So I found that to have an approximate circle shape, the ratio should be close to 0.555, don’t ask me why :wink: (it can surely be computed with math)

The only downside to this is that you can’t really fill two bezier curves without using beginShape and endShape as @glv wrote.

Note that you could have done it simply using the arc() function.

Here is the code (very verbose) to make that in Processing :

Unfold me ;)
void bezierArc(float x, float y, float diameter, float rotation, float strength, boolean debug) {
  float radius = diameter / 2.0;
  PVector leftAnchorPoint = new PVector(-radius, 0);
  PVector leftControlPoint = new PVector(-radius, -radius * strength);
  PVector middleAnchorPoint = new PVector(0, -radius);
  PVector middleControlPointLeft = new PVector(-radius * strength, -radius);
  PVector middleControlPointRight = new PVector(radius * strength, -radius);
  PVector rightAnchorPoint = new PVector(radius, 0);
  PVector rightControlPoint = new PVector(radius, -radius * strength);
  // Apply transform
  translate(x, y);
  // Bezier curves
  // Left portion
  bezier(leftAnchorPoint.x, leftAnchorPoint.y,
         leftControlPoint.x, leftControlPoint.y,
         middleControlPointLeft.x, middleControlPointLeft.y,
         middleAnchorPoint.x, middleAnchorPoint.y);
  // Right portion
  bezier(middleAnchorPoint.x, middleAnchorPoint.y,
         middleControlPointRight.x, middleControlPointRight.y,
         rightControlPoint.x, rightControlPoint.y,
         rightAnchorPoint.x, rightAnchorPoint.y);
  if (debug) {
    // Display handles
    line(leftAnchorPoint.x, leftAnchorPoint.y, leftControlPoint.x, leftControlPoint.y);
    line(middleAnchorPoint.x, middleAnchorPoint.y, middleControlPointLeft.x, middleControlPointLeft.y);
    line(middleAnchorPoint.x, middleAnchorPoint.y, middleControlPointRight.x, middleControlPointRight.y);
    line(rightAnchorPoint.x, rightAnchorPoint.y, rightControlPoint.x, rightControlPoint.y);
    // Points
    float pointSize = 10;
    // Control points
    point(leftControlPoint.x, leftControlPoint.y);
    point(middleControlPointLeft.x, middleControlPointLeft.y);
    point(middleControlPointRight.x, middleControlPointRight.y);
    point(rightControlPoint.x, rightControlPoint.y);
    // Anchor points
    circle(leftAnchorPoint.x, leftAnchorPoint.y, pointSize + 0.1);
    circle(middleAnchorPoint.x, middleAnchorPoint.y, pointSize + 0.1);
    circle(rightAnchorPoint.x, rightAnchorPoint.y, pointSize + 0.1);

float time = 0;

void setup() {
  size(300, 300);

void draw() {
  float strength = (cos(time) + 1) / 2.0;
  float circleSize = width * 0.8;
  translate(width / 2, height / 2);
  // Display reference circle
  stroke(#8395F5, 100);
  circle(0, 0, circleSize);
  // Display rectangle
  stroke(100, 100);
  square(0, 0, circleSize);
  // Display arcs
  bezierArc(0, 0, circleSize, 0, strength, true);
  bezierArc(0, 0, circleSize, PI, strength, true);
  // Display ratio text
  textAlign(CENTER, CENTER);
  text(strength, 0, 0);
  time += 0.02;

I made this post to explain you how you can effectively use bezier curves to make your own arc function (half circle) but you can have fun with this by animating the parameters :yum: :



And another way which overlays shapes with different strokeWidth():

I used:
strokeCap(PROJECT); // This seemed to provide square ends

This easy to do with arc() as well:


Thanks jb4x - I looked online and saw some entries on what values to use. I’ll give it a try. Thx again.

Hi Joseph - that’s a seriously thorough answer! Thank you! I like the solution from @giv because I can both fill the shape and then manipulate the vertices further in another step. But you’ve opened my eyes on the possibilities of animating beziers! Thanks again.

1 Like

Thanks @giv - I used that approach earlier and it works great, but I like the option of playing with the vertices that make up the original shape, in some later step, and the strokeWeight approach doesn’t allow that. Thanks for continuing to think up answers!

1 Like