JSFiddle - React, Tailwind, and code Playground
HTML
<textarea id="result" rows=10 cols=20>
</textarea>
JavaScript
var N = 5000000;
var res = document.getElementById('result');
var test = [];
for (var i = 0; i < N; i++) {
test.push(Math.random());
}
for (var k = 0; k < 3; k++) {
var t = Date.now()
for (var i = 0; i < N; i += 5) {
bezier1(test[i], test[i+1], test[i+2], test[i+3], test[i+4]);
}
var t = Date.now() - t;
res.value += 'bezier1: ' + t + '\n';
var t = Date.now()
for (var i = 0; i < N; i += 5) {
bezier2(test[i], test[i+1], test[i+2], test[i+3], test[i+4]);
}
var t = Date.now() - t;
res.value += 'bezier2: ' + t + '\n';
}
function bezier1(x1, x2, y1, y2, x) {
var t = 0.5, s = 0.5;
for (var i = 0; i < 15; i++) {
var ft = (3 * s * s * t * x1) + (3 * s * t * t * x2) + (t * t * t) - x;
if (ft === 0) break;
if (ft > 0)
t -= 1 / (4 << i);
else // ft < 0
t += 1 / (4 << i);
s = 1 - t;
}
return (3 * s * s * t * y1) + (3 * s * t * t * y2) + (t * t * t);
}
function bezier2(x1, x2, y1, y2, x) {
var t = x;
while (1) {
var v = ipfunc(t, x1, x2) - x;
if (Math.abs(v) < 0.0001) break;
var tt = ipfuncd(t, x1, x2);
if (tt === 0) break;
t -= v / tt;
}
return ipfunc(t, y1, y2);
}
function ipfunc(t, p1, p2) {
return ((1 + 3 * p1 - 3 * p2) * t * t * t + (3 * p2 - 6 * p1) * t * t + 3 * p1 * t)
}
function ipfuncd(t, p1, p2) {
return ((3 + 9 * p1 - 9 * p2) * t * t + (6 * p2 - 12 * p1) * t + 3 * p1)
}