Bezier curve control points projection

Question

I am using square Bezier curve. For drawing I use html5 canvas. I made simple function, that shows me 2 control points and I can easily modify curve just dragging control points. I made something like this

In my example I show 2 control points and users can drag them. But I want to show some points on curve, so I want to find projection of control points on curve that users can drag this fake points on curve and function will change original control points positions.

How can I 1 to 1 project control points on curve?

Answer 1

First off: the cubic-bezier.com site shows cubic curves, not square curves (which are actually called quadratic curves).

On to how you project a control point: you brute force it. I describe the details over on http://pomax.github.io/bezierinfo/#projections but the gist is that you simply run along the curve with increasing t value until you find the shortest distance to the off-curve point.

But that's not actually what you were asking, it sounds like. You were asking about how to change the curve shape based on dragging points on the curve itself, which has nothing to do with projecting the control points onto the curve, really. Manipulating a curve based on dragging a point on the curve is much more work than projecting; entirely doable, described over on http://pomax.github.io/bezierinfo/#moulding (the section prior to it is required reading if you want to implement this yourself), but far more complex.

The real solution here, obviously, is to not write the code for this yourself. Use a library that does all of this for you already and don't waste time reinventing the wheel, focus on using wheels other people already made to make your site UX better.