Handle intersections between two bezier curves (#735)

* Refactor intersections function

* Implement intersect for quadratic and cubic bezier curves

* Return t value instead of point

* Change project return the t value

* Add error threshold for curve intersection

* Refactor to use if let statements and improve comments

* Refactor intersection helper to return vector, other minor name/text changes

* Rename function

* Minor change

* Minor fixes

* Add missing test tag

* Address comments

* Adjust comment

* Change function call

* Edit comments

bezier-rs/docs/interactive-docs/src/App.vue

@@ -269,7 +269,8 @@ export default defineComponent({
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point): void => {
 						if (mouseLocation != null) {
 							const context = getContextFromCanvas(canvas);
-							const closestPoint = JSON.parse(bezier.project(mouseLocation.x, mouseLocation.y));
+							const t = bezier.project(mouseLocation.x, mouseLocation.y);
+							const closestPoint = JSON.parse(bezier.evaluate(t));
 							drawLine(context, mouseLocation, closestPoint, COLORS.NON_INTERACTIVE.STROKE_1);
 						}
 					},
@@ -376,7 +377,7 @@ export default defineComponent({
 					},
 				},
 				{
-					name: "Intersect Line Segment",
+					name: "Intersect (Line Segment)",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
 						const context = getContextFromCanvas(canvas);
 						const line = [
@@ -385,12 +386,44 @@ export default defineComponent({
 						];
 						const mappedLine = line.map((p) => [p.x, p.y]);
 						drawLine(context, line[0], line[1], COLORS.NON_INTERACTIVE.STROKE_1);
-						const intersections: Point[] = bezier.intersect_line_segment(mappedLine).map((p) => JSON.parse(p));
-						intersections.forEach((p: Point) => {
+						const intersections: Float64Array = bezier.intersect_line_segment(mappedLine);
+						intersections.forEach((t: number) => {
+							const p = JSON.parse(bezier.evaluate(t));
 							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
 						});
 					},
 				},
+				{
+					name: "Intersect (Cubic Segment)",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
+						const context = getContextFromCanvas(canvas);
+						const points = [
+							{ x: 40, y: 20 },
+							{ x: 100, y: 40 },
+							{ x: 40, y: 120 },
+							{ x: 175, y: 140 },
+						];
+						const mappedPoints = points.map((p) => [p.x, p.y]);
+						drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
+						const intersections: Float64Array = bezier.intersect_cubic_segment(mappedPoints, options.error);
+						intersections.forEach((t: number) => {
+							const p = JSON.parse(bezier.evaluate(t));
+							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
+						});
+					},
+					template: markRaw(SliderExample),
+					templateOptions: {
+						sliders: [
+							{
+								variable: "error",
+								min: 0.1,
+								max: 2,
+								step: 0.1,
+								default: 0.5,
+							},
+						],
+					},
+				},
 				{
 					name: "Reduce",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {

bezier-rs/docs/interactive-docs/src/utils/drawing.ts

@@ -59,9 +59,9 @@ export const drawText = (ctx: CanvasRenderingContext2D, text: string, x: number,
 	ctx.fillText(text, x, y);
 };
 
-export const drawCurve = (ctx: CanvasRenderingContext2D, points: Point[], strokeColor = COLORS.INTERACTIVE.STROKE_1): void => {
+export const drawCurve = (ctx: CanvasRenderingContext2D, points: Point[], strokeColor = COLORS.INTERACTIVE.STROKE_1, lineWidth = 2): void => {
 	ctx.strokeStyle = strokeColor;
-	ctx.lineWidth = 2;
+	ctx.lineWidth = lineWidth;
 
 	ctx.beginPath();
 	ctx.moveTo(points[0].x, points[0].y);

bezier-rs/docs/interactive-docs/wasm/src/lib.rs

@@ -119,8 +119,8 @@ impl WasmBezier {
 		WasmBezier(self.0.trim(t1, t2))
 	}
 
-	pub fn project(&self, x: f64, y: f64) -> JsValue {
-		vec_to_point(&self.0.project(DVec2::new(x, y), ProjectionOptions::default()))
+	pub fn project(&self, x: f64, y: f64) -> f64 {
+		self.0.project(DVec2::new(x, y), ProjectionOptions::default())
 	}
 
 	pub fn local_extrema(&self) -> JsValue {
@@ -152,9 +152,26 @@ impl WasmBezier {
 		WasmBezier(self.0.rotate(angle))
 	}
 
-	pub fn intersect_line_segment(&self, js_points: &JsValue) -> Vec<JsValue> {
-		let line: [DVec2; 2] = js_points.into_serde().unwrap();
-		self.0.intersect_line_segment(line).iter().map(|&p| vec_to_point(&p)).collect::<Vec<JsValue>>()
+	fn intersect(&self, curve: &Bezier, error: Option<f64>) -> Vec<f64> {
+		self.0.intersections(curve, error)
+	}
+
+	pub fn intersect_line_segment(&self, js_points: &JsValue) -> Vec<f64> {
+		let points: [DVec2; 2] = js_points.into_serde().unwrap();
+		let line = Bezier::from_linear_dvec2(points[0], points[1]);
+		self.intersect(&line, None)
+	}
+
+	pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> Vec<f64> {
+		let points: [DVec2; 3] = js_points.into_serde().unwrap();
+		let quadratic = Bezier::from_quadratic_dvec2(points[0], points[1], points[2]);
+		self.intersect(&quadratic, Some(error))
+	}
+
+	pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> Vec<f64> {
+		let points: [DVec2; 4] = js_points.into_serde().unwrap();
+		let cubic = Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]);
+		self.intersect(&cubic, Some(error))
 	}
 
 	pub fn reduce(&self) -> JsValue {