Calculate bezier curve control points with given angle

Question

Lets assume we have a bezier curve with a start p0 of (0, 0) and an end p4 of (100, 0). Right now it would basically be a line with no curve yet. Now lets assume I want to calculate the two missing control points (p1 p2) based on a given angle. What is the best way to achieve this?

Lets assume I wanted something like this:

https://1.bp.blogspot.com/_W3ZUYKgeEpk/SDcAerq1xkI/AAAAAAAAAAc/W9OnovkzgPI/s400/RectanglularControlPoly.jpg

I mean depending on the position of the control points it forms a triangle of some sort, that is why I was wondering if its possible.

this is a math problem. can be posted on [stackexchange](http://math.stackexchange.com) — S.Serpooshan, Jan 11 '17 at 08:18
what angle do you have? can you specify the angle between which points/lines? 1 angle or 2? — S.Serpooshan, Jan 11 '17 at 08:23
@S.Serp basically lets say an angle of 45 degrees for both control points, so just 1 angle. — Asperger, Jan 11 '17 at 09:11
Do you know the problem's solution manually and convert it to c# code ? Or are you looking for problem solution ? — Mehmet, Jan 11 '17 at 09:21
@Mehmet well, im not sure how to explain. Lets assume I create a GraphicsPath and add bezier curves on to that path. Every time I add a curve I go through a lot of trial and error to get the curve I desire by tweaking control points. However, I was thinking of a function that takes an angle as a parameter and then sets the position of control point in relation to the start or end point. — Asperger, Jan 11 '17 at 09:26
I doubt your problem is well defined. Which angle do you mean? There is none in your sketch. — TaW, Jan 11 '17 at 21:05
Specifying angles for the slope at the start and end of a cubic Bezier curve will not uniquely decide the two middle control points. — fang, Jan 12 '17 at 03:10

score 3 · Accepted Answer · edited May 23 '17 at 10:29

3

Controls points that go through a Bezier point with a given angle, lie on the tangent with that angle.

The resulting bending will be the softer the farther away the control point is chosen, so there are many different solutions with the same angle and different curvature..

To find control points with equally soft curvatures for two Bezier points simply find the crossing of the two tangents! Use the crossing as the common control point for both segments, i.e. have C1 = C2.

For any sort of symmetrical curve you need to keep the deviations from the crossing symmetrical, i.e. 50%, 10% etc..

Note that for optimizing the overall shape one also needs to look at the neighbouring points; in general the provided GDI function does a good job; so it is worth considering simply adding more Bezier points for controlling the shape; but of course using the perfect set of control points is the most economic solution.

Update: I have added an example of how well a circle (orange) gets approximated by the math in this interesting post.

Short version: An exact solution isn't really possible but the best fit for a quarter circle is to move the control point to ~0.55% of the crossing point. (d=r*4*(sqrt(2)-1)/3). Sometimes instead of using a 4 segment solution an 8 segment solution is used for even closer approximation..

private void button_Click(object sender, EventArgs e)
{
    int w = Math.Abs(P2.Left - P1.Left);
    int h = Math.Abs(P2.Top - P1.Top);
    C2.Left =  (int) (P2.Left + w * 0.5523f);
    C2.Top = P2.Top;
    C1.Left = P1.Left;
    C1.Top = (int) (P1.Top + h * 0.5523f);
    C1.Parent.Invalidate();
}

The code uses Labels for the points and control points..

Btw: Adding ellipses/circles to a GraphicsPath will create bezier curves that seem to be approximated just like that.

edited May 23 '17 at 10:29

Community

1
1

answered Jan 12 '17 at 10:03

TaW

53,122
8
69
111

What if I wanted a perfect circle? Or lets say quarter of a circle. How do I calculate this? I mean I am really trying to calculate things so that both control points are symmetrical in position. resulting in an even curve (if I can call it that). – Asperger Jan 12 '17 at 10:09
I just read you said: crossing of the two tangents. Interesting. Could you elaborate on that matter? I can of course google it but since you mentioned it, would be cool. – Asperger Jan 12 '17 at 10:10
For a quarter circle the control point must move back, about halfway from the tangents' crossing or else the result will look to pointed. Of course the normal way is to use DrawArc for ellipse segments.. I can't provide the math for an exact solution atm, though.. For any sort of symmwtrical solution you need to keep deviation from the crossing symmetrical, i.e. 50%, 10% etc.. Note that for optimizing the overall shape one also needs to look at the neighbouring points; in general the provided function does a good job; so it is worth considering simply adding more Bezier points for control. – TaW Jan 12 '17 at 10:40
Right! Thanks for those great answers – Asperger Jan 12 '17 at 12:25
Accepted and will you a bounty bonus as well once available – Asperger Jan 12 '17 at 12:26
For a deeper analysis of approximating a circle via bezier curves see [here!](http://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves). Short version: An exact solution isn't really possible but the best fit for a quarter is to move the control point to ~0.55% of the crossing point. (_` d=r*4*(sqrt(2)-1)/3`_) – TaW Jan 12 '17 at 13:07

Calculate bezier curve control points with given angle

1 Answers1