Quadratic Bezier Curve with inner Triangle

1
votes

Recently I am building a JavaScript module to add convenience functions to draw a quadratic bezier curve. This function have a source point, a target point and a control point and will create svg path like this: 

<path id="active" d="M"+sourcePoint+" Q "+controlPoint+" "+ targetPoint+" " fill="orange" 
fill-opacity="0.8" stroke="steelblue" stroke-width="2px" cursor="move">

The point that I have to mention is, control point could change dynamically, So when I change it I have figure Like this:

Some note

I downloaded image from this link.

This is a regular way to draw quadratic curve with outer triangle "Imagine a triangle with P0,P1,P2 points".I don't know if there are ways to calculate the B point on the curve?

My goal is draw quadratic curve with inner triangle that P1 is always on curve like this:

enter image description here

is there any way to draw this kind of quadratic curve or calculate the B point on the first picture?

1
javascriptmathsvgquadratic-curve

1 Answers

1
votes

Formula to find coordinates of point B at needed value t on the quadratic Bezier Curve (apply formula to each coordinates X and Y)

B(t) = P0 * (1-t)^2 + 2 * P1 * t * (1-t) + P2 * t^2

Geometric subdivision approach:

Let's Q0 divides P0-P1 segment in t/(1-t) proportion

|P0Q0|/|Q0P1| = t/(1-t)

Let's Q1 divides P1-P2 segment in (1-t)/t proportion

|P1Q1|/|Q1P2| = (1-t)/t

B divides Q0-Q1 segment in t/(1-t) proportion

|Q0B|/|BQ1| = t/(1-t)

If you want to build curve through points P0 (start), C (somewhere in the middle), and P2 (end), choose some value of t for point C, apply it with formula given, and find unknown control point P1. For example, if t=1/2

C(1/2)=P0/4+2P1/4+P2/4
P1 = (4C - P0 - P2) / 2