Search code examples
javascriptmathcanvascurvequadratic

Find control point between two points located on a quadratic curve

I'm drawing a quadratic curve between two points, and then I locate a random point on that curve. I want to highlight the curved part between the random point and the end point.

So I'm thinking of finding another control point between the random point and the end point, and then draw another quadratic curve with different stroke color on top of the original curve.

Is it possible to find such point or not? Or is there any other way to accomplish this task?

Image

Here is the piece of code that I'm working on:

var startpoint = {x: 50, y: 50}; // Red
var endpoint = {x: 50, y: 250}; // Green
var controlpoint = {x: 100, y: 150}; // Blue

var t = 0.75;
var randompoint = {
    x: (1 - t) * (1 - t) * startpoint.x + 2 * (1 - t) * t * controlpoint.x + t * t * endpoint.x, 
    y: (1 - t) * (1 - t) * startpoint.y + 2 * (1 - t) * t * controlpoint.y + t * t * endpoint.y
}; // Orange


context.beginPath();
context.moveTo(startpoint.x, startpoint.y);
context.quadraticCurveTo(controlpoint.x, controlpoint.y, endpoint.x, endpoint.y);
context.stroke();

Here is the working code following answer by MBo

function lerp(a, b, t)
{
    var _t = 1 - t;
    return {
        x: a.x * _t + b.x * t,
        y: a.y * _t + b.y * t
    };
}

var newpoint = lerp(controlpoint, endpoint, t);

context.beginPath();
context.moveTo(randompoint.x, randompoint.y);
context.quadraticCurveTo(newpoint.x, newpoint.y, endpoint.x, endpoint.y);
context.stroke();
Solution

  • Yes, you can make new control point for this new curve with simple approach:

       P1' = P0 * (1-t) + P1 *  t

    where P0 is starting point, P1 is control point of old curve, P1' is control point for new curve

    (This is particlular case for general Bezier curve subdivision problem)