# Trouble configuring bezier start and end points for uniform arc

**URL:** <https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643>\
**Category:** Coding Questions\
**Created:** [April 25, 2021, 11:22pm UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643 "2021-04-25T23:22:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 25, 2021, 11:22pm UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/1 "2021-04-25T23:22:07Z")

</div>

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!

 ![Screen Shot 2021-04-25 at 7.12.29 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d6979be228734de5c7b0aac01bab86a66619a66d.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 25, 2021, 11:46pm UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/3 "2021-04-25T23:46:18Z")

</div>

Hello,

Consider making it with just vertex().

Processing example:

```auto
void setup() 
  {
  size(200, 200);
  
  translate(width/2, height/2);
  
  fill(128);
  beginShape();
  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));
  endShape(CLOSE);
  
  noFill();
  circle(0, 0, 90);
  }

```

You can generate all the missing points with a for() loop and some trigonometry:  
_[Trigonometry Primer \ Processing.org](https://processing.org/tutorials/trig/)_

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bdd9af3314c598f88111a8002bbe34a1dbe47d91.png)

`:)`

---

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 26, 2021, 12:35am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/4 "2021-04-26T00:35:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 26, 2021, 3:36am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/5 "2021-04-26T03:36:15Z")

</div>

Worked like a charm. Thanks again.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 26, 2021, 6:16am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/6 "2021-04-26T06:16:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 26, 2021, 10:30pm UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/7 "2021-04-26T22:30:17Z")

</div>

Hi @psemme ,

To draw an arc with the [`bezier()`](https://processing.org/reference/bezier_.html) function, you just need to indicate the control points as you did in your picture from the vector based drawing software :

![bezier1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38dc37d487f4721c9aba2268f6964d88cb28b7d8.png)

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/96b8b7ef5e4b80b94dc4fd639c469058885372ac.gif) ![bezier_anim_full_circle](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eb33c50039ac0f313368e46e1d93c0db12be37cc.gif)

So I found that to have an approximate circle shape, the ratio should be close to `0.555`, don’t ask me why 😉 (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()`](https://processing.org/reference/arc_.html) function.

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

> **Unfold me ;)**
>
> ```processing
> 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
> pushMatrix();
> translate(x, y);
> rotate(rotation);
>   
> // Bezier curves
> stroke(0);
> strokeWeight(4);
> noFill();
>   
> // Left portion
> stroke(#80C9A5);
> bezier(leftAnchorPoint.x, leftAnchorPoint.y,
> leftControlPoint.x, leftControlPoint.y,
> middleControlPointLeft.x, middleControlPointLeft.y,
> middleAnchorPoint.x, middleAnchorPoint.y);
>   
> // Right portion
> stroke(#DD79DE);
> bezier(middleAnchorPoint.x, middleAnchorPoint.y,
> middleControlPointRight.x, middleControlPointRight.y,
> rightControlPoint.x, rightControlPoint.y,
> rightAnchorPoint.x, rightAnchorPoint.y);
>   
> if (debug) {
> // Display handles
> stroke(#EA911C);
> strokeWeight(3);
>     
> 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
> strokeWeight(pointSize);
> point(leftControlPoint.x, leftControlPoint.y);
> point(middleControlPointLeft.x, middleControlPointLeft.y);
> point(middleControlPointRight.x, middleControlPointRight.y);
> point(rightControlPoint.x, rightControlPoint.y);
>     
> // Anchor points
> strokeWeight(4);
> fill(255);
> circle(leftAnchorPoint.x, leftAnchorPoint.y, pointSize + 0.1);
> circle(middleAnchorPoint.x, middleAnchorPoint.y, pointSize + 0.1);
> circle(rightAnchorPoint.x, rightAnchorPoint.y, pointSize + 0.1);
> }
>   
> popMatrix();
> }
> 
> float time = 0;
> 
> void setup() {
> size(300, 300);
> }
> 
> void draw() {
> background(255);
>   
> float strength = (cos(time) + 1) / 2.0;
> float circleSize = width * 0.8;
>   
> translate(width / 2, height / 2);
>   
> // Display reference circle
> noFill();
> stroke(#8395F5, 100);
> strokeWeight(6);
> circle(0, 0, circleSize);
>   
> // Display rectangle
> rectMode(CENTER);
> stroke(100, 100);
> strokeWeight(3);
> 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);
> textSize(20);
> fill(100);
> 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 😋 :

![bezier_anim_rotate](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/551a3427552cd67e632902c42cbd3f2321e159b1.gif)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 27, 2021, 12:50am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/8 "2021-04-27T00:50:25Z")

</div>

@psemme

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

> [@Achieving a noodle shape](https://discourse.processing.org/t/achieving-a-noodle-shape/28922/6):
>
> Hello, I created a simple shape with curveVertex() and overlaid them to show an outline. A line is a shape. slight_smile My first version for testing: 
> 
> > **Code**
> >
> > // Worm // v1.0.0 // GLV 2021-03-28 float amp; void setup() { size(640, 360); } void draw() { amp = map(mouseX, 0, width, 3\*height/4, height/4); background(255); strokeWeight(20); noFill(); stroke(0); myShape(); strokeWeight(15); stroke(255); myShape(); } void myShape() { beginShape(); curveVertex(width/8, h…

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

This easy to do with arc() as well:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a7e2a3ea186a81ae3c923ac96dab639674f687dc.png)

`:)`

---

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 27, 2021, 2:00am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/9 "2021-04-27T02:00:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 27, 2021, 2:02am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/10 "2021-04-27T02:02:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![psemme](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/psemme/32/12721_2.png) [@psemme](https://discourse.processing.org/u/psemme)\
**Post date:** [April 27, 2021, 2:05am UTC](https://discourse.processing.org/t/trouble-configuring-bezier-start-and-end-points-for-uniform-arc/29643/11 "2021-04-27T02:05:04Z")

</div>

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!