Hi dudes,
I'm (for learning purpose) try to build an Envelope based on Cubic Bezier Curve, having two points of controls. Here's my attempt with pure Javascript.
The problems seems solveBezierForT:
Using binary search seems that:
1. its still an approx, not the real value for the curve
2. with edge points (as in the example, which should be y=180 instead of 178.98 at x=200) its still not exact and require lots of computations (in that specific case, 1e-14 of tolerance)
I've always think that bezier curve was "cheap" and easy to use, but calculate the y based on x not seems so fancy![:)]( "Smile")
So the question:
a. am I doing it wrong?
b. are there others alternatives with 2-control points which are easier to calculate?
Note: slider will emulate the dsp-processing in real-time, calling process(), with x that progress at some phase increment.
Thanks for any info you can give to me.
I'm (for learning purpose) try to build an Envelope based on Cubic Bezier Curve, having two points of controls. Here's my attempt with pure Javascript.
The problems seems solveBezierForT:
Code:
cubicBezierX(t) {return Math.pow(1 - t, 3) * this.P0.x +3 * Math.pow(1 - t, 2) * t * this.P1.x +3 * (1 - t) * Math.pow(t, 2) * this.P2.x +Math.pow(t, 3) * this.P3.x;}solveBezierForT(xTarget, tolerance = 1e-14) {// binary search for t where x(t) is close to xTargetlet tLow = 0, tHigh = 1, tMid;while (tLow < tHigh) {tMid = (tLow + tHigh) / 2;let xEstimate = this.cubicBezierX(tMid);if (Math.abs(xEstimate - xTarget) < tolerance) {return tMid; // found t within the tolerance} else if (xEstimate < xTarget) {tLow = tMid;} else {tHigh = tMid;}}return tMid; // best estimate}1. its still an approx, not the real value for the curve
2. with edge points (as in the example, which should be y=180 instead of 178.98 at x=200) its still not exact and require lots of computations (in that specific case, 1e-14 of tolerance)
I've always think that bezier curve was "cheap" and easy to use, but calculate the y based on x not seems so fancy
So the question:
a. am I doing it wrong?
b. are there others alternatives with 2-control points which are easier to calculate?
Note: slider will emulate the dsp-processing in real-time, calling process(), with x that progress at some phase increment.
Thanks for any info you can give to me.
Statistics: Posted by markzzz — Wed Aug 28, 2024 9:07 am — Replies 13 — Views 333