CODEWITHSUNDEEP
javascriptmathcanvascurvequadratic
Teiv
Teiv

Reputation: 2635

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();

Upvotes: 1

Views: 1025

Answers (2)

MBo
MBo

Reputation: 80187

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)

Upvotes: 1

OmG
OmG

Reputation: 18838

A solution is moving a copy of the curve of between random point and endpoint in the direction of perpendicular to the cure. To find the direction, you can find the line of passing from the random point and endpoint and find the perpendicular line to that line. Hence, moving a copy of the curve in the perpendicular direction as a highlighter.

Upvotes: 0

Related Questions