Bezier-rs: Add Euclidean parameterization to Bezier::evaluate (#828)
* Add enum to evaluate for differenciating compute type * Add euclidean parameterization and update styling in the UI Co-authored-by: Rob Nadal <robnadal44@gmail.com> * Update usage of evaluate in graphite * Add description * Code review changes * Update tests * Improve ComputeType ergonomics * Large code review/cleanup pass Co-authored-by: Rob Nadal <robnadal44@gmail.com> Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Hannah Li
Keavon Chambers
parent
a220bfa759
commit
01a9724389
|
|
@ -1,5 +1,6 @@
|
|||
use crate::messages::prelude::*;
|
||||
|
||||
use bezier_rs::ComputeType;
|
||||
use graphene::layers::vector::consts::ManipulatorType;
|
||||
use graphene::layers::vector::manipulator_group::ManipulatorGroup;
|
||||
use graphene::layers::vector::manipulator_point::ManipulatorPoint;
|
||||
|
|
@ -277,7 +278,7 @@ impl ShapeEditor {
|
|||
for bezier_id in document.layer(layer_path).ok()?.as_subpath()?.bezier_iter() {
|
||||
let bezier = bezier_id.internal;
|
||||
let t = bezier.project(layer_pos, projection_options);
|
||||
let layerspace = bezier.evaluate(t);
|
||||
let layerspace = bezier.evaluate(ComputeType::Parametric(t));
|
||||
|
||||
let screenspace = transform.transform_point2(layerspace);
|
||||
let distance_squared = screenspace.distance_squared(position);
|
||||
|
|
|
|||
|
|
@ -203,6 +203,8 @@ impl Bezier {
|
|||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use crate::utils::ComputeType;
|
||||
|
||||
use super::compare::compare_points;
|
||||
use super::*;
|
||||
|
||||
|
|
@ -213,13 +215,13 @@ mod tests {
|
|||
let p3 = DVec2::new(160., 170.);
|
||||
|
||||
let bezier1 = Bezier::quadratic_through_points(p1, p2, p3, None);
|
||||
assert!(compare_points(bezier1.evaluate(0.5), p2));
|
||||
assert!(compare_points(bezier1.evaluate(ComputeType::Parametric(0.5)), p2));
|
||||
|
||||
let bezier2 = Bezier::quadratic_through_points(p1, p2, p3, Some(0.8));
|
||||
assert!(compare_points(bezier2.evaluate(0.8), p2));
|
||||
assert!(compare_points(bezier2.evaluate(ComputeType::Parametric(0.8)), p2));
|
||||
|
||||
let bezier3 = Bezier::quadratic_through_points(p1, p2, p3, Some(0.));
|
||||
assert!(compare_points(bezier3.evaluate(0.), p2));
|
||||
assert!(compare_points(bezier3.evaluate(ComputeType::Parametric(0.)), p2));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -229,12 +231,12 @@ mod tests {
|
|||
let p3 = DVec2::new(160., 160.);
|
||||
|
||||
let bezier1 = Bezier::cubic_through_points(p1, p2, p3, Some(0.3), Some(10.));
|
||||
assert!(compare_points(bezier1.evaluate(0.3), p2));
|
||||
assert!(compare_points(bezier1.evaluate(ComputeType::Parametric(0.3)), p2));
|
||||
|
||||
let bezier2 = Bezier::cubic_through_points(p1, p2, p3, Some(0.8), Some(91.7));
|
||||
assert!(compare_points(bezier2.evaluate(0.8), p2));
|
||||
assert!(compare_points(bezier2.evaluate(ComputeType::Parametric(0.8)), p2));
|
||||
|
||||
let bezier3 = Bezier::cubic_through_points(p1, p2, p3, Some(0.), Some(91.7));
|
||||
assert!(compare_points(bezier3.evaluate(0.), p2));
|
||||
assert!(compare_points(bezier3.evaluate(ComputeType::Parametric(0.)), p2));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
use crate::utils::{f64_compare, ComputeType};
|
||||
|
||||
use super::*;
|
||||
|
||||
/// Functionality relating to looking up properties of the `Bezier` or points along the `Bezier`.
|
||||
impl Bezier {
|
||||
/// Calculate the point on the curve based on the `t`-value provided.
|
||||
pub(crate) fn unrestricted_evaluate(&self, t: f64) -> DVec2 {
|
||||
pub(crate) fn unrestricted_parametric_evaluate(&self, t: f64) -> DVec2 {
|
||||
// Basis code based off of pseudocode found here: <https://pomax.github.io/bezierinfo/#explanation>.
|
||||
|
||||
let t_squared = t * t;
|
||||
|
|
@ -21,11 +23,48 @@ impl Bezier {
|
|||
}
|
||||
}
|
||||
|
||||
/// Calculate the point along the curve that is a factor of `d` away from the start.
|
||||
pub(crate) fn unrestricted_euclidean_evaluate(&self, d: f64, error: f64) -> DVec2 {
|
||||
if let BezierHandles::Linear = self.handles {
|
||||
return self.unrestricted_parametric_evaluate(d);
|
||||
}
|
||||
|
||||
let mut low = 0.;
|
||||
let mut mid = 0.;
|
||||
let mut high = 1.;
|
||||
let total_length = self.length(None);
|
||||
|
||||
while low < high {
|
||||
mid = (low + high) / 2.;
|
||||
let test_d = self.trim(0., mid).length(None) / total_length;
|
||||
if f64_compare(test_d, d, error) {
|
||||
break;
|
||||
} else if test_d < d {
|
||||
low = mid;
|
||||
} else {
|
||||
high = mid;
|
||||
}
|
||||
}
|
||||
self.unrestricted_parametric_evaluate(mid)
|
||||
}
|
||||
|
||||
/// Calculate the point on the curve based on the `t`-value provided.
|
||||
/// Expects `t` to be within the inclusive range `[0, 1]`.
|
||||
pub fn evaluate(&self, t: f64) -> DVec2 {
|
||||
assert!((0.0..=1.).contains(&t));
|
||||
self.unrestricted_evaluate(t)
|
||||
pub fn evaluate(&self, t: ComputeType) -> DVec2 {
|
||||
match t {
|
||||
ComputeType::Parametric(t) => {
|
||||
assert!((0.0..=1.).contains(&t));
|
||||
self.unrestricted_parametric_evaluate(t)
|
||||
}
|
||||
ComputeType::Euclidean(t) => {
|
||||
assert!((0.0..=1.).contains(&t));
|
||||
self.unrestricted_euclidean_evaluate(t, 0.0001)
|
||||
}
|
||||
ComputeType::EuclideanWithinError { t, epsilon } => {
|
||||
assert!((0.0..=1.).contains(&t));
|
||||
self.unrestricted_euclidean_evaluate(t, epsilon)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Return a selection of equidistant points on the bezier curve.
|
||||
|
|
@ -36,7 +75,7 @@ impl Bezier {
|
|||
let mut steps_array = Vec::with_capacity(steps_unwrapped + 1);
|
||||
|
||||
for t in 0..steps_unwrapped + 1 {
|
||||
steps_array.push(self.evaluate(f64::from(t as i32) * ratio))
|
||||
steps_array.push(self.evaluate(ComputeType::Parametric(f64::from(t as i32) * ratio)))
|
||||
}
|
||||
|
||||
steps_array
|
||||
|
|
@ -123,7 +162,7 @@ impl Bezier {
|
|||
if step_index == 0 {
|
||||
distance = *table_distance;
|
||||
} else {
|
||||
distance = point.distance(self.evaluate(iterator_t));
|
||||
distance = point.distance(self.evaluate(ComputeType::Parametric(iterator_t)));
|
||||
*table_distance = distance;
|
||||
}
|
||||
if distance < new_minimum_distance {
|
||||
|
|
@ -173,23 +212,29 @@ mod tests {
|
|||
let p4 = DVec2::new(30., 21.);
|
||||
|
||||
let bezier1 = Bezier::from_quadratic_dvec2(p1, p2, p3);
|
||||
assert_eq!(bezier1.evaluate(0.5), DVec2::new(12.5, 6.25));
|
||||
assert_eq!(bezier1.evaluate(ComputeType::Parametric(0.5)), DVec2::new(12.5, 6.25));
|
||||
|
||||
let bezier2 = Bezier::from_cubic_dvec2(p1, p2, p3, p4);
|
||||
assert_eq!(bezier2.evaluate(0.5), DVec2::new(16.5, 9.625));
|
||||
assert_eq!(bezier2.evaluate(ComputeType::Parametric(0.5)), DVec2::new(16.5, 9.625));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_compute_lookup_table() {
|
||||
let bezier1 = Bezier::from_quadratic_coordinates(10., 10., 30., 30., 50., 10.);
|
||||
let lookup_table1 = bezier1.compute_lookup_table(Some(2));
|
||||
assert_eq!(lookup_table1, vec![bezier1.start(), bezier1.evaluate(0.5), bezier1.end()]);
|
||||
assert_eq!(lookup_table1, vec![bezier1.start(), bezier1.evaluate(ComputeType::Parametric(0.5)), bezier1.end()]);
|
||||
|
||||
let bezier2 = Bezier::from_cubic_coordinates(10., 10., 30., 30., 70., 70., 90., 10.);
|
||||
let lookup_table2 = bezier2.compute_lookup_table(Some(4));
|
||||
assert_eq!(
|
||||
lookup_table2,
|
||||
vec![bezier2.start(), bezier2.evaluate(0.25), bezier2.evaluate(0.5), bezier2.evaluate(0.75), bezier2.end()]
|
||||
vec![
|
||||
bezier2.start(),
|
||||
bezier2.evaluate(ComputeType::Parametric(0.25)),
|
||||
bezier2.evaluate(ComputeType::Parametric(0.50)),
|
||||
bezier2.evaluate(ComputeType::Parametric(0.75)),
|
||||
bezier2.end()
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
use super::*;
|
||||
use crate::utils::ComputeType;
|
||||
|
||||
use glam::DMat2;
|
||||
use std::ops::Range;
|
||||
|
|
@ -52,7 +53,7 @@ impl Bezier {
|
|||
pub fn tangent(&self, t: f64) -> DVec2 {
|
||||
match self.handles {
|
||||
BezierHandles::Linear => self.end - self.start,
|
||||
_ => self.derivative().unwrap().evaluate(t),
|
||||
_ => self.derivative().unwrap().evaluate(ComputeType::Parametric(t)),
|
||||
}
|
||||
.normalize()
|
||||
}
|
||||
|
|
@ -67,8 +68,8 @@ impl Bezier {
|
|||
pub fn curvature(&self, t: f64) -> f64 {
|
||||
let (d, dd) = match &self.derivative() {
|
||||
Some(first_derivative) => match first_derivative.derivative() {
|
||||
Some(second_derivative) => (first_derivative.evaluate(t), second_derivative.evaluate(t)),
|
||||
None => (first_derivative.evaluate(t), first_derivative.end - first_derivative.start),
|
||||
Some(second_derivative) => (first_derivative.evaluate(ComputeType::Parametric(t)), second_derivative.evaluate(ComputeType::Parametric(t))),
|
||||
None => (first_derivative.evaluate(ComputeType::Parametric(t)), first_derivative.end - first_derivative.start),
|
||||
},
|
||||
None => (self.end - self.start, DVec2::new(0., 0.)),
|
||||
};
|
||||
|
|
@ -128,7 +129,7 @@ impl Bezier {
|
|||
let extrema = self.local_extrema();
|
||||
for t_values in extrema {
|
||||
for t in t_values {
|
||||
let point = self.evaluate(t);
|
||||
let point = self.evaluate(ComputeType::Parametric(t));
|
||||
// Update bounding box if new min/max is found.
|
||||
endpoints_min = endpoints_min.min(point);
|
||||
endpoints_max = endpoints_max.max(point);
|
||||
|
|
@ -276,7 +277,7 @@ impl Bezier {
|
|||
// Accept the t value if it is approximately in [0, 1] and if the corresponding coordinates are within the range of the linear line
|
||||
.filter(|&t| {
|
||||
utils::f64_approximately_in_range(t, 0., 1., MAX_ABSOLUTE_DIFFERENCE)
|
||||
&& utils::dvec2_approximately_in_range(self.unrestricted_evaluate(t), min, max, MAX_ABSOLUTE_DIFFERENCE).all()
|
||||
&& utils::dvec2_approximately_in_range(self.unrestricted_parametric_evaluate(t), min, max, MAX_ABSOLUTE_DIFFERENCE).all()
|
||||
})
|
||||
// Ensure the returned value is within the correct range
|
||||
.map(|t| t.clamp(0., 1.))
|
||||
|
|
@ -348,7 +349,7 @@ mod tests {
|
|||
];
|
||||
assert_eq!(&de_casteljau_points, &expected_de_casteljau_points);
|
||||
|
||||
assert_eq!(expected_de_casteljau_points[3][0], bezier.evaluate(0.5));
|
||||
assert_eq!(expected_de_casteljau_points[3][0], bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -564,12 +565,12 @@ mod tests {
|
|||
let line1 = Bezier::from_linear_coordinates(20., 60., 70., 60.);
|
||||
let intersections1 = bezier.intersections(&line1, None);
|
||||
assert!(intersections1.len() == 1);
|
||||
assert!(compare_points(bezier.evaluate(intersections1[0]), DVec2::new(30., 60.)));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections1[0])), DVec2::new(30., 60.)));
|
||||
|
||||
// Intersection in the middle of curve
|
||||
let line2 = Bezier::from_linear_coordinates(150., 150., 30., 30.);
|
||||
let intersections2 = bezier.intersections(&line2, None);
|
||||
assert!(compare_points(bezier.evaluate(intersections2[0]), DVec2::new(96., 96.)));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections2[0])), DVec2::new(96., 96.)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -583,12 +584,12 @@ mod tests {
|
|||
let line1 = Bezier::from_linear_coordinates(20., 50., 40., 50.);
|
||||
let intersections1 = bezier.intersections(&line1, None);
|
||||
assert!(intersections1.len() == 1);
|
||||
assert!(compare_points(bezier.evaluate(intersections1[0]), p1));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections1[0])), p1));
|
||||
|
||||
// Intersection in the middle of curve
|
||||
let line2 = Bezier::from_linear_coordinates(150., 150., 30., 30.);
|
||||
let intersections2 = bezier.intersections(&line2, None);
|
||||
assert!(compare_points(bezier.evaluate(intersections2[0]), DVec2::new(47.77355, 47.77354)));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections2[0])), DVec2::new(47.77355, 47.77354)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -603,14 +604,14 @@ mod tests {
|
|||
let line1 = Bezier::from_linear_coordinates(20., 30., 40., 30.);
|
||||
let intersections1 = bezier.intersections(&line1, None);
|
||||
assert!(intersections1.len() == 1);
|
||||
assert!(compare_points(bezier.evaluate(intersections1[0]), p1));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections1[0])), p1));
|
||||
|
||||
// Intersection at edge and in middle of curve, Discriminant < 0
|
||||
let line2 = Bezier::from_linear_coordinates(150., 150., 30., 30.);
|
||||
let intersections2 = bezier.intersections(&line2, None);
|
||||
assert!(intersections2.len() == 2);
|
||||
assert!(compare_points(bezier.evaluate(intersections2[0]), p1));
|
||||
assert!(compare_points(bezier.evaluate(intersections2[1]), DVec2::new(85.84, 85.84)));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections2[0])), p1));
|
||||
assert!(compare_points(bezier.evaluate(ComputeType::Parametric(intersections2[1])), DVec2::new(85.84, 85.84)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -621,8 +622,8 @@ mod tests {
|
|||
let intersections = bezier1.intersections(&bezier2, None);
|
||||
let intersections2 = bezier2.intersections(&bezier1, None);
|
||||
assert!(compare_vec_of_points(
|
||||
intersections.iter().map(|&t| bezier1.evaluate(t)).collect(),
|
||||
intersections2.iter().map(|&t| bezier2.evaluate(t)).collect(),
|
||||
intersections.iter().map(|&t| bezier1.evaluate(ComputeType::Parametric(t))).collect(),
|
||||
intersections2.iter().map(|&t| bezier2.evaluate(ComputeType::Parametric(t))).collect(),
|
||||
2.
|
||||
));
|
||||
}
|
||||
|
|
@ -632,8 +633,8 @@ mod tests {
|
|||
let bezier = Bezier::from_cubic_coordinates(160., 180., 170., 10., 30., 90., 180., 140.);
|
||||
let intersections = bezier.self_intersections(Some(0.5));
|
||||
assert!(compare_vec_of_points(
|
||||
intersections.iter().map(|&t| bezier.evaluate(t[0])).collect(),
|
||||
intersections.iter().map(|&t| bezier.evaluate(t[1])).collect(),
|
||||
intersections.iter().map(|&t| bezier.evaluate(ComputeType::Parametric(t[0]))).collect(),
|
||||
intersections.iter().map(|&t| bezier.evaluate(ComputeType::Parametric(t[1]))).collect(),
|
||||
2.
|
||||
));
|
||||
assert!(Bezier::from_linear_coordinates(160., 180., 170., 10.).self_intersections(None).is_empty());
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
use super::*;
|
||||
use crate::utils::f64_compare;
|
||||
use crate::utils::{f64_compare, ComputeType};
|
||||
|
||||
use glam::DMat2;
|
||||
use std::f64::consts::PI;
|
||||
|
|
@ -8,7 +8,7 @@ use std::f64::consts::PI;
|
|||
impl Bezier {
|
||||
/// Returns the pair of Bezier curves that result from splitting the original curve at the point corresponding to `t`.
|
||||
pub fn split(&self, t: f64) -> [Bezier; 2] {
|
||||
let split_point = self.evaluate(t);
|
||||
let split_point = self.evaluate(ComputeType::Parametric(t));
|
||||
|
||||
match self.handles {
|
||||
BezierHandles::Linear => [Bezier::from_linear_dvec2(self.start, split_point), Bezier::from_linear_dvec2(split_point, self.end)],
|
||||
|
|
@ -53,7 +53,7 @@ impl Bezier {
|
|||
pub fn trim(&self, t1: f64, t2: f64) -> Bezier {
|
||||
// If t1 is equal to t2, return a bezier comprised entirely of the same point
|
||||
if f64_compare(t1, t2, MAX_ABSOLUTE_DIFFERENCE) {
|
||||
let point = self.evaluate(t1);
|
||||
let point = self.evaluate(ComputeType::Parametric(t1));
|
||||
return match self.handles {
|
||||
BezierHandles::Linear => Bezier::from_linear_dvec2(point, point),
|
||||
BezierHandles::Quadratic { handle: _ } => Bezier::from_quadratic_dvec2(point, point, point),
|
||||
|
|
@ -444,9 +444,9 @@ impl Bezier {
|
|||
// Inner loop to find the next maximal segment of the curve that can be approximated with a circular arc
|
||||
while iterations <= max_iterations {
|
||||
iterations += 1;
|
||||
let p1 = self.evaluate(low);
|
||||
let p2 = self.evaluate(middle);
|
||||
let p3 = self.evaluate(high);
|
||||
let p1 = self.evaluate(ComputeType::Parametric(low));
|
||||
let p2 = self.evaluate(ComputeType::Parametric(middle));
|
||||
let p3 = self.evaluate(ComputeType::Parametric(high));
|
||||
|
||||
let wrapped_center = utils::compute_circle_center_from_points(p1, p2, p3);
|
||||
// If the segment is linear, move on to next segment
|
||||
|
|
@ -486,8 +486,8 @@ impl Bezier {
|
|||
};
|
||||
|
||||
// Use points in between low, middle, and high to evaluate how well the arc approximates the curve
|
||||
let e1 = self.evaluate((low + middle) / 2.);
|
||||
let e2 = self.evaluate((middle + high) / 2.);
|
||||
let e1 = self.evaluate(ComputeType::Parametric((low + middle) / 2.));
|
||||
let e2 = self.evaluate(ComputeType::Parametric((middle + high) / 2.));
|
||||
|
||||
// Iterate until we find the largest good approximation such that the next iteration is not a good approximation with an arc
|
||||
if utils::f64_compare(radius, e1.distance(center), error) && utils::f64_compare(radius, e2.distance(center), error) {
|
||||
|
|
@ -537,6 +537,8 @@ impl Bezier {
|
|||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use crate::utils::ComputeType;
|
||||
|
||||
use super::compare::{compare_arcs, compare_vector_of_beziers};
|
||||
use super::*;
|
||||
|
||||
|
|
@ -546,34 +548,34 @@ mod tests {
|
|||
let [part1, part2] = line.split(0.5);
|
||||
|
||||
assert_eq!(part1.start(), line.start());
|
||||
assert_eq!(part1.end(), line.evaluate(0.5));
|
||||
assert_eq!(part1.evaluate(0.5), line.evaluate(0.25));
|
||||
assert_eq!(part1.end(), line.evaluate(ComputeType::Parametric(0.5)));
|
||||
assert_eq!(part1.evaluate(ComputeType::Parametric(0.5)), line.evaluate(ComputeType::Parametric(0.25)));
|
||||
|
||||
assert_eq!(part2.start(), line.evaluate(0.5));
|
||||
assert_eq!(part2.start(), line.evaluate(ComputeType::Parametric(0.5)));
|
||||
assert_eq!(part2.end(), line.end());
|
||||
assert_eq!(part2.evaluate(0.5), line.evaluate(0.75));
|
||||
assert_eq!(part2.evaluate(ComputeType::Parametric(0.5)), line.evaluate(ComputeType::Parametric(0.75)));
|
||||
|
||||
let quad_bezier = Bezier::from_quadratic_coordinates(10., 10., 50., 50., 90., 10.);
|
||||
let [part3, part4] = quad_bezier.split(0.5);
|
||||
|
||||
assert_eq!(part3.start(), quad_bezier.start());
|
||||
assert_eq!(part3.end(), quad_bezier.evaluate(0.5));
|
||||
assert_eq!(part3.evaluate(0.5), quad_bezier.evaluate(0.25));
|
||||
assert_eq!(part3.end(), quad_bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
assert_eq!(part3.evaluate(ComputeType::Parametric(0.5)), quad_bezier.evaluate(ComputeType::Parametric(0.25)));
|
||||
|
||||
assert_eq!(part4.start(), quad_bezier.evaluate(0.5));
|
||||
assert_eq!(part4.start(), quad_bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
assert_eq!(part4.end(), quad_bezier.end());
|
||||
assert_eq!(part4.evaluate(0.5), quad_bezier.evaluate(0.75));
|
||||
assert_eq!(part4.evaluate(ComputeType::Parametric(0.5)), quad_bezier.evaluate(ComputeType::Parametric(0.75)));
|
||||
|
||||
let cubic_bezier = Bezier::from_cubic_coordinates(10., 10., 50., 50., 90., 10., 40., 50.);
|
||||
let [part5, part6] = cubic_bezier.split(0.5);
|
||||
|
||||
assert_eq!(part5.start(), cubic_bezier.start());
|
||||
assert_eq!(part5.end(), cubic_bezier.evaluate(0.5));
|
||||
assert_eq!(part5.evaluate(0.5), cubic_bezier.evaluate(0.25));
|
||||
assert_eq!(part5.end(), cubic_bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
assert_eq!(part5.evaluate(ComputeType::Parametric(0.5)), cubic_bezier.evaluate(ComputeType::Parametric(0.25)));
|
||||
|
||||
assert_eq!(part6.start(), cubic_bezier.evaluate(0.5));
|
||||
assert_eq!(part6.start(), cubic_bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
assert_eq!(part6.end(), cubic_bezier.end());
|
||||
assert_eq!(part6.evaluate(0.5), cubic_bezier.evaluate(0.75));
|
||||
assert_eq!(part6.evaluate(ComputeType::Parametric(0.5)), cubic_bezier.evaluate(ComputeType::Parametric(0.75)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -611,23 +613,23 @@ mod tests {
|
|||
let line = Bezier::from_linear_coordinates(80., 80., 40., 40.);
|
||||
let trimmed1 = line.trim(0.25, 0.75);
|
||||
|
||||
assert_eq!(trimmed1.start(), line.evaluate(0.25));
|
||||
assert_eq!(trimmed1.end(), line.evaluate(0.75));
|
||||
assert_eq!(trimmed1.evaluate(0.5), line.evaluate(0.5));
|
||||
assert_eq!(trimmed1.start(), line.evaluate(ComputeType::Parametric(0.25)));
|
||||
assert_eq!(trimmed1.end(), line.evaluate(ComputeType::Parametric(0.75)));
|
||||
assert_eq!(trimmed1.evaluate(ComputeType::Parametric(0.5)), line.evaluate(ComputeType::Parametric(0.5)));
|
||||
|
||||
let quadratic_bezier = Bezier::from_quadratic_coordinates(80., 80., 40., 40., 70., 70.);
|
||||
let trimmed2 = quadratic_bezier.trim(0.25, 0.75);
|
||||
|
||||
assert_eq!(trimmed2.start(), quadratic_bezier.evaluate(0.25));
|
||||
assert_eq!(trimmed2.end(), quadratic_bezier.evaluate(0.75));
|
||||
assert_eq!(trimmed2.evaluate(0.5), quadratic_bezier.evaluate(0.5));
|
||||
assert_eq!(trimmed2.start(), quadratic_bezier.evaluate(ComputeType::Parametric(0.25)));
|
||||
assert_eq!(trimmed2.end(), quadratic_bezier.evaluate(ComputeType::Parametric(0.75)));
|
||||
assert_eq!(trimmed2.evaluate(ComputeType::Parametric(0.5)), quadratic_bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
|
||||
let cubic_bezier = Bezier::from_cubic_coordinates(80., 80., 40., 40., 70., 70., 150., 150.);
|
||||
let trimmed3 = cubic_bezier.trim(0.25, 0.75);
|
||||
|
||||
assert_eq!(trimmed3.start(), cubic_bezier.evaluate(0.25));
|
||||
assert_eq!(trimmed3.end(), cubic_bezier.evaluate(0.75));
|
||||
assert_eq!(trimmed3.evaluate(0.5), cubic_bezier.evaluate(0.5));
|
||||
assert_eq!(trimmed3.start(), cubic_bezier.evaluate(ComputeType::Parametric(0.25)));
|
||||
assert_eq!(trimmed3.end(), cubic_bezier.evaluate(ComputeType::Parametric(0.75)));
|
||||
assert_eq!(trimmed3.evaluate(ComputeType::Parametric(0.5)), cubic_bezier.evaluate(ComputeType::Parametric(0.5)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -741,16 +743,24 @@ mod tests {
|
|||
assert_eq!(outline.len(), 4);
|
||||
|
||||
// Assert the first length-wise piece of the outline is 10 units from the line
|
||||
assert!(f64_compare(outline[0].evaluate(0.25).distance(line.evaluate(0.25)), 10., MAX_ABSOLUTE_DIFFERENCE)); // f64
|
||||
assert!(f64_compare(
|
||||
outline[0].evaluate(ComputeType::Parametric(0.25)).distance(line.evaluate(ComputeType::Parametric(0.25))),
|
||||
10.,
|
||||
MAX_ABSOLUTE_DIFFERENCE
|
||||
)); // f64
|
||||
|
||||
// Assert the first cap touches the line end point at the halfway point
|
||||
assert!(outline[1].evaluate(0.5).abs_diff_eq(line.end(), MAX_ABSOLUTE_DIFFERENCE));
|
||||
assert!(outline[1].evaluate(ComputeType::Parametric(0.5)).abs_diff_eq(line.end(), MAX_ABSOLUTE_DIFFERENCE));
|
||||
|
||||
// Assert the second length-wise piece of the outline is 10 units from the line
|
||||
assert!(f64_compare(outline[2].evaluate(0.25).distance(line.evaluate(0.75)), 10., MAX_ABSOLUTE_DIFFERENCE)); // f64
|
||||
assert!(f64_compare(
|
||||
outline[2].evaluate(ComputeType::Parametric(0.25)).distance(line.evaluate(ComputeType::Parametric(0.75))),
|
||||
10.,
|
||||
MAX_ABSOLUTE_DIFFERENCE
|
||||
)); // f64
|
||||
|
||||
// Assert the second cap touches the line start point at the halfway point
|
||||
assert!(outline[3].evaluate(0.5).abs_diff_eq(line.start(), MAX_ABSOLUTE_DIFFERENCE));
|
||||
assert!(outline[3].evaluate(ComputeType::Parametric(0.5)).abs_diff_eq(line.start(), MAX_ABSOLUTE_DIFFERENCE));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
@ -767,9 +777,21 @@ mod tests {
|
|||
dbg!(scaled_bezier);
|
||||
|
||||
// Assert the scaled bezier is 30 units from the line
|
||||
assert!(f64_compare(scaled_bezier.evaluate(0.).distance(bezier.evaluate(0.)), 30., MAX_ABSOLUTE_DIFFERENCE));
|
||||
assert!(f64_compare(scaled_bezier.evaluate(1.).distance(bezier.evaluate(1.)), 30., MAX_ABSOLUTE_DIFFERENCE));
|
||||
assert!(f64_compare(scaled_bezier.evaluate(0.5).distance(bezier.evaluate(0.5)), 30., MAX_ABSOLUTE_DIFFERENCE));
|
||||
assert!(f64_compare(
|
||||
scaled_bezier.evaluate(ComputeType::Parametric(0.)).distance(bezier.evaluate(ComputeType::Parametric(0.))),
|
||||
30.,
|
||||
MAX_ABSOLUTE_DIFFERENCE
|
||||
));
|
||||
assert!(f64_compare(
|
||||
scaled_bezier.evaluate(ComputeType::Parametric(1.)).distance(bezier.evaluate(ComputeType::Parametric(1.))),
|
||||
30.,
|
||||
MAX_ABSOLUTE_DIFFERENCE
|
||||
));
|
||||
assert!(f64_compare(
|
||||
scaled_bezier.evaluate(ComputeType::Parametric(0.5)).distance(bezier.evaluate(ComputeType::Parametric(0.5))),
|
||||
30.,
|
||||
MAX_ABSOLUTE_DIFFERENCE
|
||||
));
|
||||
}
|
||||
|
||||
#[test]
|
||||
|
|
|
|||
|
|
@ -7,3 +7,4 @@ mod utils;
|
|||
|
||||
pub use bezier::*;
|
||||
pub use subpath::*;
|
||||
pub use utils::ComputeType;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,13 @@ use crate::consts::{MAX_ABSOLUTE_DIFFERENCE, STRICT_MAX_ABSOLUTE_DIFFERENCE};
|
|||
use glam::{BVec2, DMat2, DVec2};
|
||||
use std::f64::consts::PI;
|
||||
|
||||
#[derive(Copy, Clone, PartialEq)]
|
||||
pub enum ComputeType {
|
||||
Parametric(f64),
|
||||
Euclidean(f64),
|
||||
EuclideanWithinError { t: f64, epsilon: f64 },
|
||||
}
|
||||
|
||||
/// Helper to perform the computation of a and c, where b is the provided point on the curve.
|
||||
/// Given the correct power of `t` and `(1-t)`, the computation is the same for quadratic and cubic cases.
|
||||
/// Relevant derivation and the definitions of a, b, and c can be found in [the projection identity section](https://pomax.github.io/bezierinfo/#abc) of Pomax's bezier curve primer.
|
||||
|
|
|
|||
|
|
@ -1,23 +1,69 @@
|
|||
<template>
|
||||
<div class="App">
|
||||
<h1>Bezier-rs Interactive Documentation</h1>
|
||||
<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" :triggerOnMouseMove="feature.triggerOnMouseMove" />
|
||||
</div>
|
||||
<h2>Subpaths</h2>
|
||||
<div v-for="(feature, index) in subpathFeatures" :key="index">
|
||||
<SubpathExamplePane :name="feature.name" :callback="feature.callback" />
|
||||
</div>
|
||||
<h1>Bezier-rs Interactive Documentation</h1>
|
||||
<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"
|
||||
:triggerOnMouseMove="feature.triggerOnMouseMove"
|
||||
:chooseComputeType="feature.chooseComputeType"
|
||||
/>
|
||||
</div>
|
||||
<h2>Subpaths</h2>
|
||||
<div v-for="(feature, index) in subpathFeatures" :key="index">
|
||||
<SubpathExamplePane :name="feature.name" :callback="feature.callback" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
/* Example Pane styles */
|
||||
.example-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.compute-type-choice {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.example-pane-header {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.example-pane-container {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Example styles */
|
||||
.example-header {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.example-figure {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
border: solid 1px black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
import { BezierCurveType, ExampleOptions, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
|
||||
import { ComputeType, ExampleOptions, WasmBezierInstance, WasmSubpathInstance } from "@/utils/types";
|
||||
|
||||
import BezierExamplePane from "@/components/BezierExamplePane.vue";
|
||||
import SubpathExamplePane from "@/components/SubpathExamplePane.vue";
|
||||
|
|
@ -56,10 +102,10 @@ export default defineComponent({
|
|||
return WasmBezier.cubic_through_points(points, options.t, options["midpoint separation"]);
|
||||
},
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Linear]: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[30, 50],
|
||||
[120, 70],
|
||||
|
|
@ -75,7 +121,7 @@ export default defineComponent({
|
|||
},
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[30, 50],
|
||||
[120, 70],
|
||||
|
|
@ -106,18 +152,19 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
name: "Evaluate",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.evaluate(options.t),
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>, _: undefined, computeType: ComputeType): string => bezier.evaluate(options.computeArgument, computeType),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
sliderOptions: [tSliderOptions],
|
||||
Quadratic: {
|
||||
sliderOptions: [{ ...tSliderOptions, variable: "computeArgument" }],
|
||||
},
|
||||
},
|
||||
chooseComputeType: true,
|
||||
},
|
||||
{
|
||||
name: "Lookup Table",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.compute_lookup_table(options.steps),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
min: 2,
|
||||
|
|
@ -134,17 +181,17 @@ export default defineComponent({
|
|||
name: "Derivative",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.derivative(),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Linear]: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[30, 40],
|
||||
[110, 50],
|
||||
[120, 130],
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[50, 50],
|
||||
[60, 100],
|
||||
|
|
@ -158,7 +205,7 @@ export default defineComponent({
|
|||
name: "Tangent",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.tangent(options.t),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tSliderOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -168,7 +215,7 @@ export default defineComponent({
|
|||
name: "Normal",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.normal(options.t),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tSliderOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -177,10 +224,10 @@ export default defineComponent({
|
|||
name: "Curvature",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.curvature(options.t),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Linear]: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tSliderOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -189,7 +236,7 @@ export default defineComponent({
|
|||
name: "Split",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.split(options.t),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tSliderOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -198,7 +245,7 @@ export default defineComponent({
|
|||
name: "Trim",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.trim(options.t1, options.t2),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
variable: "t1",
|
||||
|
|
@ -228,14 +275,14 @@ export default defineComponent({
|
|||
name: "Local Extrema",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.local_extrema(),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[40, 40],
|
||||
[160, 30],
|
||||
[110, 150],
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
|
|
@ -253,10 +300,10 @@ export default defineComponent({
|
|||
name: "Inflections",
|
||||
callback: (bezier: WasmBezierInstance, _: Record<string, number>): string => bezier.inflections(),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Linear]: {
|
||||
Linear: {
|
||||
disabled: true,
|
||||
},
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
|
|
@ -269,7 +316,7 @@ export default defineComponent({
|
|||
name: "Offset",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.offset(options.distance),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
variable: "distance",
|
||||
|
|
@ -286,7 +333,7 @@ export default defineComponent({
|
|||
name: "Outline",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.outline(options.distance),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
variable: "distance",
|
||||
|
|
@ -303,7 +350,7 @@ export default defineComponent({
|
|||
name: "Graduated Outline",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.graduated_outline(options.start_distance, options.end_distance),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
variable: "start_distance",
|
||||
|
|
@ -328,7 +375,7 @@ export default defineComponent({
|
|||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string =>
|
||||
bezier.skewed_outline(options.distance1, options.distance2, options.distance3, options.distance4),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
variable: "distance1",
|
||||
|
|
@ -392,7 +439,7 @@ export default defineComponent({
|
|||
];
|
||||
|
||||
return {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
customPoints: [
|
||||
[50, 50],
|
||||
[85, 65],
|
||||
|
|
@ -401,7 +448,7 @@ export default defineComponent({
|
|||
sliderOptions,
|
||||
disabled: false,
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
|
|
@ -435,7 +482,7 @@ export default defineComponent({
|
|||
return bezier.intersect_quadratic_segment(quadratic, options.error);
|
||||
},
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tErrorOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -452,7 +499,7 @@ export default defineComponent({
|
|||
return bezier.intersect_cubic_segment(cubic, options.error);
|
||||
},
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tErrorOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -461,10 +508,10 @@ export default defineComponent({
|
|||
name: "Intersect (Self)",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.intersect_self(options.error),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tErrorOptions],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
customPoints: [
|
||||
[160, 180],
|
||||
[170, 10],
|
||||
|
|
@ -478,7 +525,7 @@ export default defineComponent({
|
|||
name: "Rotate",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.rotate(options.angle * Math.PI, 100, 100),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [
|
||||
{
|
||||
variable: "angle",
|
||||
|
|
@ -496,7 +543,7 @@ export default defineComponent({
|
|||
name: "De Casteljau Points",
|
||||
callback: (bezier: WasmBezierInstance, options: Record<string, number>): string => bezier.de_casteljau_points(options.t),
|
||||
exampleOptions: {
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
sliderOptions: [tSliderOptions],
|
||||
},
|
||||
},
|
||||
|
|
@ -520,12 +567,3 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,42 +9,31 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { WasmBezier } from "@/../wasm/pkg";
|
||||
import { getConstructorKey, getCurveType } from "@/utils/helpers";
|
||||
import { BezierCallback, BezierCurveType, WasmBezierManipulatorKey, SliderOption } from "@/utils/types";
|
||||
import { getConstructorKey, getCurveType, BezierCallback, BezierCurveType, WasmBezierManipulatorKey, SliderOption, ComputeType } from "@/utils/types";
|
||||
|
||||
const SELECTABLE_RANGE = 10;
|
||||
|
||||
// Given the number of points in the curve, map the index of a point to the correct manipulator key
|
||||
const MANIPULATOR_KEYS_FROM_BEZIER_TYPE: { [key in BezierCurveType]: WasmBezierManipulatorKey[] } = {
|
||||
[BezierCurveType.Linear]: ["set_start", "set_end"],
|
||||
[BezierCurveType.Quadratic]: ["set_start", "set_handle_start", "set_end"],
|
||||
[BezierCurveType.Cubic]: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
|
||||
Linear: ["set_start", "set_end"],
|
||||
Quadratic: ["set_start", "set_handle_start", "set_end"],
|
||||
Cubic: ["set_start", "set_handle_start", "set_handle_end", "set_end"],
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: String,
|
||||
points: {
|
||||
type: Array as PropType<Array<Array<number>>>,
|
||||
required: true,
|
||||
mutable: true,
|
||||
},
|
||||
callback: {
|
||||
type: Function as PropType<BezierCallback>,
|
||||
required: true,
|
||||
},
|
||||
sliderOptions: {
|
||||
type: Object as PropType<Array<SliderOption>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
triggerOnMouseMove: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: { type: String as PropType<string>, required: true },
|
||||
points: { type: Array as PropType<Array<Array<number>>>, required: true, mutable: true },
|
||||
callback: { type: Function as PropType<BezierCallback>, required: true },
|
||||
sliderOptions: { type: Object as PropType<Array<SliderOption>>, default: () => ({}) },
|
||||
triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
|
||||
computeType: { type: String as PropType<ComputeType>, default: "Parametric" },
|
||||
},
|
||||
data() {
|
||||
const curveType = getCurveType(this.points.length);
|
||||
|
|
@ -55,7 +44,7 @@ export default defineComponent({
|
|||
|
||||
return {
|
||||
bezier,
|
||||
bezierSVG: this.callback(bezier, sliderData),
|
||||
bezierSVG: this.callback(bezier, sliderData, undefined, "Euclidean"),
|
||||
manipulatorKeys,
|
||||
activeIndex: undefined as number | undefined,
|
||||
mutablePoints: JSON.parse(JSON.stringify(this.points)),
|
||||
|
|
@ -84,9 +73,9 @@ export default defineComponent({
|
|||
if (this.activeIndex !== undefined) {
|
||||
this.bezier[this.manipulatorKeys[this.activeIndex]](mx, my);
|
||||
this.mutablePoints[this.activeIndex] = [mx, my];
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData);
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
|
||||
} else if (this.triggerOnMouseMove) {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my]);
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, [mx, my], this.computeType);
|
||||
}
|
||||
},
|
||||
getSliderValue: (sliderValue: number, sliderUnit?: string | string[]) => (Array.isArray(sliderUnit) ? sliderUnit[sliderValue] : sliderUnit),
|
||||
|
|
@ -94,18 +83,15 @@ export default defineComponent({
|
|||
watch: {
|
||||
sliderData: {
|
||||
handler() {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData);
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
computeType: {
|
||||
handler() {
|
||||
this.bezierSVG = this.callback(this.bezier, this.sliderData, undefined, this.computeType);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-figure {
|
||||
border: solid 1px black;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="example-pane-container">
|
||||
<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">
|
||||
<BezierExample
|
||||
|
|
@ -10,51 +19,46 @@
|
|||
:callback="callback"
|
||||
:sliderOptions="example.sliderOptions"
|
||||
:triggerOnMouseMove="triggerOnMouseMove"
|
||||
:computeType="computeTypeChoice"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
import { BezierCallback, BezierCurveType, ExampleOptions, SliderOption } from "@/utils/types";
|
||||
import { BezierCallback, BezierCurveType, BEZIER_CURVE_TYPE, ComputeType, ExampleOptions, SliderOption } from "@/utils/types";
|
||||
|
||||
import BezierExample from "@/components/BezierExample.vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
name: String,
|
||||
callback: {
|
||||
type: Function as PropType<BezierCallback>,
|
||||
required: true,
|
||||
},
|
||||
exampleOptions: {
|
||||
type: Object as PropType<ExampleOptions>,
|
||||
default: () => ({}),
|
||||
},
|
||||
triggerOnMouseMove: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
name: { type: String as PropType<string>, required: true },
|
||||
callback: { type: Function as PropType<BezierCallback>, required: true },
|
||||
exampleOptions: { type: Object as PropType<ExampleOptions>, default: () => ({}) },
|
||||
triggerOnMouseMove: { type: Boolean as PropType<boolean>, default: false },
|
||||
chooseComputeType: { type: Boolean as PropType<boolean>, default: false },
|
||||
},
|
||||
data() {
|
||||
const exampleDefaults = {
|
||||
[BezierCurveType.Linear]: {
|
||||
Linear: {
|
||||
points: [
|
||||
[30, 60],
|
||||
[140, 120],
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Quadratic]: {
|
||||
Quadratic: {
|
||||
points: [
|
||||
[30, 50],
|
||||
[140, 30],
|
||||
[160, 170],
|
||||
],
|
||||
},
|
||||
[BezierCurveType.Cubic]: {
|
||||
Cubic: {
|
||||
points: [
|
||||
[30, 30],
|
||||
[60, 140],
|
||||
|
|
@ -65,10 +69,10 @@ 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 || [];
|
||||
const defaultSliderOptions: SliderOption[] = this.exampleOptions.Quadratic?.sliderOptions || [];
|
||||
|
||||
return {
|
||||
examples: Object.values(BezierCurveType).map((curveType: BezierCurveType) => {
|
||||
examples: BEZIER_CURVE_TYPE.map((curveType: BezierCurveType) => {
|
||||
const givenData = this.exampleOptions[curveType];
|
||||
const defaultData = exampleDefaults[curveType];
|
||||
return {
|
||||
|
|
@ -78,6 +82,8 @@ export default defineComponent({
|
|||
sliderOptions: givenData?.sliderOptions || defaultSliderOptions,
|
||||
};
|
||||
}),
|
||||
id: `${Math.random()}`.substring(2),
|
||||
computeTypeChoice: "Parametric" as ComputeType,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -85,15 +91,3 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.example-pane-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
|
|
@ -16,20 +18,10 @@ const POINT_INDEX_TO_MANIPULATOR: WasmSubpathManipulatorKey[] = ["set_anchor", "
|
|||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: String,
|
||||
triples: {
|
||||
type: Array as PropType<Array<Array<number[] | undefined>>>,
|
||||
required: true,
|
||||
mutable: true,
|
||||
},
|
||||
closed: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: false,
|
||||
},
|
||||
callback: {
|
||||
type: Function as PropType<SubpathCallback>,
|
||||
required: true,
|
||||
},
|
||||
title: { type: String as PropType<string>, required: true },
|
||||
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 },
|
||||
},
|
||||
data() {
|
||||
const subpath = WasmSubpath.from_triples(this.triples, this.closed) as WasmSubpathInstance;
|
||||
|
|
@ -69,11 +61,3 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-figure {
|
||||
border: solid 1px black;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
|
||||
|
|
@ -18,11 +20,8 @@ import SubpathExample from "@/components/SubpathExample.vue";
|
|||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
name: String,
|
||||
callback: {
|
||||
type: Function as PropType<SubpathCallback>,
|
||||
required: true,
|
||||
},
|
||||
name: { type: String as PropType<string>, required: true },
|
||||
callback: { type: Function as PropType<SubpathCallback>, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -58,15 +57,3 @@ export default defineComponent({
|
|||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.example-pane-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
import { BezierCurveType, WasmBezierConstructorKey } from "@/utils/types";
|
||||
|
||||
export function getCurveType(numPoints: number): BezierCurveType {
|
||||
switch (numPoints) {
|
||||
case 2:
|
||||
return BezierCurveType.Linear;
|
||||
case 3:
|
||||
return BezierCurveType.Quadratic;
|
||||
case 4:
|
||||
return BezierCurveType.Cubic;
|
||||
default:
|
||||
throw new Error("Invalid number of points for a bezier");
|
||||
}
|
||||
}
|
||||
|
||||
export function getConstructorKey(bezierCurveType: BezierCurveType): WasmBezierConstructorKey {
|
||||
switch (bezierCurveType) {
|
||||
case BezierCurveType.Linear:
|
||||
return "new_linear";
|
||||
case BezierCurveType.Quadratic:
|
||||
return "new_quadratic";
|
||||
case BezierCurveType.Cubic:
|
||||
return "new_cubic";
|
||||
default:
|
||||
throw new Error("Invalid value for a BezierCurveType");
|
||||
}
|
||||
}
|
||||
|
|
@ -8,13 +8,12 @@ export type WasmBezierManipulatorKey = "set_start" | "set_handle_start" | "set_h
|
|||
export type WasmSubpathInstance = InstanceType<WasmRawInstance["WasmSubpath"]>;
|
||||
export type WasmSubpathManipulatorKey = "set_anchor" | "set_in_handle" | "set_out_handle";
|
||||
|
||||
export enum BezierCurveType {
|
||||
Linear = "Linear",
|
||||
Quadratic = "Quadratic",
|
||||
Cubic = "Cubic",
|
||||
}
|
||||
export const BEZIER_CURVE_TYPE = ["Linear", "Quadratic", "Cubic"] as const;
|
||||
export type BezierCurveType = typeof BEZIER_CURVE_TYPE[number];
|
||||
|
||||
export type BezierCallback = (bezier: WasmBezierInstance, options: Record<string, number>, mouseLocation?: [number, number]) => string;
|
||||
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 ExampleOptions = {
|
||||
|
|
@ -33,3 +32,24 @@ export type SliderOption = {
|
|||
variable: string;
|
||||
unit?: string | string[];
|
||||
};
|
||||
|
||||
export function getCurveType(numPoints: number): BezierCurveType {
|
||||
const mapping: Record<number, BezierCurveType> = {
|
||||
2: "Linear",
|
||||
3: "Quadratic",
|
||||
4: "Cubic",
|
||||
};
|
||||
|
||||
if (!(numPoints in mapping)) throw new Error("Invalid number of points for a bezier");
|
||||
|
||||
return mapping[numPoints];
|
||||
}
|
||||
|
||||
export function getConstructorKey(bezierCurveType: BezierCurveType): WasmBezierConstructorKey {
|
||||
const mapping: Record<BezierCurveType, WasmBezierConstructorKey> = {
|
||||
Linear: "new_linear",
|
||||
Quadratic: "new_quadratic",
|
||||
Cubic: "new_cubic",
|
||||
};
|
||||
return mapping[bezierCurveType];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
use crate::svg_drawing::*;
|
||||
use bezier_rs::{ArcStrategy, ArcsOptions, Bezier, ProjectionOptions};
|
||||
use bezier_rs::{ArcStrategy, ArcsOptions, Bezier, ComputeType, ProjectionOptions};
|
||||
use glam::DVec2;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use wasm_bindgen::prelude::*;
|
||||
|
|
@ -132,10 +132,14 @@ impl WasmBezier {
|
|||
wrap_svg_tag(format!("{bezier}{}", draw_text(format!("Length: {:.2}", self.0.length(None)), TEXT_OFFSET_X, TEXT_OFFSET_Y, BLACK)))
|
||||
}
|
||||
|
||||
pub fn evaluate(&self, t: f64) -> String {
|
||||
pub fn evaluate(&self, t: f64, compute_type: String) -> String {
|
||||
let bezier = self.get_bezier_path();
|
||||
let point = &self.0.evaluate(t);
|
||||
let content = format!("{bezier}{}", draw_circle(*point, 4., RED, 1.5, WHITE));
|
||||
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 content = format!("{bezier}{}", draw_circle(point, 4., RED, 1.5, WHITE));
|
||||
wrap_svg_tag(content)
|
||||
}
|
||||
|
||||
|
|
@ -173,7 +177,7 @@ impl WasmBezier {
|
|||
let bezier = self.get_bezier_path();
|
||||
|
||||
let tangent_point = self.0.tangent(t);
|
||||
let intersection_point = self.0.evaluate(t);
|
||||
let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
|
||||
let tangent_end = intersection_point + tangent_point * SCALE_UNIT_VECTOR_FACTOR;
|
||||
|
||||
let content = format!(
|
||||
|
|
@ -189,7 +193,7 @@ impl WasmBezier {
|
|||
let bezier = self.get_bezier_path();
|
||||
|
||||
let normal_point = self.0.normal(t);
|
||||
let intersection_point = self.0.evaluate(t);
|
||||
let intersection_point = self.0.evaluate(ComputeType::Parametric(t));
|
||||
let normal_end = intersection_point + normal_point * SCALE_UNIT_VECTOR_FACTOR;
|
||||
|
||||
let content = format!(
|
||||
|
|
@ -205,7 +209,7 @@ impl WasmBezier {
|
|||
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 intersection_point = self.0.evaluate(ComputeType::Parametric(t));
|
||||
|
||||
let curvature_center = intersection_point + normal_point * radius;
|
||||
|
||||
|
|
@ -269,7 +273,7 @@ impl WasmBezier {
|
|||
|
||||
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 projected_point = self.0.evaluate(ComputeType::Parametric(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.),);
|
||||
|
|
@ -285,7 +289,7 @@ impl WasmBezier {
|
|||
.zip([RED, GREEN])
|
||||
.flat_map(|(t_value_list, color)| {
|
||||
t_value_list.iter().map(|&t_value| {
|
||||
let point = self.0.evaluate(t_value);
|
||||
let point = self.0.evaluate(ComputeType::Parametric(t_value));
|
||||
draw_circle(point, 3., color, 1.5, WHITE)
|
||||
})
|
||||
})
|
||||
|
|
@ -320,7 +324,7 @@ impl WasmBezier {
|
|||
let circles: String = inflections
|
||||
.iter()
|
||||
.map(|&t_value| {
|
||||
let point = self.0.evaluate(t_value);
|
||||
let point = self.0.evaluate(ComputeType::Parametric(t_value));
|
||||
draw_circle(point, 3., RED, 1.5, WHITE)
|
||||
})
|
||||
.fold("".to_string(), |acc, circle| acc + &circle);
|
||||
|
|
@ -413,7 +417,7 @@ impl WasmBezier {
|
|||
.intersect(&line, None)
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(*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}"));
|
||||
|
|
@ -433,7 +437,7 @@ impl WasmBezier {
|
|||
.intersect(&quadratic, Some(error))
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(*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}"));
|
||||
|
|
@ -453,7 +457,7 @@ impl WasmBezier {
|
|||
.intersect(&cubic, Some(error))
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(*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}"));
|
||||
|
|
@ -469,7 +473,7 @@ impl WasmBezier {
|
|||
.self_intersections(Some(error))
|
||||
.iter()
|
||||
.map(|intersection_t| {
|
||||
let point = &self.0.evaluate(intersection_t[0]);
|
||||
let point = &self.0.evaluate(ComputeType::Parametric(intersection_t[0]));
|
||||
draw_circle(*point, 4., RED, 1.5, WHITE)
|
||||
})
|
||||
.fold(bezier_curve_svg, |acc, item| format!("{acc}{item}"));
|
||||
|
|
|
|||
Loading…
Reference in New Issue