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

Answer 1

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

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