Bezier-rs: Add parametric evaluate and line intersect to subpath (#852)

* add slider to subpath component + change evaluate to take an enum Co-authored-by: Rob Nadal <RobNadal@users.noreply.github.com> wip - add intersect to subpath, TODO fix bug Co-authored-by: Rob Nadal <RobNadal@users.noreply.github.com> add unit tests to subpath intersections stress, testing Co-authored-by: Hannah Li <hannahli2010@gmail.com> * add parametric eval impl to subpath * add line intersection to subpath * Uncomment and #[ignore] disabled tests * Reorder a few imports * change subpath:eval slider to radio button * fixed bug with solve_cubic, fixed unit tests, improved intersection accuracy * fix failing test Co-authored-by: Hannah Li <hannahli2010@gmail.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
2026-09-18 18:38:05 +08:00 · 2022-12-11 00:41:02 -05:00
parent 9a4af4f87a
commit 52cc770a1e
13 changed files with 713 additions and 54 deletions
--- a/website/other/bezier-rs-demos/src/App.vue
+++ b/website/other/bezier-rs-demos/src/App.vue
@@ -13,7 +13,7 @@
 	</div>
 	<h2>Subpaths</h2>
 	<div v-for="(feature, index) in subpathFeatures" :key="index">
-		<SubpathExamplePane :name="feature.name" :callback="feature.callback" />
+		<SubpathExamplePane :name="feature.name" :callback="feature.callback" :sliderOptions="feature.sliderOptions" :chooseComputeType="feature.chooseComputeType" />
 	</div>
 </template>

@@ -84,6 +84,14 @@ const tErrorOptions = {
 	default: 0.5,
 };

+const tMinimumSeperationOptions = {
+	variable: "minimum_seperation",
+	min: 0.001,
+	max: 0.25,
+	step: 0.001,
+	default: 0.05,
+};
+
 export default defineComponent({
 	data() {
 		return {
@@ -369,6 +377,14 @@ export default defineComponent({
 							],
 						},
 					},
+					customPoints: {
+						Cubic: [
+							[31, 94],
+							[40, 40],
+							[107, 107],
+							[106, 106],
+						],
+					},
 				},
 				{
 					name: "Skewed Outline",
@@ -479,11 +495,11 @@ export default defineComponent({
 							[180, 10],
 							[90, 120],
 						];
-						return bezier.intersect_quadratic_segment(quadratic, options.error);
+						return bezier.intersect_quadratic_segment(quadratic, options.error, options.minimum_seperation);
 					},
 					exampleOptions: {
 						Quadratic: {
-							sliderOptions: [tErrorOptions],
+							sliderOptions: [tErrorOptions, tMinimumSeperationOptions],
 						},
 					},
 				},
@@ -496,11 +512,11 @@ export default defineComponent({
 							[40, 120],
 							[175, 140],
 						];
-						return bezier.intersect_cubic_segment(cubic, options.error);
+						return bezier.intersect_cubic_segment(cubic, options.error, options.minimum_seperation);
 					},
 					exampleOptions: {
 						Quadratic: {
-							sliderOptions: [tErrorOptions],
+							sliderOptions: [tErrorOptions, tMinimumSeperationOptions],
 						},
 					},
 				},
@@ -558,6 +574,39 @@ export default defineComponent({
 					name: "Length",
 					callback: (subpath: WasmSubpathInstance): string => subpath.length(),
 				},
+				{
+					name: "Evaluate",
+					callback: (subpath: WasmSubpathInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => subpath.evaluate(options.computeArgument, computeType),
+					sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
+					chooseComputeType: true,
+				},
+				{
+					name: "Intersect (Line Segment)",
+					callback: (subpath: WasmSubpathInstance): string =>
+						subpath.intersect_line_segment([
+							[150, 150],
+							[20, 20],
+						]),
+				},
+				{
+					name: "Intersect (Quadratic segment)",
+					callback: (subpath: WasmSubpathInstance): string =>
+						subpath.intersect_quadratic_segment([
+							[20, 80],
+							[180, 10],
+							[90, 120],
+						]),
+				},
+				{
+					name: "Intersect (Cubic segment)",
+					callback: (subpath: WasmSubpathInstance): string =>
+						subpath.intersect_cubic_segment([
+							[40, 20],
+							[100, 40],
+							[40, 120],
+							[175, 140],
+						]),
+				},
 			],
 		};
 	},
--- a/website/other/bezier-rs-demos/src/components/SubpathExample.vue
+++ b/website/other/bezier-rs-demos/src/components/SubpathExample.vue
@@ -2,6 +2,10 @@
 	<div>
 		<h4 class="example-header">{{ title }}</h4>
 		<figure @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onMouseMove" class="example-figure" v-html="subpathSVG"></figure>
+		<div v-for="(slider, index) in sliderOptions" :key="index">
+			<div class="slider-label">{{ slider.variable }} = {{ sliderData[slider.variable] }}{{ getSliderValue(sliderData[slider.variable], sliderUnits[slider.variable]) }}</div>
+			<input class="slider" v-model.number="sliderData[slider.variable]" type="range" :step="slider.step" :min="slider.min" :max="slider.max" />
+		</div>
 	</div>
 </template>

@@ -11,7 +15,7 @@
 import { defineComponent, PropType } from "vue";

 import { WasmSubpath } from "@/../wasm/pkg";
-import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey } from "@/utils/types";
+import { SubpathCallback, WasmSubpathInstance, WasmSubpathManipulatorKey, SliderOption, ComputeType } from "@/utils/types";

 const SELECTABLE_RANGE = 10;
 const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "set_in_handle", "set_out_handle"];
@@ -22,14 +26,22 @@ export default defineComponent({
 		triples: { type: Array as PropType<Array<Array<number[] | undefined>>>, mutable: true, required: true },
 		closed: { type: Boolean as PropType<boolean>, default: false },
 		callback: { type: Function as PropType<SubpathCallback>, required: true },
+		sliderOptions: { type: Object as PropType<Array<SliderOption>>, default: () => ({}) },
+		computeType: { type: String as PropType<ComputeType>, default: "Parametric" },
 	},
 	data() {
 		const subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
+
+		const sliderData = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.default })));
+		const sliderUnits = Object.assign({}, ...this.sliderOptions.map((s) => ({ [s.variable]: s.unit })));
+
 		return {
 			subpath,
-			subpathSVG: this.callback(subpath),
+			subpathSVG: this.callback(subpath, sliderData, undefined, "Euclidean"),
 			activeIndex: undefined as number[] | undefined,
 			mutableTriples: JSON.parse(JSON.stringify(this.triples)),
+			sliderData,
+			sliderUnits,
 		};
 	},
 	methods: {
@@ -55,9 +67,23 @@ export default defineComponent({
 			if (this.activeIndex) {
 				this.subpath[POINT_INDEX_TO_MANIPULATOR[this.activeIndex[1]]](this.activeIndex[0], mx, my);
 				this.mutableTriples[this.activeIndex[0]][this.activeIndex[1]] = [mx, my];
-				this.subpathSVG = this.callback(this.subpath);
+				this.subpathSVG = this.callback(this.subpath, this.sliderData, [mx, my], this.computeType);
 			}
 		},
+		getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
+	},
+	watch: {
+		sliderData: {
+			handler() {
+				this.subpathSVG = this.callback(this.subpath, this.sliderData, undefined, this.computeType);
+			},
+			deep: true,
+		},
+		computeType: {
+			handler() {
+				this.subpathSVG = this.callback(this.subpath, this.sliderData, undefined, this.computeType);
+			},
+		},
 	},
 });
 </script>
--- a/website/other/bezier-rs-demos/src/components/SubpathExamplePane.vue
+++ b/website/other/bezier-rs-demos/src/components/SubpathExamplePane.vue
@@ -1,9 +1,18 @@
 <template>
 	<div>
 		<h3 class="example-pane-header">{{ name }}</h3>
+		<div v-if="chooseComputeType" class="compute-type-choice">
+			<strong>ComputeType:</strong>
+
+			<input type="radio" :id="`${id}-parametric`" value="Parametric" v-model="computeTypeChoice" />
+			<label :for="`${id}-parametric`">Parametric</label>
+
+			<input type="radio" :id="`${id}-euclidean`" value="Euclidean" v-model="computeTypeChoice" />
+			<label :for="`${id}-euclidean`">Euclidean</label>
+		</div>
 		<div class="example-row">
 			<div v-for="(example, index) in examples" :key="index">
-				<SubpathExample :title="example.title" :triples="example.triples" :closed="example.closed" :callback="callback" />
+				<SubpathExample :title="example.title" :triples="example.triples" :closed="example.closed" :callback="callback" :sliderOptions="sliderOptions" :computeType="computeTypeChoice" />
 			</div>
 		</div>
 	</div>
@@ -14,7 +23,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";

-import { SubpathCallback } from "@/utils/types";
+import { SubpathCallback, SliderOption, ComputeType } from "@/utils/types";

 import SubpathExample from "@/components/SubpathExample.vue";

@@ -22,6 +31,8 @@ export default defineComponent({
 	props: {
 		name: { type: String as PropType<string>, required: true },
 		callback: { type: Function as PropType<SubpathCallback>, required: true },
+		sliderOptions: { type: Array as PropType<Array<SliderOption>>, default: () => [] },
+		chooseComputeType: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
 		return {
@@ -50,6 +61,8 @@ export default defineComponent({
 					closed: true,
 				},
 			],
+			id: `${Math.random()}`.substring(2),
+			computeTypeChoice: "Parametric" as ComputeType,
 		};
 	},
 	components: {
--- a/website/other/bezier-rs-demos/src/utils/types.ts
+++ b/website/other/bezier-rs-demos/src/utils/types.ts
@@ -14,7 +14,7 @@ export type BezierCurveType = typeof BEZIER_CURVE_TYPE[number];
 export type ComputeType = "Euclidean" | "Parametric";

 export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: [number, number], computeType?: ComputeType) => string;
-export type SubpathCallback = (subpath: WasmSubpathInstance) => string;
+export type SubpathCallback = (subpath: WasmSubpathInstance, options: Record<string, number>, mouseLocation?: [number, number], computeType?: ComputeType) => string;

 export type ExampleOptions = {
 	[key in BezierCurveType]: {
--- a/website/other/bezier-rs-demos/wasm/src/bezier.rs
+++ b/website/other/bezier-rs-demos/wasm/src/bezier.rs
@@ -41,10 +41,6 @@ fn convert_wasm_maximize_arcs(wasm_enum_value: WasmMaximizeArcs) -> ArcStrategy
 	}
 }

-fn wrap_svg_tag(contents: String) -> String {
-	format!("{}{}{}", SVG_OPEN_TAG, contents, SVG_CLOSE_TAG)
-}
-
 #[wasm_bindgen]
 impl WasmBezier {
 	/// Expect js_points to be a list of 2 pairs.
@@ -400,8 +396,8 @@ impl WasmBezier {
 		))
 	}

-	fn intersect(&self, curve: &Bezier, error: Option<f64>) -> Vec<f64> {
-		self.0.intersections(curve, error)
+	fn intersect(&self, curve: &Bezier, error: Option<f64>, minimum_separation: Option<f64>) -> Vec<f64> {
+		self.0.intersections(curve, error, minimum_separation)
 	}

 	pub fn intersect_line_segment(&self, js_points: &JsValue) -> String {
@@ -414,7 +410,7 @@ impl WasmBezier {
 		line.to_svg(&mut line_svg, CURVE_ATTRIBUTES.to_string().replace(BLACK, RED), String::new(), String::new(), String::new());

 		let intersections_svg = self
-			.intersect(&line, None)
+			.intersect(&line, None, None)
 			.iter()
 			.map(|intersection_t| {
 				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
@@ -424,7 +420,7 @@ impl WasmBezier {
 		wrap_svg_tag(format!("{bezier_curve_svg}{line_svg}{intersections_svg}"))
 	}

-	pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> String {
+	pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64, minimum_separation: f64) -> String {
 		let points: [DVec2; 3] = js_points.into_serde().unwrap();
 		let quadratic = Bezier::from_quadratic_dvec2(points[0], points[1], points[2]);

@@ -434,7 +430,7 @@ impl WasmBezier {
 		quadratic.to_svg(&mut quadratic_svg, CURVE_ATTRIBUTES.to_string().replace(BLACK, RED), String::new(), String::new(), String::new());

 		let intersections_svg = self
-			.intersect(&quadratic, Some(error))
+			.intersect(&quadratic, Some(error), Some(minimum_separation))
 			.iter()
 			.map(|intersection_t| {
 				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
@@ -444,7 +440,7 @@ impl WasmBezier {
 		wrap_svg_tag(format!("{bezier_curve_svg}{quadratic_svg}{intersections_svg}"))
 	}

-	pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> String {
+	pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64, minimum_separation: f64) -> String {
 		let points: [DVec2; 4] = js_points.into_serde().unwrap();
 		let cubic = Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]);

@@ -454,7 +450,7 @@ impl WasmBezier {
 		cubic.to_svg(&mut cubic_svg, CURVE_ATTRIBUTES.to_string().replace(BLACK, RED), String::new(), String::new(), String::new());

 		let intersections_svg = self
-			.intersect(&cubic, Some(error))
+			.intersect(&cubic, Some(error), Some(minimum_separation))
 			.iter()
 			.map(|intersection_t| {
 				let point = &self.0.evaluate(ComputeType::Parametric(*intersection_t));
--- a/website/other/bezier-rs-demos/wasm/src/subpath.rs
+++ b/website/other/bezier-rs-demos/wasm/src/subpath.rs
@@ -1,9 +1,10 @@
-use bezier_rs::{ManipulatorGroup, Subpath};
+use crate::svg_drawing::*;
+
+use bezier_rs::{Bezier, ComputeType, ManipulatorGroup, Subpath};
+
 use glam::DVec2;
 use wasm_bindgen::prelude::*;

-use crate::svg_drawing::*;
-
 /// Wrapper of the `Subpath` struct to be used in JS.
 #[wasm_bindgen]
 pub struct WasmSubpath(Subpath);
@@ -54,6 +55,103 @@ impl WasmSubpath {

 	pub fn length(&self) -> String {
 		let length_text = draw_text(format!("Length: {:.2}", self.0.length(None)), 5., 193., BLACK);
-		format!("{}{}{}{}", SVG_OPEN_TAG, self.to_default_svg(), length_text, SVG_CLOSE_TAG)
+		wrap_svg_tag(format!("{}{}", self.to_default_svg(), length_text))
+	}
+
+	pub fn evaluate(&self, t: f64, compute_type: String) -> String {
+		let point = match compute_type.as_str() {
+			"Euclidean" => self.0.evaluate(ComputeType::Euclidean(t)),
+			"Parametric" => self.0.evaluate(ComputeType::Parametric(t)),
+			_ => panic!("Unexpected ComputeType string: '{}'", compute_type),
+		};
+		let point_text = draw_circle(point, 4., RED, 1.5, WHITE);
+		wrap_svg_tag(format!("{}{}", self.to_default_svg(), point_text))
+	}
+
+	pub fn intersect_line_segment(&self, js_points: &JsValue) -> String {
+		let points: [DVec2; 2] = js_points.into_serde().unwrap();
+		let line = Bezier::from_linear_dvec2(points[0], points[1]);
+
+		let subpath_svg = self.to_default_svg();
+
+		let empty_string = String::new();
+		let mut line_svg = String::new();
+		line.to_svg(
+			&mut line_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			empty_string.clone(),
+			empty_string.clone(),
+			empty_string,
+		);
+
+		let intersections_svg = self
+			.0
+			.intersections(&line, None, None)
+			.iter()
+			.map(|intersection_t| {
+				let point = self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				draw_circle(point, 4., RED, 1.5, WHITE)
+			})
+			.fold(String::new(), |acc, item| format!("{acc}{item}"));
+
+		wrap_svg_tag(format!("{subpath_svg}{line_svg}{intersections_svg}"))
+	}
+
+	pub fn intersect_quadratic_segment(&self, js_points: &JsValue) -> String {
+		let points: [DVec2; 3] = js_points.into_serde().unwrap();
+		let line = Bezier::from_quadratic_dvec2(points[0], points[1], points[2]);
+
+		let subpath_svg = self.to_default_svg();
+
+		let empty_string = String::new();
+		let mut line_svg = String::new();
+		line.to_svg(
+			&mut line_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			empty_string.clone(),
+			empty_string.clone(),
+			empty_string,
+		);
+
+		let intersections_svg = self
+			.0
+			.intersections(&line, None, None)
+			.iter()
+			.map(|intersection_t| {
+				let point = self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				draw_circle(point, 4., RED, 1.5, WHITE)
+			})
+			.fold(String::new(), |acc, item| format!("{acc}{item}"));
+
+		wrap_svg_tag(format!("{subpath_svg}{line_svg}{intersections_svg}"))
+	}
+
+	pub fn intersect_cubic_segment(&self, js_points: &JsValue) -> String {
+		let points: [DVec2; 4] = js_points.into_serde().unwrap();
+		let line = Bezier::from_cubic_dvec2(points[0], points[1], points[2], points[3]);
+
+		let subpath_svg = self.to_default_svg();
+
+		let empty_string = String::new();
+		let mut line_svg = String::new();
+		line.to_svg(
+			&mut line_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			empty_string.clone(),
+			empty_string.clone(),
+			empty_string,
+		);
+
+		let intersections_svg = self
+			.0
+			.intersections(&line, None, None)
+			.iter()
+			.map(|intersection_t| {
+				let point = self.0.evaluate(ComputeType::Parametric(*intersection_t));
+				draw_circle(point, 4., RED, 1.5, WHITE)
+			})
+			.fold(String::new(), |acc, item| format!("{acc}{item}"));
+
+		wrap_svg_tag(format!("{subpath_svg}{line_svg}{intersections_svg}"))
 	}
 }
--- a/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs
+++ b/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs
@@ -26,6 +26,10 @@ pub const HANDLE_ATTRIBUTES: &str = "r=\"3\" stroke=\"gray\" stroke-width=\"1.5\
 pub const TEXT_OFFSET_X: f64 = 5.;
 pub const TEXT_OFFSET_Y: f64 = 193.;

+pub fn wrap_svg_tag(contents: String) -> String {
+	format!("{}{}{}", SVG_OPEN_TAG, contents, SVG_CLOSE_TAG)
+}
+
 /// Helper function to create an SVG text entity.
 pub fn draw_text(text: String, x_pos: f64, y_pos: f64, fill: &str) -> String {
 	format!(r#"<text x="{x_pos}" y="{y_pos}" fill="{fill}">{text}</text>"#)