javascriptgeometrycubic-bezier

Cubic bezier curve that pass through 3 points


There are points:

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


Solution

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

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