CODEWITHSUNDEEP
javascriptbezierquadratic
koga73
koga73

Reputation: 1022

Quadratic Bezier Curve: Calculate x for any given y

I have a quadratic bezier curve represented by the following equation (replaced t with x) where x is between 0-1

var y = p0 * Math.pow(x, 2) + p1 * 2 * x * (1 - x) + p2 * Math.pow((1 - x), 2)

I want to pass in a known y value and solve for x along the curve.

enter image description here

I tried rearranging the quadratic to solve for x, but neither value I get falls within the 0-1 range.

Upvotes: 2

Views: 1226

Answers (1)

Inzmam ul Hassan
Inzmam ul Hassan

Reputation: 215

y = p0 * Math.pow(x, 2) + p1 * 2 * x * (1 - x) + p2 * Math.pow((1 - x), 2)

=> y = p0x^2 + 2p1(x-x^2) + p2(1-2x+x^2)
=> y = p0x2 + 2p1x - 2p1x2 +p2 - 2p2x + p2x2
=> y = p0x2 + p2x2  - 2p1x2 + 2p1x - 2p2x + p2
=> y = (p0+p2-2p1)x^2 + 2(p1 - p2)x + p2
=> 0 = (p0+p2-2p1)x^2 + 2(p1 - p2)x + (p2 - y)

This is simple Quadratic equation solve it further by entering p0, p1 , p2 and y you will get an equation for x.. x will two answer always .. discard negtive one postive answer will be your answer

Upvotes: 2

Related Questions