Cubic bezier curve that pass through 3 points

Question

There are points:

P0 (left-top)
P3 (right-bottom)
Control Point - a point that can be moved, a curve should pass through it

I need to connect them using a cubic curve, so that the end of the curve is 'approximately horizontal' and it is also possible to move the Control Point

So I put P2 on the coordinates P0.x P3.y (maybe this is the wrong decision)

Now I need to calculate P1 so that the curve passes through the Control Point

I saw a good example with a quadratic curve https://stackoverflow.com/a/66463100/20852881

Earlier i used the quadratic curve from this example, however, it became necessary to make the end of the curve 'approximately horizontal' (for such an arrangement P0 (left-top) and P3(right-bottom)) , so I look towards the cubic curve

There is infinite number of cubic curves with described properties, so it is worth to define more limitations (now you can vary three parameters - P2.X, P1.X, P1.Y) — MBo, Aug 03 '23 at 18:50

score 0 · Accepted Answer · answered Aug 05 '23 at 14:00

0

this is my solid-js solution, based on Article1 and mostly on Article2

https://codesandbox.io/s/interesting-architecture-2y5kgx

answered Aug 05 '23 at 14:00

cheech

45
4

So you have used some curves rather than one? – MBo Aug 05 '23 at 15:27
@MBo yes, i used Catmull-Rom splines, which are described in articles, which are converted to curves, for display via svg – cheech Aug 05 '23 at 16:10

Cubic bezier curve that pass through 3 points

1 Answers1