Implement arcs for Bezier math library (#731)

* added arcs impl

Co-authored-by: Hannah Li <[email protected]>
Co-authored-by: Rob Nadal <[email protected]>

* fixed arc drawing,  todo - fix linear check

Co-authored-by: Hannah Li <[email protected]>

* fixed linear bug + added comments and tests

Co-authored-by: Hannah Li <[email protected]>

* added max iteration guard + made params optional  + added impl todo

* Add functionality to get arcs between extrema

* Add ArcsOptions to manage optional parameters of the arcs function

* added slider to toggle between arcs impl

Co-authored-by: Rob Nadal <[email protected]>

* Remove unused types

* address some comments

* added rustdoc for CircularArc struct

* Extract duplicate code into helper, remove loop labels, use window function

* Make JsValue handling consistent in WasmBezier and add comments for the underlying type

* Add enum for MaximizeArcs Auto/On/Off functionality

* Change Auto to Automatic

* fix errors from resolving merge conflict

* fixed error from resolving merge conflicts

* fixed formatting

* address comments

* Small fix

* Add some missing comments

* address comments

* rename variable

* Use unit to show maximize_arcs values

* Change i32 to usize and other minor adjustments

* Change computation for middle t values

* Remove tsconfig

* Fix more usize number handling

Co-authored-by: Hannah Li <[email protected]>
Co-authored-by: Rob Nadal <[email protected]>
Co-authored-by: Keavon Chambers <[email protected]>

Author: 4 people

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

@@ -25,8 +25,8 @@
 <script lang="ts">
 import { defineComponent, markRaw } from "vue";
 
-import { drawBezier, drawBezierHelper, drawCircle, drawCurve, drawLine, drawPoint, drawText, getContextFromCanvas, COLORS } from "@/utils/drawing";
-import { BezierCurveType, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
+import { drawBezier, drawBezierHelper, drawCircle, drawCircleSector, drawCurve, drawLine, drawPoint, drawText, getContextFromCanvas, COLORS } from "@/utils/drawing";
+import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
 
 import ExamplePane from "@/components/ExamplePane.vue";
 import SliderExample from "@/components/SliderExample.vue";
@@ -115,10 +115,10 @@ export default defineComponent({
 				{
 					name: "Lookup Table",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
-						const lookupPoints = bezier.compute_lookup_table(options.steps);
-						lookupPoints.forEach((serializedPoint, index) => {
+						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), JSON.parse(serializedPoint), 3, COLORS.NON_INTERACTIVE.STROKE_1);
+								drawPoint(getContextFromCanvas(canvas), point, 3, COLORS.NON_INTERACTIVE.STROKE_1);
 							}
 						});
 					},
@@ -142,7 +142,7 @@ export default defineComponent({
 
 						const derivativeBezier = bezier.derivative();
 						if (derivativeBezier) {
-							const points: Point[] = derivativeBezier.get_points().map((p) => JSON.parse(p));
+							const points: Point[] = JSON.parse(derivativeBezier.get_points());
 							if (points.length === 2) {
 								drawLine(context, points[0], points[1], COLORS.NON_INTERACTIVE.STROKE_1);
 							} else {
@@ -356,10 +356,7 @@ export default defineComponent({
 					name: "Rotate",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
 						const context = getContextFromCanvas(canvas);
-						const rotatedBezier = bezier
-							.rotate(options.angle * Math.PI)
-							.get_points()
-							.map((p) => JSON.parse(p));
+						const rotatedBezier = JSON.parse(bezier.rotate(options.angle * Math.PI).get_points());
 						drawBezier(context, rotatedBezier, null, { curveStrokeColor: COLORS.NON_INTERACTIVE.STROKE_1, radius: 3.5 });
 					},
 					template: markRaw(SliderExample),
@@ -496,6 +493,57 @@ export default defineComponent({
 						});
 					},
 				},
+				{
+					name: "Arcs",
+					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {
+						const context = getContextFromCanvas(canvas);
+						const arcs: CircleSector[] = JSON.parse(bezier.arcs(options.error, options.max_iterations, options.strategy));
+						arcs.forEach((circleSector, index) => {
+							drawCircleSector(context, circleSector, `hsl(${40 * index}, 100%, 50%, 75%)`, `hsl(${40 * index}, 100%, 50%, 37.5%)`);
+						});
+					},
+					template: markRaw(SliderExample),
+					templateOptions: {
+						sliders: [
+							{
+								variable: "strategy",
+								min: 0,
+								max: 2,
+								step: 1,
+								default: 0,
+								unit: [": Automatic", ": FavorLargerArcs", ": FavorCorrectness"],
+							},
+							{
+								variable: "error",
+								min: 0.05,
+								max: 1,
+								step: 0.05,
+								default: 0.5,
+							},
+							{
+								variable: "max_iterations",
+								min: 50,
+								max: 200,
+								step: 1,
+								default: 100,
+							},
+						],
+					},
+					curveDegrees: new Set([BezierCurveType.Quadratic, BezierCurveType.Cubic]),
+					customPoints: {
+						[BezierCurveType.Quadratic]: [
+							[50, 50],
+							[85, 65],
+							[100, 100],
+						],
+						[BezierCurveType.Cubic]: [
+							[160, 180],
+							[170, 10],
+							[30, 90],
+							[180, 160],
+						],
+					},
+				},
 				{
 					name: "Offset",
 					callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record<string, number>): void => {

bezier-rs/docs/interactive-docs/src/components/BezierDrawing.ts

@@ -35,16 +35,14 @@ class BezierDrawing {
 		this.callback = callback;
 		this.options = options;
 		this.createThroughPoints = createThroughPoints;
-		this.points = bezier
-			.get_points()
-			.map((p) => JSON.parse(p))
-			.map((p, i, points) => ({
-				x: p.x,
-				y: p.y,
-				r: getPointSizeByIndex(i, points.length),
-				selected: false,
-				manipulator: MANIPULATOR_KEYS_FROM_BEZIER_TYPE[points.length][i],
-			}));
+		const bezierPoints: Point[] = JSON.parse(bezier.get_points());
+		this.points = bezierPoints.map((p, i, points) => ({
+			x: p.x,
+			y: p.y,
+			r: getPointSizeByIndex(i, points.length),
+			selected: false,
+			manipulator: MANIPULATOR_KEYS_FROM_BEZIER_TYPE[points.length][i],
+		}));
 
 		if (this.createThroughPoints && this.points.length === 4) {
 			// Use the first handler as the middle point
@@ -122,22 +120,22 @@ class BezierDrawing {
 
 		// For the create through points cases, we store a bezier where the handle is actually the point that the curve should pass through
 		// This is so that we can re-use the drag and drop logic, while simply drawing the desired bezier instead
-		const actualBezierPointLength = this.bezier.get_points().length;
+		const actualBezierPointLength = JSON.parse(this.bezier.get_points()).length;
 		let pointsToDraw = this.points;
 
 		let styleConfig: Partial<BezierStyleConfig> = {
 			handleLineStrokeColor: COLORS.INTERACTIVE.STROKE_2,
 		};
 		let dragIndex = this.dragIndex;
 		if (this.createThroughPoints) {
-			let serializedPoints;
+			let bezierThroughPoints;
 			const pointList = this.points.map((p) => [p.x, p.y]);
 			if (actualBezierPointLength === 3) {
-				serializedPoints = WasmBezier.quadratic_through_points(pointList, this.options.t);
+				bezierThroughPoints = WasmBezier.quadratic_through_points(pointList, this.options.t);
 			} else {
-				serializedPoints = WasmBezier.cubic_through_points(pointList, this.options.t, this.options["midpoint separation"]);
+				bezierThroughPoints = WasmBezier.cubic_through_points(pointList, this.options.t, this.options["midpoint separation"]);
 			}
-			pointsToDraw = serializedPoints.get_points().map((p) => JSON.parse(p));
+			pointsToDraw = JSON.parse(bezierThroughPoints.get_points());
 			if (this.dragIndex === 1) {
 				// Do not propagate dragIndex when the the non-endpoint is moved
 				dragIndex = null;

bezier-rs/docs/interactive-docs/src/components/SliderExample.vue

@@ -2,7 +2,7 @@
 	<div>
 		<Example :title="title" :bezier="bezier" :callback="callback" :options="sliderData" :createThroughPoints="createThroughPoints" />
 		<div v-for="(slider, index) in templateOptions.sliders" :key="index">
-			<div class="slider-label">{{ slider.variable }} = {{ sliderData[slider.variable] }}{{ sliderUnits[slider.variable] }}</div>
+			<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>
@@ -45,6 +45,9 @@ export default defineComponent({
 	components: {
 		Example,
 	},
+	methods: {
+		getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
+	},
 });
 </script>
 

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

@@ -1,4 +1,4 @@
-import { BezierStyleConfig, Point, WasmBezierInstance } from "@/utils/types";
+import { BezierStyleConfig, CircleSector, Point, WasmBezierInstance } from "@/utils/types";
 
 const HANDLE_RADIUS_FACTOR = 2 / 3;
 const DEFAULT_ENDPOINT_RADIUS = 5;
@@ -81,8 +81,22 @@ export const drawCircle = (ctx: CanvasRenderingContext2D, point: Point, radius:
 	ctx.stroke();
 };
 
+export const drawCircleSector = (ctx: CanvasRenderingContext2D, circleSector: CircleSector, strokeColor = COLORS.INTERACTIVE.STROKE_1, fillColor = COLORS.NON_INTERACTIVE.STROKE_1): void => {
+	ctx.strokeStyle = strokeColor;
+	ctx.fillStyle = fillColor;
+	ctx.lineWidth = 2;
+
+	const { center, radius, startAngle, endAngle } = circleSector;
+	ctx.beginPath();
+	ctx.moveTo(center.x, center.y);
+	ctx.arc(center.x, center.y, radius, startAngle, endAngle);
+	ctx.lineTo(center.x, center.y);
+	ctx.closePath();
+	ctx.fill();
+};
+
 export const drawBezierHelper = (ctx: CanvasRenderingContext2D, bezier: WasmBezierInstance, bezierStyleConfig: Partial<BezierStyleConfig> = {}): void => {
-	const points = bezier.get_points().map((p: string) => JSON.parse(p));
+	const points = JSON.parse(bezier.get_points());
 	drawBezier(ctx, points, null, bezierStyleConfig);
 };
 

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

@@ -23,7 +23,7 @@ export type SliderOption = {
 	step: number;
 	default: number;
 	variable: string;
-	unit?: string;
+	unit?: string | string[];
 };
 
 export type TemplateOption = {
@@ -46,3 +46,10 @@ export type BezierStyleConfig = {
 	radius: number;
 	drawHandles: boolean;
 };
+
+export type CircleSector = {
+	center: Point;
+	radius: number;
+	startAngle: number;
+	endAngle: number;
+};