Code from bezier.js works great for all other examples I've checked. Except for this one:
const controlPoints = [450,50,300,183,150,150];
const line = { p1: {x: 400, y: 0}, p2: {x: 400, y: 100} }
const intersectionPoints = [];
const bezierCurve = new Bezier(x1,x2,c1,c2,y1,y2);
console.log(x1,x2,c1,c2,y1,y2);
const intersections = bezierCurve.lineIntersects(line);
if (intersections.length > 0) {
for (let e = 0; e < intersections.length; e++) {
let n = intersections[e],
t = bezierCurve.get(n);
intersectionPoints.push(t);
}
}
console.log("Intersection Points:", intersectionPoints);
return intersectionPoints;
It returns no intersection points. Although there definitely is one at around: {x: 400, y: 90/95 }
I was expecting an intersection point between the bezier curve and the specified line.
It seems like this is a bug in the underlying bezier.js library, it will return no intersection sometimes when intersecting with a vertical line. This can be seen in this Github issue: https://github.com/Pomax/bezierjs/issues/205
When you try to find the intersection with a slightly rotated line such as const line = { p1: { x: 400, y: 0 }, p2: { x: 400.01, y: 100 } }
, it will work as expected.
function demo() {
const controlPoints = [450, 50, 300, 183, 150, 150];
const line = {
p1: {
x: 400,
y: 0
},
p2: {
x: 400.001,
y: 100
}
};
const intersectionPoints = [];
const [x1, x2, c1, c2, y1, y2] = controlPoints;
const bezierCurve = new Bezier(x1, x2, Math.floor(c1), Math.floor(c2), y1, y2);
const intersections = bezierCurve.lineIntersects(line);
if (intersections.length > 0) {
for (let e = 0; e < intersections.length; e++) {
let n = intersections[e],
t = bezierCurve.get(n);
intersectionPoints.push(t);
}
}
console.log("Intersection Points:", intersectionPoints);
}
document.addEventListener("readystatechange", () => document.readyState === "complete" && demo());
<script type="module">
import { Bezier } from 'https://cdn.jsdelivr.net/npm/bezier-js@6.1.4/src/bezier.min.js';
window.Bezier = Bezier;
</script>