Quadratic Béziers Explained
To determine the position of a drag handle, one can use the De Casteljau equation for quadratic curves as shown in the following JavaScript function:
function getPointAtQuadraticT(p0, cp1, p, t = 0.5) {
let t1 = 1 - t;
return {
x: t1 * t1 * p0.x + 2 * t1 * t * cp1.x + t ** 2 * p.x,
y: t1 * t1 * p0.y + 2 * t1 * t * cp1.y + t ** 2 * p.y
};
}
The process can be reversed by solving for a modified control point based on the coordinates of the moved drag handle, assuming the drag handle remains at t=0.5:
function quadraticControlPointAtT(p0, ptMid, p, t = 0.5) {
let t1 = 1 - t;
let cp1x = (ptMid.x - t1 * t1 * p0.x - t * t * p.x) / (2 * t1 * t);
let cp1y = (ptMid.y - t1 * t1 * p0.y - t * t * p.y) / (2 * t1 * t);
return { x: cp1x, y: cp1y };
}
Furthermore, the provided code demonstrates the visualization and manipulation of quadratic Bézier curves using SVG elements and JavaScript functions.
Cubic Béziers Analysis
In contrast to quadratic Béziers, cubic Béziers with two control points present complexities in determining new coordinates for both controls simultaneously. Vector editors often employ various techniques for curve manipulation during dragging operations.
For cubic curves, the calculation of single points along the path involves the use of a helper function like this:
function getPointAtCubicT(p0, cp1, cp2, p, t = 0.5) {
let t1 = 1 - t;
let ptMid = {
x: t1 ** 3 * p0.x + 3 * t1 ** 2 * t * cp1.x + 3 * t1 * t ** 2 * cp2.x + t ** 3 * p.x,
y: t1 ** 3 * p0.y + 3 * t1 ** 2 * t * cp1.y + 3 * t1 * t ** 2 * cp2.y + t ** 3 * p.y
};
return ptMid;
}
Strategies for manipulating cubic Bézier curves are explored, including the challenge of maintaining the drag handle's position at t=0.5.
Adjusting the cubic control points involves peculiar calculations using factors such as 8/3, though the exact rationale behind this constant remains mysterious.
Drawing Conclusions
While the concept of on-path editing may seem intuitive, it comes with limitations when applied to cubic Bézier curves. Directly manipulating control points emerges as a more flexible and standardized approach for curve editing, simplifying application development and enhancing user experience.