From 55f6d13dafc2bd0ae666da5701fb43c99c120391 Mon Sep 17 00:00:00 2001
From: Hannah Li <hannahli2010@gmail.com>
Date: Tue, 27 Sep 2022 17:37:30 -0700
Subject: [PATCH] Bezier-rs: continue converting demos from canvas to SVG
 (#779)

* Convert constructor to use svg

* Convert the through_points functions to svg

* Convert length, lut, derivative, and tangent from canvas to svg

* Fixed bug when t1 == t2 in split

* Converted split and trim to use svg representation, and swapped slider options default to use quadratic options

* Convert normal and curvature to use svg representation in bezier-rs-demos

* Convert the project function to use svg representation in bezier-rs-demos

* Convert the local_extrema, bbox, and inflections to use svgs

* Add text offset constants

* Fix typo

Co-authored-by: Robert Nadal <Robnadal44@gmail.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>
---
 libraries/bezier-rs/src/bezier/transform.rs   |  11 +-
 website/other/bezier-rs-demos/src/App.vue     | 313 +++++++-----------
 .../src/components/BezierExample.vue          |   6 +
 .../src/components/BezierExamplePane.vue      |  22 +-
 .../bezier-rs-demos/src/utils/drawing.ts      |   7 +-
 .../other/bezier-rs-demos/src/utils/types.ts  |   2 +-
 .../other/bezier-rs-demos/wasm/src/bezier.rs  | 220 +++++++++---
 .../bezier-rs-demos/wasm/src/svg_drawing.rs   |  20 +-
 8 files changed, 358 insertions(+), 243 deletions(-)

diff --git a/libraries/bezier-rs/src/bezier/transform.rs b/libraries/bezier-rs/src/bezier/transform.rs
index cb612f8f..8134cb8b 100644
--- a/libraries/bezier-rs/src/bezier/transform.rs
+++ b/libraries/bezier-rs/src/bezier/transform.rs
@@ -1,4 +1,5 @@
 use super::*;
+use crate::utils::f64_compare;
 
 use glam::DMat2;
 use std::f64::consts::PI;
@@ -41,12 +42,20 @@ impl Bezier {
 
 	/// Returns the Bezier curve representing the sub-curve starting at the point corresponding to `t1` and ending at the point corresponding to `t2`.
 	pub fn trim(&self, t1: f64, t2: f64) -> Bezier {
+		if f64_compare(t1, t2, MAX_ABSOLUTE_DIFFERENCE) {
+			let point = self.evaluate(t1);
+			return match self.handles {
+				BezierHandles::Linear => Bezier::from_linear_dvec2(point, point),
+				BezierHandles::Quadratic { handle: _ } => Bezier::from_quadratic_dvec2(point, point, point),
+				BezierHandles::Cubic { handle_start: _, handle_end: _ } => Bezier::from_cubic_dvec2(point, point, point, point),
+			};
+		}
 		// Depending on the order of `t1` and `t2`, determine which half of the split we need to keep
 		let t1_split_side = if t1 <= t2 { 1 } else { 0 };
 		let t2_split_side = if t1 <= t2 { 0 } else { 1 };
 		let bezier_starting_at_t1 = self.split(t1)[t1_split_side];
 		// Adjust the ratio `t2` to its corresponding value on the new curve that was split on `t1`
-		let adjusted_t2 = if t1 < t2 || (t1 == t2 && t1 == 0.) {
+		let adjusted_t2 = if t1 < t2 || t1 == 0. {
 			// Case where we took the split from t1 to the end
 			// Also cover the `t1` == t2 case where there would otherwise be a divide by 0
 			(t2 - t1) / (1. - t1)
diff --git a/website/other/bezier-rs-demos/src/App.vue b/website/other/bezier-rs-demos/src/App.vue
index 1b9f4444..285f8d22 100644
--- a/website/other/bezier-rs-demos/src/App.vue
+++ b/website/other/bezier-rs-demos/src/App.vue
@@ -4,7 +4,7 @@
 		<p>This is the interactive documentation for the <b>bezier-rs</b> library. Click and drag on the endpoints of the example curves to visualize the various Bezier utilities and functions.</p>
 		<h2>Beziers</h2>
 		<div v-for="(feature, index) in bezierFeatures" :key="index">
-			<BezierExamplePane :name="feature.name" :callback="feature.callback" :exampleOptions="feature.exampleOptions" />
+			<BezierExamplePane :name="feature.name" :callback="feature.callback" :exampleOptions="feature.exampleOptions" :triggerOnMouseMove="feature.triggerOnMouseMove" />
 		</div>
 		<div v-for="(feature, index) in features" :key="index">
 			<ExamplePane
@@ -27,7 +27,7 @@
 import { defineComponent, markRaw } from "vue";
 
 import { WasmBezier } from "@/../wasm/pkg";
-import { drawBezier, drawBezierHelper, drawCircle, drawCircleSector, drawCurve, drawLine, drawPoint, drawText, getContextFromCanvas, COLORS } from "@/utils/drawing";
+import { drawBezier, drawCircleSector, drawCurve, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing";
 import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
 
 import BezierExamplePane from "@/components/BezierExamplePane.vue";
@@ -43,8 +43,6 @@ const tSliderOptions = {
 	variable: "t",
 };
 
-const SCALE_UNIT_VECTOR_FACTOR = 50;
-
 export default defineComponent({
 	data() {
 		return {
@@ -108,240 +106,169 @@ export default defineComponent({
 						},
 					},
 				},
-			],
-			features: [
 				{
 					name: "Length",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
-						drawText(getContextFromCanvas(canvas), `Length: ${bezier.length().toFixed(2)}`, 5, canvas.height - 7);
-					},
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.length(),
 				},
 				{
 					name: "Evaluate",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const point = JSON.parse(bezier.evaluate(options.t));
-						drawPoint(getContextFromCanvas(canvas), point, 4, COLORS.NON_INTERACTIVE.STROKE_1);
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.evaluate(options.t),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tSliderOptions],
+						},
 					},
-					template: markRaw(SliderExample),
-					templateOptions: { sliders: [tSliderOptions] },
 				},
 				{
 					name: "Lookup Table",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const lookupPoints: Point[] = JSON.parse(bezier.compute_lookup_table(options.steps));
-						lookupPoints.forEach((point, index) => {
-							if (index !== 0 && index !== lookupPoints.length - 1) {
-								drawPoint(getContextFromCanvas(canvas), point, 3, COLORS.NON_INTERACTIVE.STROKE_1);
-							}
-						});
-					},
-					template: markRaw(SliderExample),
-					templateOptions: {
-						sliders: [
-							{
-								min: 2,
-								max: 15,
-								step: 1,
-								default: 5,
-								variable: "steps",
-							},
-						],
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.compute_lookup_table(options.steps),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [
+								{
+									min: 2,
+									max: 15,
+									step: 1,
+									default: 5,
+									variable: "steps",
+								},
+							],
+						},
 					},
 				},
 				{
 					name: "Derivative",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
-						const context = getContextFromCanvas(canvas);
-
-						const derivativeBezier = bezier.derivative();
-						if (derivativeBezier) {
-							const points: Point[] = JSON.parse(derivativeBezier.get_points());
-							if (points.length === 2) {
-								drawLine(context, points[0], points[1], COLORS.NON_INTERACTIVE.STROKE_1);
-							} else {
-								drawBezier(context, points, null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
-							}
-						}
-					},
-					curveDegrees: new Set([BezierCurveType.Quadratic, BezierCurveType.Cubic]),
-					customPoints: {
-						[BezierCurveType.Quadratic]: [
-							[30, 40],
-							[110, 50],
-							[120, 130],
-						],
-						[BezierCurveType.Cubic]: [
-							[50, 50],
-							[60, 100],
-							[100, 140],
-							[140, 150],
-						],
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.derivative(),
+					exampleOptions: {
+						[BezierCurveType.Linear]: {
+							disabled: true,
+						},
+						[BezierCurveType.Quadratic]: {
+							customPoints: [
+								[30, 40],
+								[110, 50],
+								[120, 130],
+							],
+						},
+						[BezierCurveType.Cubic]: {
+							customPoints: [
+								[50, 50],
+								[60, 100],
+								[100, 140],
+								[140, 150],
+							],
+						},
 					},
 				},
 				{
 					name: "Tangent",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-
-						const intersection = JSON.parse(bezier.evaluate(options.t));
-						const tangent = JSON.parse(bezier.tangent(options.t));
-
-						const tangentEnd = {
-							x: intersection.x + tangent.x * SCALE_UNIT_VECTOR_FACTOR,
-							y: intersection.y + tangent.y * SCALE_UNIT_VECTOR_FACTOR,
-						};
-
-						drawPoint(context, intersection, 3, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawLine(context, intersection, tangentEnd, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawPoint(context, tangentEnd, 3, COLORS.NON_INTERACTIVE.STROKE_1);
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.tangent(options.t),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tSliderOptions],
+						},
 					},
-					template: markRaw(SliderExample),
-					templateOptions: { sliders: [tSliderOptions] },
 				},
+
 				{
 					name: "Normal",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-
-						const intersection = JSON.parse(bezier.evaluate(options.t));
-						const normal = JSON.parse(bezier.normal(options.t));
-
-						const normalEnd = {
-							x: intersection.x + normal.x * SCALE_UNIT_VECTOR_FACTOR,
-							y: intersection.y + normal.y * SCALE_UNIT_VECTOR_FACTOR,
-						};
-
-						drawPoint(context, intersection, 3, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawLine(context, intersection, normalEnd, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawPoint(context, normalEnd, 3, COLORS.NON_INTERACTIVE.STROKE_1);
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.normal(options.t),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tSliderOptions],
+						},
 					},
-					template: markRaw(SliderExample),
-					templateOptions: { sliders: [tSliderOptions] },
 				},
 				{
 					name: "Curvature",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-						const point = JSON.parse(bezier.evaluate(options.t));
-						const normal = JSON.parse(bezier.normal(options.t));
-						const curvature = bezier.curvature(options.t);
-						const radius = 1 / curvature;
-
-						const curvatureCenter = { x: point.x + normal.x * radius, y: point.y + normal.y * radius };
-
-						drawCircle(context, curvatureCenter, Math.abs(radius), COLORS.NON_INTERACTIVE.STROKE_1);
-						drawLine(context, point, curvatureCenter, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawPoint(context, point, 3, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawPoint(context, curvatureCenter, 3, COLORS.NON_INTERACTIVE.STROKE_1);
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.curvature(options.t),
+					exampleOptions: {
+						[BezierCurveType.Linear]: {
+							disabled: true,
+						},
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tSliderOptions],
+						},
 					},
-					curveDegrees: new Set([BezierCurveType.Quadratic, BezierCurveType.Cubic]),
-					template: markRaw(SliderExample),
-					templateOptions: { sliders: [tSliderOptions] },
 				},
 				{
 					name: "Split",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-						const bezierPairPoints = JSON.parse(bezier.split(options.t));
-
-						drawBezier(context, bezierPairPoints[0], null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_2, radius: 3.5 });
-						drawBezier(context, bezierPairPoints[1], null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.split(options.t),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [tSliderOptions],
+						},
 					},
-					template: markRaw(SliderExample),
-					templateOptions: { sliders: [tSliderOptions] },
 				},
 				{
 					name: "Trim",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const context = getContextFromCanvas(canvas);
-						const trimmedBezier = bezier.trim(options.t1, options.t2);
-						drawBezierHelper(context, trimmedBezier, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
-					},
-					template: markRaw(SliderExample),
-					templateOptions: {
-						sliders: [
-							{
-								variable: "t1",
-								min: 0,
-								max: 1,
-								step: 0.01,
-								default: 0.25,
-							},
-							{
-								variable: "t2",
-								min: 0,
-								max: 1,
-								step: 0.01,
-								default: 0.75,
-							},
-						],
+					callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.trim(options.t1, options.t2),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							sliderOptions: [
+								{
+									variable: "t1",
+									min: 0,
+									max: 1,
+									step: 0.01,
+									default: 0.25,
+								},
+								{
+									variable: "t2",
+									min: 0,
+									max: 1,
+									step: 0.01,
+									default: 0.75,
+								},
+							],
+						},
 					},
 				},
 				{
 					name: "Project",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point): void => {
-						if (mouseLocation != null) {
-							const context = getContextFromCanvas(canvas);
-							const t = bezier.project(mouseLocation.x, mouseLocation.y);
-							const closestPoint = JSON.parse(bezier.evaluate(t));
-							drawLine(context, mouseLocation, closestPoint, COLORS.NON_INTERACTIVE.STROKE_1);
-						}
-					},
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>, mouseLocation: Point): string =>
+						mouseLocation ? bezier.project(mouseLocation.x, mouseLocation.y) : bezier.to_svg(),
+					triggerOnMouseMove: true,
 				},
 				{
 					name: "Local Extrema",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
-						const context = getContextFromCanvas(canvas);
-						const dimensionColors = ["red", "green"];
-						const extrema: number[][] = JSON.parse(bezier.local_extrema());
-						extrema.forEach((tValues, index) => {
-							tValues.forEach((t) => {
-								const point: Point = JSON.parse(bezier.evaluate(t));
-								drawPoint(context, point, 4, dimensionColors[index]);
-							});
-						});
-						drawText(getContextFromCanvas(canvas), "X extrema", 5, canvas.height - 20, dimensionColors[0]);
-						drawText(getContextFromCanvas(canvas), "Y extrema", 5, canvas.height - 5, dimensionColors[1]);
-					},
-					customPoints: {
-						[BezierCurveType.Quadratic]: [
-							[40, 40],
-							[160, 30],
-							[110, 150],
-						],
-						[BezierCurveType.Cubic]: [
-							[160, 180],
-							[170, 10],
-							[30, 90],
-							[180, 160],
-						],
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.local_extrema(),
+					exampleOptions: {
+						[BezierCurveType.Quadratic]: {
+							customPoints: [
+								[40, 40],
+								[160, 30],
+								[110, 150],
+							],
+						},
+						[BezierCurveType.Cubic]: {
+							customPoints: [
+								[160, 180],
+								[170, 10],
+								[30, 90],
+								[180, 160],
+							],
+						},
 					},
 				},
 				{
 					name: "Bounding Box",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
-						const context = getContextFromCanvas(canvas);
-						const bboxPoints: Point[] = JSON.parse(bezier.bounding_box());
-						const minPoint = bboxPoints[0];
-						const maxPoint = bboxPoints[1];
-						drawLine(context, minPoint, { x: minPoint.x, y: maxPoint.y }, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawLine(context, minPoint, { x: maxPoint.x, y: minPoint.y }, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawLine(context, maxPoint, { x: minPoint.x, y: maxPoint.y }, COLORS.NON_INTERACTIVE.STROKE_1);
-						drawLine(context, maxPoint, { x: maxPoint.x, y: minPoint.y }, COLORS.NON_INTERACTIVE.STROKE_1);
-					},
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.bounding_box(),
 				},
 				{
 					name: "Inflections",
-					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => {
-						const context = getContextFromCanvas(canvas);
-						const inflections: number[] = JSON.parse(bezier.inflections());
-						inflections.forEach((t) => {
-							const point = JSON.parse(bezier.evaluate(t));
-							drawPoint(context, point, 4, COLORS.NON_INTERACTIVE.STROKE_1);
-						});
+					callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.inflections(),
+					exampleOptions: {
+						[BezierCurveType.Linear]: {
+							disabled: true,
+						},
+						[BezierCurveType.Quadratic]: {
+							disabled: true,
+						},
 					},
-					curveDegrees: new Set([BezierCurveType.Cubic]),
 				},
+			],
+			features: [
 				{
 					name: "De Casteljau Points",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
@@ -398,7 +325,7 @@ export default defineComponent({
 						drawLine(context, line[0], line[1], COLORS.NON_INTERACTIVE.STROKE_1);
 						const intersections: Float64Array = bezier.intersect_line_segment(mappedLine);
 						intersections.forEach((t: number) => {
-							const p = JSON.parse(bezier.evaluate(t));
+							const p = JSON.parse(bezier.evaluate_value(t));
 							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
 						});
 					},
@@ -416,7 +343,7 @@ export default defineComponent({
 						drawCurve(context, points, COLORS.NON_INTERACTIVE.STROKE_1, 1);
 						const intersections: Float64Array = bezier.intersect_quadratic_segment(mappedPoints, options.error);
 						intersections.forEach((t: number) => {
-							const p = JSON.parse(bezier.evaluate(t));
+							const p = JSON.parse(bezier.evaluate_value(t));
 							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
 						});
 					},
@@ -447,7 +374,7 @@ export default defineComponent({
 						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));
+							const p = JSON.parse(bezier.evaluate_value(t));
 							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
 						});
 					},
@@ -470,7 +397,7 @@ export default defineComponent({
 						const context = getContextFromCanvas(canvas);
 						const intersections: number[][] = JSON.parse(bezier.intersect_self(options.error));
 						intersections.forEach((tValues: number[]) => {
-							const p = JSON.parse(bezier.evaluate(tValues[0]));
+							const p = JSON.parse(bezier.evaluate_value(tValues[0]));
 							drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2);
 						});
 					},
diff --git a/website/other/bezier-rs-demos/src/components/BezierExample.vue b/website/other/bezier-rs-demos/src/components/BezierExample.vue
index fa745d7f..bb7e0eef 100644
--- a/website/other/bezier-rs-demos/src/components/BezierExample.vue
+++ b/website/other/bezier-rs-demos/src/components/BezierExample.vue
@@ -41,6 +41,10 @@ export default defineComponent({
 			type: Object as PropType<Array<SliderOption>>,
 			default: () => ({}),
 		},
+		triggerOnMouseMove: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const curveType = getCurveType(this.points.length);
@@ -81,6 +85,8 @@ export default defineComponent({
 				this.bezier[this.manipulatorKeys[this.activeIndex]](mx, my);
 				this.mutablePoints[this.activeIndex] = [mx, my];
 				this.bezierSVG = this.callback(this.bezier, this.sliderData);
+			} else if (this.triggerOnMouseMove) {
+				this.bezierSVG = this.callback(this.bezier, this.sliderData, { x: mx, y: my });
 			}
 		},
 		getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
diff --git a/website/other/bezier-rs-demos/src/components/BezierExamplePane.vue b/website/other/bezier-rs-demos/src/components/BezierExamplePane.vue
index ac92434a..8aad4d64 100644
--- a/website/other/bezier-rs-demos/src/components/BezierExamplePane.vue
+++ b/website/other/bezier-rs-demos/src/components/BezierExamplePane.vue
@@ -3,7 +3,14 @@
 		<h3 class="example-pane-header">{{ name }}</h3>
 		<div class="example-row">
 			<div v-for="(example, index) in examples" :key="index">
-				<BezierExample v-if="!example.disabled" :title="example.title" :points="example.points" :callback="callback" :sliderOptions="example.sliderOptions" />
+				<BezierExample
+					v-if="!example.disabled"
+					:title="example.title"
+					:points="example.points"
+					:callback="callback"
+					:sliderOptions="example.sliderOptions"
+					:triggerOnMouseMove="triggerOnMouseMove"
+				/>
 			</div>
 		</div>
 	</div>
@@ -12,7 +19,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { BezierCallback, BezierCurveType, ExampleOptions } from "@/utils/types";
+import { BezierCallback, BezierCurveType, ExampleOptions, SliderOption } from "@/utils/types";
 
 import BezierExample from "@/components/BezierExample.vue";
 
@@ -27,6 +34,10 @@ export default defineComponent({
 			type: Object as PropType<ExampleOptions>,
 			default: () => ({}),
 		},
+		triggerOnMouseMove: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const exampleDefaults = {
@@ -53,15 +64,18 @@ export default defineComponent({
 			},
 		};
 
+		// Use quadratic slider options as a default if sliders are not provided for the other curve types.
+		const defaultSliderOptions: SliderOption[] = this.exampleOptions[BezierCurveType.Quadratic]?.sliderOptions || [];
+
 		return {
-			examples: Object.values(BezierCurveType).map((curveType) => {
+			examples: Object.values(BezierCurveType).map((curveType: BezierCurveType) => {
 				const givenData = this.exampleOptions[curveType];
 				const defaultData = exampleDefaults[curveType];
 				return {
 					title: curveType,
 					disabled: givenData?.disabled || false,
 					points: givenData?.customPoints || defaultData.points,
-					sliderOptions: givenData?.sliderOptions || [],
+					sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
 				};
 			}),
 		};
diff --git a/website/other/bezier-rs-demos/src/utils/drawing.ts b/website/other/bezier-rs-demos/src/utils/drawing.ts
index 5d71f199..f433b423 100644
--- a/website/other/bezier-rs-demos/src/utils/drawing.ts
+++ b/website/other/bezier-rs-demos/src/utils/drawing.ts
@@ -1,4 +1,4 @@
-import { BezierStyleConfig, CircleSector, Point, WasmBezierInstance } from "@/utils/types";
+import { BezierStyleConfig, CircleSector, Point } from "@/utils/types";
 
 const HANDLE_RADIUS_FACTOR = 2 / 3;
 const DEFAULT_ENDPOINT_RADIUS = 5;
@@ -95,11 +95,6 @@ export const drawCircleSector = (ctx: CanvasRenderingContext2D, circleSector: Ci
 	ctx.fill();
 };
 
-export const drawBezierHelper = (ctx: CanvasRenderingContext2D, bezier: WasmBezierInstance, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
-	const points = JSON.parse(bezier.get_points());
-	drawBezier(ctx, points, null, bezierStyleConfig);
-};
-
 export const drawBezier = (ctx: CanvasRenderingContext2D, points: Point[], dragIndex: number | null = null, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
 	const styleConfig: BezierStyleConfig = {
 		curveStrokeColor: COLORS.INTERACTIVE.STROKE_1,
diff --git a/website/other/bezier-rs-demos/src/utils/types.ts b/website/other/bezier-rs-demos/src/utils/types.ts
index 87d36c81..da90fbe3 100644
--- a/website/other/bezier-rs-demos/src/utils/types.ts
+++ b/website/other/bezier-rs-demos/src/utils/types.ts
@@ -15,7 +15,7 @@ export enum BezierCurveType {
 }
 
 export type Callback = (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point) => void;
-export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>) => string;
+export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: Point) => string;
 export type SubpathCallback = (subpath: WasmSubpathInstance) => string;
 
 export type ExampleOptions = {
diff --git a/website/other/bezier-rs-demos/wasm/src/bezier.rs b/website/other/bezier-rs-demos/wasm/src/bezier.rs
index 88d524e0..6edc7be8 100644
--- a/website/other/bezier-rs-demos/wasm/src/bezier.rs
+++ b/website/other/bezier-rs-demos/wasm/src/bezier.rs
@@ -27,6 +27,8 @@ pub enum WasmMaximizeArcs {
 	Off,       // 2
 }
 
+const SCALE_UNIT_VECTOR_FACTOR: f64 = 50.;
+
 /// Wrapper of the `Bezier` struct to be used in JS.
 #[wasm_bindgen]
 #[derive(Clone)]
@@ -127,7 +129,7 @@ impl WasmBezier {
 		to_js_value(points)
 	}
 
-	pub fn to_svg(&self) -> String {
+	fn get_bezier_path(&self) -> String {
 		let mut bezier = String::new();
 		self.0.to_svg(
 			&mut bezier,
@@ -136,75 +138,219 @@ impl WasmBezier {
 			HANDLE_ATTRIBUTES.to_string(),
 			HANDLE_LINE_ATTRIBUTES.to_string(),
 		);
-		wrap_svg_tag(bezier)
+		bezier
 	}
 
-	pub fn length(&self) -> f64 {
-		self.0.length(None)
+	pub fn to_svg(&self) -> String {
+		wrap_svg_tag(self.get_bezier_path())
+	}
+
+	pub fn length(&self) -> String {
+		let bezier = self.get_bezier_path();
+		wrap_svg_tag(format!("{bezier}{}", draw_text(format!("Length: {:.2}", self.0.length(None)), TEXT_OFFSET_X, TEXT_OFFSET_Y, BLACK)))
 	}
 
 	/// The wrapped return type is `Point`.
-	pub fn evaluate(&self, t: f64) -> JsValue {
+	pub fn evaluate_value(&self, t: f64) -> JsValue {
 		let point: Point = vec_to_point(&self.0.evaluate(t));
 		to_js_value(point)
 	}
 
-	/// The wrapped return type is `Vec<Point>`.
-	pub fn compute_lookup_table(&self, steps: usize) -> JsValue {
+	pub fn evaluate(&self, t: f64) -> String {
+		let bezier = self.get_bezier_path();
+		let point = &self.0.evaluate(t);
+		let content = format!("{bezier}{}", draw_circle(point.x, point.y, 4., RED, 1.5, WHITE));
+		wrap_svg_tag(content)
+	}
+
+	pub fn compute_lookup_table(&self, steps: usize) -> String {
+		let bezier = self.get_bezier_path();
 		let table_values: Vec<Point> = self.0.compute_lookup_table(Some(steps)).iter().map(vec_to_point).collect();
-		to_js_value(table_values)
+		let circles: String = table_values
+			.iter()
+			.map(|point| draw_circle(point.x, point.y, 3., RED, 1.5, WHITE))
+			.fold("".to_string(), |acc, circle| acc + &circle);
+		let content = format!("{bezier}{circles}");
+		wrap_svg_tag(content)
 	}
 
-	pub fn derivative(&self) -> Option<WasmBezier> {
-		self.0.derivative().map(WasmBezier)
+	pub fn derivative(&self) -> String {
+		let bezier = self.get_bezier_path();
+		let derivative = self.0.derivative();
+		if derivative.is_none() {
+			return bezier;
+		}
+
+		let mut derivative_svg_path = String::new();
+		derivative.unwrap().to_svg(
+			&mut derivative_svg_path,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			ANCHOR_ATTRIBUTES.to_string().replace(BLACK, RED),
+			HANDLE_ATTRIBUTES.to_string().replace(GRAY, RED),
+			HANDLE_LINE_ATTRIBUTES.to_string().replace(GRAY, RED),
+		);
+		let content = format!("{bezier}{derivative_svg_path}");
+		wrap_svg_tag(content)
 	}
 
 	/// The wrapped return type is `Point`.
-	pub fn tangent(&self, t: f64) -> JsValue {
-		let tangent_point: Point = vec_to_point(&self.0.tangent(t));
-		to_js_value(tangent_point)
+	pub fn tangent(&self, t: f64) -> String {
+		let bezier = self.get_bezier_path();
+
+		let tangent_point = self.0.tangent(t);
+		let intersection_point = self.0.evaluate(t);
+		let tangent_end = intersection_point + tangent_point * SCALE_UNIT_VECTOR_FACTOR;
+
+		let content = format!(
+			"{bezier}{}{}{}",
+			draw_circle(intersection_point.x, intersection_point.y, 3., RED, 1., WHITE),
+			draw_line(intersection_point.x, intersection_point.y, tangent_end.x, tangent_end.y, RED, 1.),
+			draw_circle(tangent_end.x, tangent_end.y, 3., RED, 1., WHITE),
+		);
+		wrap_svg_tag(content)
 	}
 
-	/// The wrapped return type is `Point`.
-	pub fn normal(&self, t: f64) -> JsValue {
-		let normal_point: Point = vec_to_point(&self.0.normal(t));
-		to_js_value(normal_point)
+	pub fn normal(&self, t: f64) -> String {
+		let bezier = self.get_bezier_path();
+
+		let normal_point = self.0.normal(t);
+		let intersection_point = self.0.evaluate(t);
+		let normal_end = intersection_point + normal_point * SCALE_UNIT_VECTOR_FACTOR;
+
+		let content = format!(
+			"{bezier}{}{}{}",
+			draw_line(intersection_point.x, intersection_point.y, normal_end.x, normal_end.y, RED, 1.),
+			draw_circle(intersection_point.x, intersection_point.y, 3., RED, 1., WHITE),
+			draw_circle(normal_end.x, normal_end.y, 3., RED, 1., WHITE),
+		);
+		wrap_svg_tag(content)
 	}
 
-	pub fn curvature(&self, t: f64) -> f64 {
-		self.0.curvature(t)
+	pub fn curvature(&self, t: f64) -> String {
+		let bezier = self.get_bezier_path();
+		let radius = 1. / self.0.curvature(t);
+		let normal_point = self.0.normal(t);
+		let intersection_point = self.0.evaluate(t);
+
+		let curvature_center = intersection_point + normal_point * radius;
+
+		let content = format!(
+			"{bezier}{}{}{}{}",
+			draw_circle(curvature_center.x, curvature_center.y, radius.abs(), RED, 1., NONE),
+			draw_line(intersection_point.x, intersection_point.y, curvature_center.x, curvature_center.y, RED, 1.),
+			draw_circle(intersection_point.x, intersection_point.y, 3., RED, 1., WHITE),
+			draw_circle(curvature_center.x, curvature_center.y, 3., RED, 1., WHITE),
+		);
+		wrap_svg_tag(content)
 	}
 
-	/// The wrapped return type is `[Vec<Point>; 2]`.
-	pub fn split(&self, t: f64) -> JsValue {
-		let bezier_points: [Vec<Point>; 2] = self.0.split(t).map(bezier_to_points);
-		to_js_value(bezier_points)
+	pub fn split(&self, t: f64) -> String {
+		let beziers: [Bezier; 2] = self.0.split(t);
+
+		let mut original_bezier_svg = String::new();
+		self.0.to_svg(
+			&mut original_bezier_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, WHITE),
+			ANCHOR_ATTRIBUTES.to_string().replace(BLACK, WHITE),
+			HANDLE_ATTRIBUTES.to_string(),
+			HANDLE_LINE_ATTRIBUTES.to_string(),
+		);
+
+		let mut bezier_svg_1 = String::new();
+		beziers[0].to_svg(
+			&mut bezier_svg_1,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, ORANGE),
+			ANCHOR_ATTRIBUTES.to_string().replace(BLACK, ORANGE),
+			HANDLE_ATTRIBUTES.to_string().replace(GRAY, ORANGE),
+			HANDLE_LINE_ATTRIBUTES.to_string().replace(GRAY, ORANGE),
+		);
+
+		let mut bezier_svg_2 = String::new();
+		beziers[1].to_svg(
+			&mut bezier_svg_2,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			ANCHOR_ATTRIBUTES.to_string().replace(BLACK, RED),
+			HANDLE_ATTRIBUTES.to_string().replace(GRAY, RED),
+			HANDLE_LINE_ATTRIBUTES.to_string().replace(GRAY, RED),
+		);
+
+		wrap_svg_tag(format!("{original_bezier_svg}{bezier_svg_1}{bezier_svg_2}"))
 	}
 
-	pub fn trim(&self, t1: f64, t2: f64) -> WasmBezier {
-		WasmBezier(self.0.trim(t1, t2))
+	pub fn trim(&self, t1: f64, t2: f64) -> String {
+		let trimmed_bezier = self.0.trim(t1, t2);
+
+		let mut trimmed_bezier_svg = String::new();
+		trimmed_bezier.to_svg(
+			&mut trimmed_bezier_svg,
+			CURVE_ATTRIBUTES.to_string().replace(BLACK, RED),
+			ANCHOR_ATTRIBUTES.to_string().replace(BLACK, RED),
+			HANDLE_ATTRIBUTES.to_string().replace(GRAY, RED),
+			HANDLE_LINE_ATTRIBUTES.to_string().replace(GRAY, RED),
+		);
+
+		wrap_svg_tag(format!("{}{trimmed_bezier_svg}", self.get_bezier_path()))
 	}
 
-	pub fn project(&self, x: f64, y: f64) -> f64 {
-		self.0.project(DVec2::new(x, y), ProjectionOptions::default())
+	pub fn project(&self, x: f64, y: f64) -> String {
+		let projected_t_value = self.0.project(DVec2::new(x, y), ProjectionOptions::default());
+		let projected_point = self.0.evaluate(projected_t_value);
+
+		let bezier = self.get_bezier_path();
+		let content = format!("{bezier}{}", draw_line(projected_point.x, projected_point.y, x, y, RED, 1.),);
+		wrap_svg_tag(content)
 	}
 
-	/// The wrapped return type is `[Vec<f64>; 2]`.
-	pub fn local_extrema(&self) -> JsValue {
+	pub fn local_extrema(&self) -> String {
 		let local_extrema: [Vec<f64>; 2] = self.0.local_extrema();
-		to_js_value(local_extrema)
+
+		let bezier = self.get_bezier_path();
+		let circles: String = local_extrema
+			.iter()
+			.zip([RED, GREEN])
+			.flat_map(|(t_value_list, color)| {
+				t_value_list.iter().map(|&t_value| {
+					let point = self.0.evaluate(t_value);
+					draw_circle(point.x, point.y, 3., color, 1.5, WHITE)
+				})
+			})
+			.fold("".to_string(), |acc, circle| acc + &circle);
+
+		let content = format!(
+			"{bezier}{circles}{}{}",
+			draw_text("X extrema".to_string(), TEXT_OFFSET_X, TEXT_OFFSET_Y - 20., RED),
+			draw_text("Y extrema".to_string(), TEXT_OFFSET_X, TEXT_OFFSET_Y, GREEN),
+		);
+		wrap_svg_tag(content)
 	}
 
-	/// The wrapped return type is `[Point; 2]`.
-	pub fn bounding_box(&self) -> JsValue {
-		let bbox_points: [Point; 2] = self.0.bounding_box().map(|p| Point { x: p.x, y: p.y });
-		to_js_value(bbox_points)
+	pub fn bounding_box(&self) -> String {
+		let [bbox_min_corner, bbox_max_corner] = self.0.bounding_box();
+
+		let bezier = self.get_bezier_path();
+		let content = format!(
+			"{bezier}<rect x={} y ={} width=\"{}\" height=\"{}\" style=\"fill:{NONE};stroke:{RED};stroke-width:1\" />",
+			bbox_min_corner.x,
+			bbox_min_corner.y,
+			bbox_max_corner.x - bbox_min_corner.x,
+			bbox_max_corner.y - bbox_min_corner.y,
+		);
+		wrap_svg_tag(content)
 	}
 
-	/// The wrapped return type is `Vec<f64>`.
-	pub fn inflections(&self) -> JsValue {
+	pub fn inflections(&self) -> String {
 		let inflections: Vec<f64> = self.0.inflections();
-		to_js_value(inflections)
+
+		let bezier = self.get_bezier_path();
+		let circles: String = inflections
+			.iter()
+			.map(|&t_value| {
+				let point = self.0.evaluate(t_value);
+				draw_circle(point.x, point.y, 3., RED, 1.5, WHITE)
+			})
+			.fold("".to_string(), |acc, circle| acc + &circle);
+		let content = format!("{bezier}{circles}");
+		wrap_svg_tag(content)
 	}
 
 	/// The wrapped return type is `Vec<Vec<Point>>`.
diff --git a/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs b/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs
index 83e761a6..8baf3d2d 100644
--- a/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs
+++ b/website/other/bezier-rs-demos/wasm/src/svg_drawing.rs
@@ -4,8 +4,12 @@ pub const SVG_CLOSE_TAG: &str = "</svg>";
 
 // Stylistic constants
 pub const BLACK: &str = "black";
+pub const WHITE: &str = "white";
 pub const GRAY: &str = "gray";
 pub const RED: &str = "red";
+pub const ORANGE: &str = "orange";
+pub const GREEN: &str = "green";
+pub const NONE: &str = "none";
 
 // Default attributes
 pub const CURVE_ATTRIBUTES: &str = "stroke=\"black\" stroke-width=\"2\" fill=\"none\"";
@@ -13,7 +17,21 @@ pub const HANDLE_LINE_ATTRIBUTES: &str = "stroke=\"gray\" stroke-width=\"1\" fil
 pub const ANCHOR_ATTRIBUTES: &str = "r=\"4\" stroke=\"black\" stroke-width=\"2\" fill=\"white\"";
 pub const HANDLE_ATTRIBUTES: &str = "r=\"3\" stroke=\"gray\" stroke-width=\"1.5\" fill=\"white\"";
 
-/// Helper function to create an SVG text entitty.
+// Text constants
+pub const TEXT_OFFSET_X: f64 = 5.;
+pub const TEXT_OFFSET_Y: f64 = 193.;
+
+/// 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>"#)
 }
+
+/// Helper function to create an SVG circle entity.
+pub fn draw_circle(x_pos: f64, y_pos: f64, radius: f64, stroke: &str, stroke_width: f64, fill: &str) -> String {
+	format!(r#"<circle cx="{x_pos}" cy="{y_pos}" r="{radius}" stroke="{stroke}" stroke-width="{stroke_width}" fill="{fill}"/>"#)
+}
+
+/// Helper function to create an SVG circle entity.
+pub fn draw_line(start_x: f64, start_y: f64, end_x: f64, end_y: f64, stroke: &str, stroke_width: f64) -> String {
+	format!(r#"<line x1="{start_x}" y1="{start_y}" x2="{end_x}" y2="{end_y}" stroke="{stroke}" stroke-width="{stroke_width}"/>"#)
+}