diff --git a/website/other/bezier-rs-demos/src/App.vue b/website/other/bezier-rs-demos/src/App.vue index 279060ab..eb014c4d 100644 --- a/website/other/bezier-rs-demos/src/App.vue +++ b/website/other/bezier-rs-demos/src/App.vue @@ -27,7 +27,7 @@ import { defineComponent, markRaw } from "vue"; import { WasmBezier } from "@/../wasm/pkg"; -import { drawBezier, drawCircleSector, drawCurve, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing"; +import { drawBezier, drawCircleSector, drawLine, drawPoint, getContextFromCanvas, COLORS } from "@/utils/drawing"; import { BezierCurveType, CircleSector, Point, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types"; import BezierExamplePane from "@/components/BezierExamplePane.vue"; @@ -43,6 +43,14 @@ const tSliderOptions = { variable: "t", }; +const tErrorOptions = { + variable: "error", + min: 0.1, + max: 2, + step: 0.1, + default: 0.5, +}; + export default defineComponent({ data() { return { @@ -288,6 +296,66 @@ export default defineComponent({ }, }, }, + { + name: "Intersect (Line Segment)", + callback: (bezier: WasmBezierInstance): string => { + const line = [ + [150, 150], + [20, 20], + ]; + return bezier.intersect_line_segment(line); + }, + }, + { + name: "Intersect (Quadratic)", + callback: (bezier: WasmBezierInstance, options: Record): string => { + const quadratic = [ + [20, 80], + [180, 10], + [90, 120], + ]; + return bezier.intersect_quadratic_segment(quadratic, options.error); + }, + exampleOptions: { + [BezierCurveType.Quadratic]: { + sliderOptions: [tErrorOptions], + }, + }, + }, + { + name: "Intersect (Cubic)", + callback: (bezier: WasmBezierInstance, options: Record): string => { + const cubic = [ + [40, 20], + [100, 40], + [40, 120], + [175, 140], + ]; + return bezier.intersect_cubic_segment(cubic, options.error); + }, + exampleOptions: { + [BezierCurveType.Quadratic]: { + sliderOptions: [tErrorOptions], + }, + }, + }, + { + name: "Intersect (Self)", + callback: (bezier: WasmBezierInstance, options: Record): string => bezier.intersect_self(options.error), + exampleOptions: { + [BezierCurveType.Quadratic]: { + sliderOptions: [tErrorOptions], + }, + [BezierCurveType.Cubic]: { + customPoints: [ + [160, 180], + [170, 10], + [30, 90], + [180, 140], + ], + }, + }, + }, ], features: [ { @@ -334,116 +402,6 @@ export default defineComponent({ ], }, }, - { - name: "Intersect (Line Segment)", - callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance): void => { - const context = getContextFromCanvas(canvas); - const line = [ - { x: 150, y: 150 }, - { x: 20, y: 20 }, - ]; - const mappedLine = line.map((p) => [p.x, p.y]); - 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_value(t)); - drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2); - }); - }, - }, - { - name: "Intersect (Quadratic Segment)", - callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record): void => { - const context = getContextFromCanvas(canvas); - const points = [ - { x: 20, y: 80 }, - { x: 180, y: 10 }, - { x: 90, y: 120 }, - ]; - const mappedPoints = points.map((p) => [p.x, p.y]); - 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_value(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: "Intersect (Cubic Segment)", - callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record): 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_value(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: "Intersect (Self)", - callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record): void => { - const context = getContextFromCanvas(canvas); - const intersections: number[][] = JSON.parse(bezier.intersect_self(options.error)); - intersections.forEach((tValues: number[]) => { - const p = JSON.parse(bezier.evaluate_value(tValues[0])); - drawPoint(context, p, 3, COLORS.NON_INTERACTIVE.STROKE_2); - }); - }, - template: markRaw(SliderExample), - templateOptions: { - sliders: [ - { - variable: "error", - min: 0.01, - max: 1, - step: 0.05, - default: 0.5, - }, - ], - }, - customPoints: { - [BezierCurveType.Cubic]: [ - [160, 180], - [170, 10], - [30, 90], - [180, 140], - ], - }, - curveDegrees: new Set([BezierCurveType.Cubic]), - }, { name: "Arcs", callback: (canvas: HTMLCanvasElement, bezier: WasmBezierInstance, options: Record): void => { diff --git a/website/other/bezier-rs-demos/wasm/src/bezier.rs b/website/other/bezier-rs-demos/wasm/src/bezier.rs index 2f09335b..5b2a8d6e 100644 --- a/website/other/bezier-rs-demos/wasm/src/bezier.rs +++ b/website/other/bezier-rs-demos/wasm/src/bezier.rs @@ -372,28 +372,102 @@ impl WasmBezier { self.0.intersections(curve, error) } - pub fn intersect_line_segment(&self, js_points: &JsValue) -> Vec { + 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]); - self.intersect(&line, None) + + let bezier_curve_svg = self.get_bezier_path(); + + 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 + .intersect(&line, None) + .iter() + .map(|intersection_t| { + let point = &self.0.evaluate(*intersection_t); + draw_circle(point.x, point.y, 4., RED, 1.5, WHITE) + }) + .fold(String::new(), |acc, item| format!("{acc}{item}")); + wrap_svg_tag(format!("{bezier_curve_svg}{line_svg}{intersections_svg}")) } - pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> Vec { + pub fn intersect_quadratic_segment(&self, js_points: &JsValue, error: f64) -> String { 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)) + + let bezier_curve_svg = self.get_bezier_path(); + + let empty_string = String::new(); + let mut quadratic_svg = String::new(); + quadratic.to_svg( + &mut quadratic_svg, + CURVE_ATTRIBUTES.to_string().replace(BLACK, RED), + empty_string.clone(), + empty_string.clone(), + empty_string, + ); + + let intersections_svg = self + .intersect(&quadratic, Some(error)) + .iter() + .map(|intersection_t| { + let point = &self.0.evaluate(*intersection_t); + draw_circle(point.x, point.y, 4., RED, 1.5, WHITE) + }) + .fold(String::new(), |acc, item| format!("{acc}{item}")); + wrap_svg_tag(format!("{bezier_curve_svg}{quadratic_svg}{intersections_svg}")) } - pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: f64) -> Vec { + pub fn intersect_cubic_segment(&self, js_points: &JsValue, error: 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]); - self.intersect(&cubic, Some(error)) + + let bezier_curve_svg = self.get_bezier_path(); + + let empty_string = String::new(); + let mut cubic_svg = String::new(); + cubic.to_svg( + &mut cubic_svg, + CURVE_ATTRIBUTES.to_string().replace(BLACK, RED), + empty_string.clone(), + empty_string.clone(), + empty_string, + ); + + let intersections_svg = self + .intersect(&cubic, Some(error)) + .iter() + .map(|intersection_t| { + let point = &self.0.evaluate(*intersection_t); + draw_circle(point.x, point.y, 4., RED, 1.5, WHITE) + }) + .fold(String::new(), |acc, item| format!("{acc}{item}")); + + wrap_svg_tag(format!("{bezier_curve_svg}{cubic_svg}{intersections_svg}")) } /// The wrapped return type is `Vec<[f64; 2]>`. - pub fn intersect_self(&self, error: f64) -> JsValue { - let points: Vec<[f64; 2]> = self.0.self_intersections(Some(error)); - to_js_value(points) + pub fn intersect_self(&self, error: f64) -> String { + let bezier_curve_svg = self.get_bezier_path(); + let intersect_self_svg = self + .0 + .self_intersections(Some(error)) + .iter() + .map(|intersection_t| { + let point = &self.0.evaluate(intersection_t[0]); + draw_circle(point.x, point.y, 4., RED, 1.5, WHITE) + }) + .fold(bezier_curve_svg, |acc, item| format!("{acc}{item}")); + + wrap_svg_tag(intersect_self_svg) } pub fn reduce(&self) -> String {