28:["$","title",null,{"children":"Apollo Curves and Other Blended Circular Arc Splines | Jacob Rus | Observable"}] 2d:Tfe7,comparison_segment_plot = { const [p1, p2, p3, p4] = viewof curve_points.value; const height = 500; const svg = d3.select(DOM.svg(width, height)) // .attr('style', `background-color: ${colors.palegray};`); const background_arc = function(a) { return bezpts_to_svgpath(bezeval( (function (t) { const t1mz = cmul([1-t,0], cexp([0,a])); const rel_vector = cdiv([t,0], cadd(t1mz, [t,0])); return cadd(p2, cmul(csub(p3, p2), rel_vector)); }), [0, 1], [0, width, 0, height], 0.001)) } const na = 3*32; const background_arcs = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(na+1).keys()].map(d => (d/na - 0.5)*2*Math.PI).slice(1)) .enter().append('path') const circles = svg.append("g").selectAll("path") .data([[p1, p2, p3], [p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", '#d5d5d5') .attr("fill", "none"); const sv_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[0]) .attr("fill", "none"); const wenz_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[1]) .attr("fill", "none"); const sly_trig_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[4]) .attr("fill", "none"); const sly_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[5]) .attr("fill", "none"); const apollo_cubic_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[8]) .attr("fill", "none"); const apollo_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[9]) .attr("fill", "none"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p1, p2, p3, p4]) .enter().append("circle") .attr("r", 4) .attr("fill", colors.black) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } function dragged(d) { d[0] = clamp(d3.event.x, 0, width); d[1] = clamp(d3.event.y, 0, height); viewof curve_points.value = viewof curve_points.value; // Dispatches an input event! } function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); circles.attr("d", ([a, p, b]) => { const [rad, larc_flag, sweep_flag] = arcviapoint(a, b, p); return `M${a[0]},${a[1]} A${rad},${rad},0,${larc_flag},${sweep_flag},${b[0]},${b[1]}`; }); background_arcs.attr('d', background_arc); wenz_path.attr("d", d => wenz_bezier(...d, [0, width, 0, height])); sv_path.attr("d", d => sv_bezier(...d, [0, width, 0, height])); sly_path.attr("d", d => sly_bezier(...d, [0, width, 0, height])); sly_trig_path.attr("d", d => sly_trig_bezier(...d, [0, width, 0, height])); apollo_path.attr("d", d => apollo_bezier(...d, [0, width, 0, height])); apollo_cubic_path.attr("d", d => apollo_cubic_bezier(...d, [0, width, 0, height])); } update(); // Listen for input events on the view until the cell is disposed. viewof curve_points.addEventListener("input", update); return Generators.disposable(svg.node(), () => { viewof curve_points.removeEventListener("input", update); }); }2e:T58e,Introduction = md` ## Introduction If we want to draw a smooth curve matching some desired shape or passing through specified points, there are many ways we might approach this geometric modeling problem, and [several criteria to trade off][levien phd] against each-other: we want the controls to be flexible but easy for a human to learn to predict, we want the resulting shape to be smooth, we want the computation to be fast, et cetera. The most common tools currently used in vector graphics are straight line segments and cubic Bézier curves. These are both based on the idea of linear interpolation; cubic Bézier curves just [apply linear interpolation 3 times][bezier]. The next simplest shape after the line is the circle. So several attempts have been made to make curve design tools based on circular arcs. By analogy to a [cubic Hermite spline][herm], imagine we are given two endpoints along with the tangent direction at each endpoint, with a goal of producing a curve which follows an arc between the two points which matches the first tangent direction near the initial point, then smoothly transitions to following a second arc matching the second tangent direction near the final point. How might we approach constructing such a curve? [levien phd]: http://www.levien.com/phd/phd.html [bezier]: /@mbostock/de-casteljaus-algorithm [herm]: https://en.wikipedia.org/wiki/Cubic_Hermite_spline `2f:T97b,md` 1. Move along each arc uniformly by arclength and then blend between the output coordinates of the two paths. (a) The simplest method is to just use linear interpolation to blend. This is not especially smooth for adjacent segments.

Hans-Jörg Wenz (1996). [“Interpolation of curve data by blended generalized circles.”][wenz] *Computer Aided Geometric Design*, 13(8): 673-680.

(b) A bit smoother is to blend between the two based on some other “blending function”, for example a sinusoid. Then the curve will “hug” the defining circular arcs for longer.

Márta Szilvási-Nagy and Teréz P. Vendel (2000). [“Generating curves and swept surfaces by blended circles.”][sv] *Computer Aided Geometric Design*, 17(2): 197-206.

Both of those get a bit ugly when one of the arcs is relatively larger than the other, because the large arc contributes much more to the output. So as an alternative it is possible to... 2. Find a coordinate system in which circular arcs between the endpoints form one of the coordinates, and then interpolate in that new coordinate system. (a) We can take all circular arcs between the two endpoints as one coordinate (with the choice of arc parametrized by angle measure at the endpoints), and the proportion of arclength as the other coordinate.

Carlo Séquin, Kiha Lee, and Jane Yen (2005). [“Fair, G²- and C²-continuous circle splines for the interpolation of sparse data points.”][sly] *Computer-Aided Design*, 37(2): 201-211.

(b) [*This is my proposal in this notebook.*] We can use a coordinate system based on Apollonian circles, two mutually-orthogonal families of circles. Alternately we can think of mapping the endpoints to opposite poles on a sphere, and then interpolating in latitude/longitude or some other sphere-based coordinate system. [wenz]: https://doi.org/10.1016/0167-8396(95)00054-2 [sv]: https://doi.org/10.1016/S0167-8396(99)00045-X [sly]: https://doi.org/10.1016/j.cad.2004.06.009 `30:T659,Complex_Points = md` ## Representing Euclidean points with complex numbers For convenience, given a specified start point ${html``} ${$`p_0`} and end point ${html``} ${$`p_1`}, we can represent other points ${$`p`} in the plane using complex numbers. A complex number ${$`w`} will represent a similarity transformation (rotation & scaling) to apply to the vector displacement from the start point to the end point. Or using mathematical notation, for every complex number ${$`w \in \mathbb{C}`}, there is a corresponding Euclidean point: ${$$`p_w = p_0 + w(p_1 - p_0)`} Equivalently, for any point ${html``} ${$`p_w`}, we can find the corresponding complex number ${$`w`} representing a [ratio of displacement vectors][gvision]: [gvision]: http://geocalc.clas.asu.edu/pdf/GrassmannsVision.pdf ${$$`w = (p_w - p_0)/(p_1 - p_0)`} Notice that the complex number ${$`0`} represents the point ${$`p_0`}, and the complex number ${$`1`} represents the point ${$`p_1`}. If we like, we can also give names to the displacement vectors: ${$$`\begin{aligned} v_1 &= p_1 - p_0 \\ v_w &= p_w - p_0 = wv_1 \end{aligned} `} Graphically, we can think of drawing a square grid with the origin at ${$`p_0`} and displacements ${$`v_1`} and ${$`iv_1`} as the grid pitch. Then the coordinates of ${$`p_w`} in terms of this grid are the real and imaginary components of ${$`w`}. `31:Tb16,{ const plotwidth = Math.min(645, width) const aspect = 1/2; const plotheight = plotwidth*aspect const screen = [plotwidth, plotheight]; const svg = d3.select(DOM.svg(...screen)); const points = [[plotwidth/5, plotheight*4/5], [plotwidth*.28, plotheight*5/6], [plotwidth*2/3, plotheight/5]]; const [p0, p1, pw] = points; const grid = svg.append('g').attr('stroke-width', 1.2).attr('stroke', '#d8eaff'); const horiz_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => d-100)) .enter().append('path') const vert_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => d-100)) .enter().append('path') const arrows = svg.append("g").selectAll("path") .data([ {start: p0, end: p1, strokewidth: 3, endarrow: cute_examples.basic, fill: '#058'}, {start: p0, end: pw, strokewidth: 3, endarrow: cute_examples.basic, fill: '#f24'}, ]) .enter().append("path") .attr("fill", d => d.fill) const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(points) .enter().append("circle") .attr("r", 5) .attr("fill", (d, i) => ['#333', '#07f', '#c04'][i]) .attr("fill-opacity", 0.3) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function dragged(d) { d[0] = clamp(d3.event.x, 0, screen[0]); d[1] = clamp(d3.event.y, 0, screen[1]); update(); } function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } const text = html`

` function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); arrows.attr("d", d => arrow_path(d)); const v1 = csub(p1, p0); vert_grid.attr('d', d => { const start = cadd(p0, cmul([d,-100], v1)) const end = cadd(p0, cmul([d,+100], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); horiz_grid.attr('d', d => { const start = cadd(p0, cmul([-100,d], v1)) const end = cadd(p0, cmul([+100,d], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); const w = cdiv(csub(pw, p0), v1); text.innerHTML = ''; text.appendChild($` \begin{aligned} w &= ${w[0] >= 0 ? '+' : ''} ${w[0].toFixed(2)} ${-w[1] >= 0 ? '+' : ''} ${(-w[1]).toFixed(2)}i \\ &= ${cabs(w).toFixed(2)} \, \measuredangle \, ${mod(-phase(w) * 180/Math.PI, 360).toFixed(1)}^{\circ} \end{aligned}`) } update(); return html`

${svg.node()}${text}

` }32:T106f,{ const plotwidth = Math.min(645, width) const aspect = 1/2; const plotheight = plotwidth*aspect const screen = [plotwidth, plotheight]; const svg = d3.select(DOM.svg(...screen)); const p0 = [plotwidth*0.1, plotheight*3/5], p1 = [plotwidth*0.45, plotheight*5/6], pw = []; // this is just a made up curve, with no particular relation to the rest of the notebook. const xcoeffs = [0.54, 0.534, -0.02, 0.266, -0.02, -0.3]; const ycoeffs = [0.44, 0.0849, -0.2, -0.0849, -0.24]; const curvefunc = (t) => cadd(p0, cmul([chebeval(xcoeffs, t*2-1), -chebeval(ycoeffs, t*2-1)], csub(p1, p0))); const grid = svg.append('g').attr('stroke-width', 1.2); const horiz_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => (d-100)/10)) .enter().append('path') .attr('stroke', (d,i) => i % 10 ? '#eaf6ff' : '#d8eaff'); const vert_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => (d-100)/10)) .enter().append('path') .attr('stroke', (d,i) => i % 10 ? '#eaf6ff' : '#d8eaff'); const curve = svg.append('path') .attr('stroke', '#ffaacc') .attr('fill', 'none') .attr('stroke-width', 3) const arrows = svg.append("g").selectAll("path") .data([ {start: p0, end: p1, strokewidth: 3, endarrow: cute_examples.basic, fill: '#058'}, {start: p0, end: pw, strokewidth: 3, endarrow: cute_examples.basic, fill: '#f24'}, ]) .enter().append("path") .attr("fill", d => d.fill) const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p0, p1]) .enter().append("circle") .attr("r", 5) .attr("fill", (d, i) => ['#333', '#07f'][i]) .attr("fill-opacity", 0.3) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point2 = svg.append("g").selectAll("circle") .data([pw]) .enter().append("circle") .attr("r", 5).attr("fill", '#c04').attr("fill-opacity", 0.3); function dragged(d) { d[0] = clamp(d3.event.x, 0, screen[0]); d[1] = clamp(d3.event.y, 0, screen[1]); update(); } function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } const text = html`

` function update() { updatetick(); point.attr("cx", d => d[0]).attr("cy", d => d[1]); point2.attr("cx", d => d[0]).attr("cy", d => d[1]); const v1 = csub(p1, p0); vert_grid.attr('d', d => { const start = cadd(p0, cmul([d,-10], v1)) const end = cadd(p0, cmul([d,+10], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); horiz_grid.attr('d', d => { const start = cadd(p0, cmul([-10,d], v1)) const end = cadd(p0, cmul([+10,d], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); const pathstring = bezpts_to_svgpath( bezeval(curvefunc, [0, 1], [0, plotwidth, 0, plotheight], .1), 5) curve.attr('d', pathstring) } function updatetick() { // call when `time` changes; doesn’t need to update most of the picture. const t = +(viewof time.value); const tstring = t.toFixed(2); pw.splice(0, 2, ...curvefunc(t)) arrows.attr("d", d => arrow_path(d)); const w = cdiv(csub(pw, p0), csub(p1, p0)); text.innerHTML = ''; text.appendChild($` w(${tstring}) \\[.2em] \begin{aligned} \quad &= ${w[0] >= 0 ? '+' : ''} ${w[0].toFixed(2)} ${-w[1] >= 0 ? '+' : ''} ${(-w[1]).toFixed(2)}i \\ &= ${cabs(w).toFixed(2)} \, \measuredangle \, ${mod(-phase(w) * 180/Math.PI, 360).toFixed(1)}^{\circ} \end{aligned}`); } update(); const element = html`

${svg.node()}${text}

` viewof time.addEventListener("input", update); return Generators.disposable(element, () => { viewof time.removeEventListener("input", update); }); }33:Tefe,{ const plotwidth = Math.min(645, width) const aspect = 1/2; const plotheight = plotwidth*aspect const screen = [plotwidth, plotheight]; const svg = d3.select(DOM.svg(...screen)); const p0 = [plotwidth*0.1, plotheight*.7], p1 = [plotwidth*.7, plotheight*.3], pw = []; const xcoeffs = [.5, .5]; const ycoeffs = [0]; const curvefunc = (t) => cadd(p0, cmul([chebeval(xcoeffs, t*2-1), -chebeval(ycoeffs, t*2-1)], csub(p1, p0))); const grid = svg.append('g').attr('stroke-width', 1.2); const horiz_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => (d-100)/10)) .enter().append('path') .attr('stroke', (d,i) => i % 10 ? '#eaf6ff' : '#d8eaff'); const vert_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => (d-100)/10)) .enter().append('path') .attr('stroke', (d,i) => i % 10 ? '#eaf6ff' : '#d8eaff'); const curve = svg.append('path') .attr('stroke', '#ffaacc') .attr('fill', 'none') .attr('stroke-width', 3) const arrows = svg.append("g").selectAll("path") .data([ {start: p0, end: pw, strokewidth: 3, endarrow: cute_examples.basic, fill: '#f24'} ]) .enter().append("path") .attr("fill", d => d.fill); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p0, p1]) .enter().append("circle") .attr("r", 5) .attr("fill", (d, i) => ['#333', '#07f'][i]) .attr("fill-opacity", 0.3) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point2 = svg.append("g").selectAll("circle") .data([pw]) .enter().append("circle") .attr("r", 5).attr("fill", '#c04').attr("fill-opacity", 0.3); function dragged(d) { d[0] = clamp(d3.event.x, 0, screen[0]); d[1] = clamp(d3.event.y, 0, screen[1]); update(); } function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } const text = html`

` function update() { updatetick(); point.attr("cx", d => d[0]).attr("cy", d => d[1]); const v1 = csub(p1, p0); vert_grid.attr('d', d => { const start = cadd(p0, cmul([d,-10], v1)) const end = cadd(p0, cmul([d,+10], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); horiz_grid.attr('d', d => { const start = cadd(p0, cmul([-10,d], v1)) const end = cadd(p0, cmul([+10,d], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); const pathstring = bezpts_to_svgpath( bezeval(curvefunc, [0, 1], [0, plotwidth, 0, plotheight], .1), 5) curve.attr('d', pathstring) } function updatetick() { // call when `time` changes; doesn’t need to update most of the picture. const t = +(viewof time.value); pw.splice(0, 2, ...curvefunc(t)); point2.attr("cx", d => d[0]).attr("cy", d => d[1]); arrows.attr("d", d => arrow_path(d)); const w = cdiv(csub(pw, p0), csub(p1, p0)); text.innerHTML = ''; text.appendChild($` w(${t.toFixed(2)}) \\[.2em] \begin{aligned} \quad &= ${w[0] >= 0 ? '+' : ''} ${w[0].toFixed(2)} + 0i \\ &= ${cabs(w).toFixed(2)} \, \measuredangle \, 0^{\circ} \end{aligned}`); } update(); const element = html`

${svg.node()}${text}

` viewof time.addEventListener("input", update); return Generators.disposable(element, () => { viewof time.removeEventListener("input", update); }); }34:T48f,Arcs_By_Arclength = md` ## Parametrizing circular arcs by arclength Now imagine we want to parametrize a circular arc between our endpoints defined by a given external angle of measure ${$`\alpha`}, and we want to move at a uniform speed along the arc using a parameter ${$`t \in [0,1]`}. Again, we will use a complex-number representative for each point. Séquin, Lee, and Yen (2005) express this map in the form: ${$$` w_{\mathrm{arc}}(\alpha, t) = \dfrac{\sin\left(\alpha t\right)}{\sin\alpha} \exp\left(-i\alpha(1-t)\right) `} This is based on drawing a triangle in the complex plane between ${$`0`}, ${$`w_{\mathrm{arc}}(t)`}, and ${$`1`}. We split ${$`w_{\mathrm{arc}}(t)`} into the product ${$`w_{\mathrm{arc}}(t) = r_w\exp(i\varphi_w)`} of a magnitude (length) and a phase (angle). We find the magnitude ratio ${$`r_w/1`} by the [law of sines][]; and we know that for an arclength-uniform parametrization the phase (expressed as an angle measure ${$`\varphi_w`}) will vary linearly from ${$`-\alpha`} to ${$`0`} as ${$`t`} goes from ${$`0`} to ${$`1`}: ${$`\varphi_w = -\alpha(1-t)`}. [law of sines]: https://en.wikipedia.org/wiki/Law_of_sines `35:T142e,{ const plotwidth = Math.min(645, width) const aspect = 2/3; const plotheight = plotwidth*aspect const screen = [plotwidth, plotheight]; const svg = d3.select(DOM.svg(...screen)); const p0 = [plotwidth*0.1, plotheight*.6], p1 = [plotwidth*0.5, plotheight*.9], pw = [], pww = []; const angle = 1.85; const curvefunc = (t) => cadd(p0, cmul(arclen_coords(angle, t), csub(p1, p0))); const const_t_func = (a) => cadd(p0, cmul(arclen_coords(a, viewof time.value), csub(p1, p0))); const grid = svg.append('g').attr('stroke-width', 1.2); const horiz_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => (d-100)/10)) .enter().append('path') .attr('stroke', (d,i) => i % 10 ? '#eaf6ff' : '#d8eaff'); const vert_grid = grid.append('g').selectAll('path') .data([...Array(200+1).keys()].map(d => (d-100)/10)) .enter().append('path') .attr('stroke', (d,i) => i % 10 ? '#eaf6ff' : '#d8eaff'); const curve = svg.append('path') .attr('stroke', '#ffaacc') .attr('fill', 'none') .attr('stroke-width', 2.5) const const_t_curve = svg.append('path') .attr('stroke', '#ffe8f3') .attr('fill', 'none') .attr('stroke-width', 2) const arrows = svg.append("g").selectAll("path") .data([ {start: p0, end: p1, strokewidth: 2.5, endarrow: cute_examples.basic, fill: '#058'}, {start: pw, end: p1, strokewidth: 2.5, endarrow: cute_examples.basic, fill: '#097'}, {start: p0, end: pw, strokewidth: 2.5, endarrow: cute_examples.basic, fill: '#f24'}, {start: pw, end: pww, strokewidth: 2.5, endarrow: cute_examples.basic, fill: '#f24'} ]) .enter().append("path") .attr("fill", d => d.fill) const drag_curve = svg.append("path") .attr("cursor", "move") .attr("pointer-events", "stroke") .attr("stroke", "transparent") .attr("stroke-width", 20) .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged_curve)); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p0, p1]) .enter().append("circle") .attr("r", 5) .attr("fill", (d, i) => ['#333', '#07f'][i]) .attr("fill-opacity", 0.3) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point2 = svg.append("g").selectAll("circle") .data([pw]) .enter().append("circle") .attr("r", 5).attr("fill", '#c04').attr("fill-opacity", 0.3); function dragged(d) { d[0] = clamp(d3.event.x, 0, screen[0]); d[1] = clamp(d3.event.y, 0, screen[1]); update(); } function dragged_curve(d) { d[0] = clamp(d3.event.x, 0, screen[0]); d[1] = clamp(d3.event.y, 0, screen[1]); update(); } function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } const text = html`

` function update() { updatetick(); point.attr("cx", d => d[0]).attr("cy", d => d[1]); const v1 = csub(p1, p0); vert_grid.attr('d', d => { const start = cadd(p0, cmul([d,-10], v1)) const end = cadd(p0, cmul([d,+10], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); horiz_grid.attr('d', d => { const start = cadd(p0, cmul([-10,d], v1)) const end = cadd(p0, cmul([+10,d], v1)) return `M${start[0]},${start[1]}L${end[0]},${end[1]}` }); const curve_path = bezpts_to_svgpath( bezeval(curvefunc, [0, 1], [0, plotwidth, 0, plotheight], .01), 5); curve.attr('d', curve_path); drag_curve.attr('d', curve_path); } function updatetick() { // call when `time` changes; doesn’t need to update most of the picture. const t = +(viewof time.value); pw.splice(0, 2, ...curvefunc(t)) pww.splice(0, 2, ...cadd(pw, csub(pw, p0))); point2.attr("cx", d => d[0]).attr("cy", d => d[1]); arrows.attr("d", d => arrow_path(d)); const const_t_path = bezpts_to_svgpath( bezeval(const_t_func, [-Math.PI+1e-3, Math.PI-1e-3], [0, plotwidth, 0, plotheight], .01), 5); const_t_curve.attr('d', const_t_path); const w = cdiv(csub(pw, p0), csub(p1, p0)); text.innerHTML = ''; text.appendChild($` w_\mathrm{arc}(${(-angle * 180/Math.PI).toFixed(1)}^{\circ}, ${t.toFixed(2)}) \\[.2em] \begin{aligned} \quad &= ${w[0] >= 0 ? '+' : ''} ${w[0].toFixed(2)} ${-w[1] >= 0 ? '+' : ''} ${(-w[1]).toFixed(2)}i \\ &= ${cabs(w).toFixed(2)} \, \measuredangle \, ${(-phase(w) * 180/Math.PI).toFixed(1)}^{\circ} \end{aligned}`) } update(); const element = html`

${svg.node()}${text}

` viewof time.addEventListener("input", update); return Generators.disposable(element, () => { viewof time.removeEventListener("input", update); }); } 36:T58a,{ return md` If we want a more compact expression, we can manipulate it a bit: ${$$` \begin{aligned} w_{\mathrm{arc}}(\alpha, t) &= \dfrac{\sin(\alpha t)}{\sin\alpha} \exp(-i\alpha(1-t)) \\[1em] &= \left(\dfrac{\exp(i\alpha t) - \exp(-i\alpha t)}{\exp(i\alpha) - \exp(-i\alpha)}\right) \dfrac{\exp(i\alpha t)}{\exp(i\alpha)} \\[1em] &= \dfrac{\exp(2i\alpha t) - 1}{\exp(2i\alpha) - 1} \end{aligned} `} or if we let ${$`\hat{z} = \exp(i\alpha)`}, we can write: ${$$` w_{\mathrm{arc}}^\star(\hat{z}, t) = \dfrac{\hat{z}^{2t} - 1}{\hat{z}^2 - 1} `} We can explain this equation by looking at the unit-radius circle and marking off the arc between ${$`1 = \exp(0)`} and ${$`\hat{z}^2 = \exp(2i\alpha)`}. This arc is [similar][] to our desired arc between ${$`0`} and ${$`1`}, so all we have to do is parametize that arc uniformly with respect to arclength and then reflect, scale, rotate, and translate it to have the desired endpoints. [similar]: https://en.wikipedia.org/wiki/Similarity_(geometry) `; const _ = 0; _ - _ - _ - _ - _ - _ - _ - _ - _ - _ - _ - _ - _ - _ - _ - _; md`We can also equivalently write this as: ${$$` w_{\mathrm{arc}}(t) = \dfrac{\tan(\alpha t)}{\tan(\alpha)} \left( \dfrac{1 - i\tan(\alpha)}{1 - i\tan(\alpha t)} \right) `} ?? todo: check the above, figure out if this is actually the start of a good method, or if there is a better expression.` }37:T97b,{ const plotwidth = Math.min(645, width) const aspect = 2/3; const screen = [plotwidth,plotwidth*aspect]; const bounds = [-1, 2, -1, 1]; const svg = d3.select(DOM.svg(...screen)); const scalew = screen[0]/(bounds[1]-bounds[0]); const scaleh = screen[1]/(bounds[3]-bounds[2]); const trans = `${-bounds[0]},${-bounds[2]}` const transform = `scale(${scalew},${scaleh}) translate(${trans}) scale(1 -1)`; const linewidth = '0.004'; const gridcolor = '#ccc'; const finegridcolor = '#eee'; const t_contour = t => bezpts_to_svgpath(bezeval( a => arclen_coords(a, t), [-Math.PI+1e-10, Math.PI-1e-10], bounds, 0.001)); const a_contour = a => bezpts_to_svgpath(bezeval( t => arclen_coords(a, t), [0, 1], [-5, 5, -3, 3], 0.001)); const nt = 0x40; const t_contours = svg.append('g') .attr('stroke', finegridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(nt+1).keys()].map(d => d/nt).filter((d,i) => (i % 4))) .enter().append('path') .attr('d', t_contour); const na = 0x20 * 3; const a_contours = svg.append('g') .attr('stroke', finegridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(na+1).keys()] .map(d => (d/na - 0.5)*2*Math.PI) .filter((d,i) => i % 4)) .enter().append('path') .attr('d', a_contour); const red_midline = svg.append('g') .attr('stroke', '#faa').attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .append('path') .attr('d', `M${bounds[0]},0L0,0M1,0L${bounds[1]},0`); const nt2 = nt/4; const t_contours2 = svg.append('g') .attr('stroke', gridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(nt2+1).keys()].map(d => d/nt2)) .enter().append('path') .attr('d', t_contour); const na2 = na/4; const a_contours2 = svg.append('g') .attr('stroke', gridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(na2+1).keys()].map(d => (d/na2 - 0.5)*2*Math.PI).slice(1,-1)) .enter().append('path') .attr('d', a_contour); return svg.node(); }38:T5d9,Apollonian_Circles = md` ## Parametrizing circular arcs using Apollonian circles If we don’t need to parametrize by arclength along every arc, I believe it is more sensible to use a parametrization based on [Apollonian circles]. [Apollonian circles]: https://en.wikipedia.org/wiki/Apollonian_circles Given any point ${$`p_w`} in the plane, the complex-number ratio ${$`(p_1 - p_w)/(p_w - p_0) = (1 - w)/w = z`} specifies a pair of circles passing through ${$`p_w`}, called Apollonian circles, defined as the the locus of points in the plane whose analogous ratios have the same magnitude ${$`|z| = (z\bar{z})^{1/2}`} or phase ${$`\hat{z} = z/|z|`}, respectively. By varying the magnitude of this ratio from ${$`\infty`} to ${$`0`} while keeping phase constant, we can describe all of the points along a circular arc between our endpoints. If we want a curve based on a parameter ${$`t \in [0,1]`}, we can use ${$`|z| = (1-t)/t`} as the magnitude of our ratio; this maps ${$`0 \mapsto \infty`} and ${$`1 \mapsto 0`}. For a specified external angle of measure ${$`\alpha`} we get: ${$$` \dfrac{1 - w}{w} = z = |z|\hat{z} = \dfrac{1 - t}{t}\exp(i\alpha) `} That is, a parametrization: ${$$` w(\alpha, t) = \dfrac{t}{t + \exp(i\alpha)\left(1 - t\right)} `} Or with ${$`\hat{z} = \exp(i\alpha)`}: ${$$` w^\star(\hat{z}, t) = \dfrac{t}{t + \hat{z}\left(1 - t\right)} `} When ${$`\alpha = 0`}, then ${$`\hat{z} = 1`}, and this reduces to linear interpolation from ${$`0`} to ${$`1`}. `39:T88a,{ const plotwidth = Math.min(645, width) const aspect = 2/3; const screen = [plotwidth,plotwidth*aspect]; const bounds = [-1, 2, -1, 1]; const svg = d3.select(DOM.svg(...screen)); const scalew = screen[0]/(bounds[1]-bounds[0]); const scaleh = screen[1]/(bounds[3]-bounds[2]); const trans = `${-bounds[0]},${-bounds[2]}` const transform = `scale(${scalew},${scaleh}) translate(${trans}) scale(1 -1)`; const linewidth = '0.004'; const gridcolor = '#ccc'; const finegridcolor = '#eee'; const t_contour = t => bezpts_to_svgpath(bezeval( a => apollo_coords(a, t), [-Math.PI+1e-10, Math.PI-1e-10], bounds, 0.001)); const a_contour = a => bezpts_to_svgpath(bezeval( t => apollo_coords(a, t), [0, 1], [-5, 5, -3, 3], 0.001)); const nt = 0x40; const t_contours = svg.append('g') .attr('stroke', finegridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(nt+1).keys()].map(d => d/nt).filter((d,i) => (i % 4))) .enter().append('path') .attr('d', t_contour); const na = 0x20 * 3; const a_contours = svg.append('g') .attr('stroke', finegridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(na+1).keys()] .map(d => (d/na - 0.5)*2*Math.PI) .filter((d,i) => (i % 4))) .enter().append('path') .attr('d', a_contour); const nt2 = nt/4; const t_contours2 = svg.append('g') .attr('stroke', gridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(nt2+1).keys()].map(d => d/nt2)) .enter().append('path') .attr('d', t_contour); const na2 = na/4; const a_contours2 = svg.append('g') .attr('stroke', gridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(na2+1).keys()].map(d => (d/na2 - 0.5)*2*Math.PI).slice(1)) .enter().append('path') .attr('d', a_contour); return svg.node(); }3a:Tb39,{ const plotwidth = Math.min(645, width) const aspect = 2/3; const screen = [plotwidth,plotwidth*aspect]; const bounds = [-1, 2, -1, 1]; const svg = d3.select(DOM.svg(...screen)); const scalew = screen[0]/(bounds[1]-bounds[0]); const scaleh = screen[1]/(bounds[3]-bounds[2]); const trans = `${-bounds[0]},${-bounds[2]}` const transform = `scale(${scalew},${scaleh}) translate(${trans}) scale(1 -1)`; const map = svg.append("g").attr("transform", transform).attr('stroke', 'none'); // pale blue background map.append("path").attr("fill", "#f7fcff") .attr("d", "M-1,-1L-1,1L2,1L2,-1Z"); const projection = d3.geoProjection(function(a, b) { b = 0.5*(b) - 0.75*Math.PI; return cdiv( [Math.sin(b), 0], cadd(cmul([Math.cos(b), 0], cexp([0, -a])), [Math.sin(b), 0])); }).center([0,-90]).translate([0,0]).scale([1]) map.append("path").attr("fill", "#e4f8d6") .attr("stroke", "#c8f0c0").attr("stroke-width", 0.003) .attr("d", d3.geoPath(projection)(land)); const linewidth = '0.004'; const gridcolor = '#ccc'; const finegridcolor = '#ccc'; const t_contour = t => bezpts_to_svgpath(bezeval( a => latlong_coords(a, t), [-Math.PI+1e-10, Math.PI-1e-10], bounds, 0.001)); const a_contour = a => bezpts_to_svgpath(bezeval( t => latlong_coords(a, t), [0, 1], [-5, 5, -3, 3], 0.001)); const nt = 0x40; const t_contours = svg.append('g') .attr('stroke', finegridcolor).attr('stroke-width', linewidth) .attr('stroke-opacity', 0.3) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(nt+1).keys()].map(d => d/nt).filter((d,i) => (i % 4))) .enter().append('path') .attr('d', t_contour); const na = 0x20 * 3; const a_contours = svg.append('g') .attr('stroke', finegridcolor).attr('stroke-width', linewidth) .attr('stroke-opacity', 0.3) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(na+1).keys()] .map(d => (d/na - 0.5)*2*Math.PI) .filter((d,i) => (i % 4))) .enter().append('path') .attr('d', a_contour); const nt2 = nt/4; const t_contours2 = svg.append('g') .attr('stroke', gridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(nt2+1).keys()].map(d => d/nt2)) .enter().append('path') .attr('d', t_contour); const na2 = na/4; const a_contours2 = svg.append('g') .attr('stroke', gridcolor).attr('stroke-width', linewidth) .attr('fill', 'none').attr("transform", transform) .selectAll('path') .data([...Array(na2+1).keys()].map(d => (d/na2 - 0.5)*2*Math.PI).slice(1)) .enter().append('path') .attr('d', a_contour); return svg.node(); }3b:T443,Bipolar_Coordinates = md` ### Aside: Bipolar coordinates The traditional [“bipolar coordinate system”][bipolar] uses a logarithmic scale for expressing the magnitude ${$`|z|`}. This corresponds to taking coordinates relative to a Mercator map projection of our map pictured above. Something along the lines of: ${$$` \dfrac{1 - w}{w} = \exp(\tau + i\alpha) `} This has the advantage that it is a [conformal][] transformation in terms of both coordinates treated as a single complex number ${$`\log(z) = \tau + i\alpha`}. But it is unsuitable for our purposes because straight lines in terms of the two coordinates ${$`\alpha`} and ${$`\tau`} correspond to spirals which loop around ${$`0`} and ${$`1`} infinitely many times. (cf. [loxodrome][], [logarithmic spiral][]... or try to find the North Pole on a Mercator-projected map.) [bipolar]: https://en.wikipedia.org/wiki/Bipolar_coordinates [conformal]: https://en.wikipedia.org/wiki/Conformal_map [loxodrome]: https://en.wikipedia.org/wiki/Rhumb_line [logarithmic spiral]: https://en.wikipedia.org/wiki/Logarithmic_spiral `3c:T4f3,Blending_Arcs = md` ## Blending circular arcs If we want to make a smooth curve between a given pair of endpoints, and we would like the curve to follow the path, near each endpoint, of a circular arc with a given tangent direction, we can construct such a curve by blending between the two arcs. As a blending method, Wenz (1996) proposed simply linearly interpolating in output coordinates. We can see how this works by marking off uniformly spaced tick marks along each arc, connecting the corresponding tick marks on each arc by a straight line segment, then marking off uniformly spaced tick marks along each of those line segments, and connecting the dots. (Try playing with the diagram below by dragging the black points.) As a mathematical expression, we can write this something like: ${$$` w_\mathrm{wenz}(t) = w_\mathrm{arc}(\alpha_0, t)(1-t) + w_\mathrm{arc}(\alpha_1, t)t `} In terms of the coordinate system of our grid, the Wenz curve moves diagonally from corner to corner. ` // For the last (or first) segment, there is only one circle so defined, so // possible approaches include just using this circle as-is, blending between // this circle and a straight line, not drawing the final segment, or looping // back and forming a closed curve. 3d:T1134,{ const ngrid = 16; const plotwidth = 480; const plotheight = 430; const [p1, p2, p3, p4] = viewof curve_points_smaller.value; const svg = d3.select(DOM.svg(plotwidth, plotheight)); const wenz_coords = function(b, t) { const [a0, a1] = angles(p1, p2, p3, p4); const q0 = arclen_coords(a0, t); const q1 = arclen_coords(a1, t); const q = cadd(cmul(q0, [1-b,0]), cmul(q1, [b,0])); return cadd(p2, cmul(csub(p3, p2), q)); } const wenz_b = function(b) { return bezpts_to_svgpath(bezeval( (t) => wenz_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const wenz_t = function(t) { return bezpts_to_svgpath(bezeval( (b) => wenz_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const wenz_grid_b = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const wenz_grid_t = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const circles = svg.append("g").selectAll("path") .data([[p1, p2, p3], [p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", '#d5d5d5') .attr("fill", "none"); const wenz_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[1]) .attr("fill", "none"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p1, p2, p3, p4]) .enter().append("circle") .attr("r", 4) .attr("fill", colors.black) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } function dragged(d) { d[0] = clamp(d3.event.x, 0, plotwidth); d[1] = clamp(d3.event.y, 0, plotheight); viewof curve_points_smaller.value = viewof curve_points_smaller.value; // Dispatches an input event! } function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); circles.attr("d", ([a, p, b]) => { const [rad, larc_flag, sweep_flag] = arcviapoint(a, b, p); return `M${a[0]},${a[1]} A${rad},${rad},0,${larc_flag},${sweep_flag},${b[0]},${b[1]}`; }); wenz_path.attr("d", d => wenz_bezier(...d, [0, plotwidth, 0, plotheight])); wenz_grid_b.attr('d', wenz_b); wenz_grid_t.attr('d', wenz_t); } update(); const cartwidth = 300, cartheight = 300; const cartbounds = [0, cartwidth, 0, cartheight]; const cartsvg = d3.select(DOM.svg(cartwidth, cartheight)); const cart_coords = (b, t) => [t*cartwidth, (1-b)*cartheight]; const cart_b = b => bezpts_to_svgpath(bezeval( (t) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const cart_t = t => bezpts_to_svgpath(bezeval( (b) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const lerp_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(t,t), [0, 1], cartbounds, 0.01)); const grid_b = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_b); const grid_cart_t = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_t); const cart_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[1]) .attr("d", lerp_bezier()); // Listen for input events on the view until the cell is disposed. viewof curve_points_smaller.addEventListener("input", update); return Generators.disposable(html`${svg.node()}${cartsvg.node()}`, () => { viewof curve_points_smaller.removeEventListener("input", update); }); }3e:T1393,{ const ngrid = 16; const plotwidth = 480; const plotheight = 430; const [p1, p2, p3, p4] = viewof curve_points_smaller.value; const svg = d3.select(DOM.svg(plotwidth, plotheight)); const wenz_coords = function(b, t) { const [a0, a1] = angles(p1, p2, p3, p4); const q0 = arclen_coords(a0, t); const q1 = arclen_coords(a1, t); const q = cadd(cmul(q0, [1-b,0]), cmul(q1, [b,0])); return cadd(p2, cmul(csub(p3, p2), q)); } const wenz_b = function(b) { return bezpts_to_svgpath(bezeval( (t) => wenz_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const wenz_t = function(t) { return bezpts_to_svgpath(bezeval( (b) => wenz_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const wenz_grid_b = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const wenz_grid_t = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const circles = svg.append("g").selectAll("path") .data([[p1, p2, p3], [p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", '#d5d5d5') .attr("fill", "none"); const wenz_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[1]) .attr("fill", "none"); const sv_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[0]) .attr("fill", "none"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p1, p2, p3, p4]) .enter().append("circle") .attr("r", 4) .attr("fill", colors.black) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } function dragged(d) { d[0] = clamp(d3.event.x, 0, plotwidth); d[1] = clamp(d3.event.y, 0, plotheight); viewof curve_points_smaller.value = viewof curve_points_smaller.value; // Dispatches an input event! } function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); circles.attr("d", ([a, p, b]) => { const [rad, larc_flag, sweep_flag] = arcviapoint(a, b, p); return `M${a[0]},${a[1]} A${rad},${rad},0,${larc_flag},${sweep_flag},${b[0]},${b[1]}`; }); wenz_path.attr("d", d => wenz_bezier(...d, [0, plotwidth, 0, plotheight])); sv_path.attr("d", d => sv_bezier(...d, [0, plotwidth, 0, plotheight])); wenz_grid_b.attr('d', wenz_b); wenz_grid_t.attr('d', wenz_t); } update(); const cartwidth = 300, cartheight = 300; const cartbounds = [0, cartwidth, 0, cartheight]; const cartsvg = d3.select(DOM.svg(cartwidth, cartheight)); const cart_coords = (t, b) => [t*cartwidth, (1-b)*cartheight]; const cart_b = b => bezpts_to_svgpath(bezeval( (t) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const cart_t = t => bezpts_to_svgpath(bezeval( (b) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const lerp_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(t,t), [0, 1], cartbounds, 0.01)); const trig_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(...blending.trig(t)), [0, 1], cartbounds, 0.01)); const grid_b = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_b); const grid_cart_t = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_t); const cart_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[1]) .attr("d", lerp_bezier()); const cart_trig_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[0]) .attr("d", trig_bezier()); // Listen for input events on the view until the cell is disposed. viewof curve_points_smaller.addEventListener("input", update); return Generators.disposable(html`${svg.node()}${cartsvg.node()}`, () => { viewof curve_points_smaller.removeEventListener("input", update); }); } 3f:T135a,{ const ngrid = 16; const plotwidth = 480; const plotheight = 430; const [p1, p2, p3, p4] = viewof curve_points_smaller.value; const svg = d3.select(DOM.svg(plotwidth, plotheight)); const sly_coords = function(b, t) { const [a0, a1] = angles(p1, p2, p3, p4); const a = a0 * (1-b) + a1 * b; const q = arclen_coords(a, t) return cadd(p2, cmul(csub(p3, p2), q)); } const sly_b = function(b) { return bezpts_to_svgpath(bezeval( (t) => sly_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const sly_t = function(t) { return bezpts_to_svgpath(bezeval( (b) => sly_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const sly_grid_b = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const sly_grid_t = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const circles = svg.append("g").selectAll("path") .data([[p1, p2, p3], [p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", '#d5d5d5') .attr("fill", "none"); const sly_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[5]) .attr("fill", "none"); const sly_trig_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[4]) .attr("fill", "none"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p1, p2, p3, p4]) .enter().append("circle") .attr("r", 4) .attr("fill", colors.black) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } function dragged(d) { d[0] = clamp(d3.event.x, 0, plotwidth); d[1] = clamp(d3.event.y, 0, plotheight); viewof curve_points_smaller.value = viewof curve_points_smaller.value; // Dispatches an input event! } function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); circles.attr("d", ([a, p, b]) => { const [rad, larc_flag, sweep_flag] = arcviapoint(a, b, p); return `M${a[0]},${a[1]} A${rad},${rad},0,${larc_flag},${sweep_flag},${b[0]},${b[1]}`; }); sly_path.attr("d", d => sly_bezier(...d, [0, plotwidth, 0, plotheight])); sly_trig_path.attr("d", d => sly_trig_bezier(...d, [0, plotwidth, 0, plotheight])); sly_grid_b.attr('d', sly_b); sly_grid_t.attr('d', sly_t); } update(); const cartwidth = 300, cartheight = 300; const cartbounds = [0, cartwidth, 0, cartheight]; const cartsvg = d3.select(DOM.svg(cartwidth, cartheight)); const cart_coords = (t, b) => [t*cartwidth, (1-b)*cartheight]; const cart_b = b => bezpts_to_svgpath(bezeval( (t) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const cart_t = t => bezpts_to_svgpath(bezeval( (b) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const lerp_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(t,t), [0, 1], cartbounds, 0.01)); const trig_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(...blending.trig(t)), [0, 1], cartbounds, 0.01)); const grid_b = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_b); const grid_cart_t = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_t); const cart_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[5]) .attr("d", lerp_bezier()); const cart_trig_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[4]) .attr("d", trig_bezier()); // Listen for input events on the view until the cell is disposed. viewof curve_points_smaller.addEventListener("input", update); return Generators.disposable(html`${svg.node()}${cartsvg.node()}`, () => { viewof curve_points_smaller.removeEventListener("input", update); }); } 40:T13d0,{ const ngrid = 16; const plotwidth = 480; const plotheight = 430; const [p1, p2, p3, p4] = viewof curve_points_smaller.value; const svg = d3.select(DOM.svg(plotwidth, plotheight)); const grid_coords = function(b, t) { const [a0, a1] = angles(p1, p2, p3, p4); const a = a0 * (1-b) + a1 * b; const q = apollo_coords(a, t) return cadd(p2, cmul(csub(p3, p2), q)); } const const_b = function(b) { return bezpts_to_svgpath(bezeval( (t) => grid_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const const_t = function(t) { return bezpts_to_svgpath(bezeval( (b) => grid_coords(b, t), [0, 1], [0, plotwidth, 0, plotheight], 0.001)) } const apollo_grid_b = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const apollo_grid_t = svg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path'); const circles = svg.append("g").selectAll("path") .data([[p1, p2, p3], [p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", '#d5d5d5') .attr("fill", "none"); const apollo_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[9]) .attr("fill", "none"); const cubic_path = svg.append("g").selectAll("path") .data([[p1, p2, p3, p4]]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[8]) .attr("fill", "none"); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data([p1, p2, p3, p4]) .enter().append("circle") .attr("r", 4) .attr("fill", colors.black) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } function dragged(d) { d[0] = clamp(d3.event.x, 0, plotwidth); d[1] = clamp(d3.event.y, 0, plotheight); viewof curve_points_smaller.value = viewof curve_points_smaller.value; // Dispatches an input event! } function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); circles.attr("d", ([a, p, b]) => { const [rad, larc_flag, sweep_flag] = arcviapoint(a, b, p); return `M${a[0]},${a[1]} A${rad},${rad},0,${larc_flag},${sweep_flag},${b[0]},${b[1]}`; }); cubic_path.attr("d", d => apollo_cubic_bezier(...d, [0, plotwidth, 0, plotheight])); apollo_path.attr("d", d => apollo_bezier(...d, [0, plotwidth, 0, plotheight])); // trig_path.attr("d", d => apollo_trig_bezier(...d, [0, plotwidth, 0, plotheight])); apollo_grid_b.attr('d', const_b); apollo_grid_t.attr('d', const_t); } update(); const cartwidth = 300, cartheight = 300; const cartbounds = [0, cartwidth, 0, cartheight]; const cartsvg = d3.select(DOM.svg(cartwidth, cartheight)); const cart_coords = (t, b) => [t*cartwidth, (1-b)*cartheight]; const cart_b = b => bezpts_to_svgpath(bezeval( (t) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const cart_t = t => bezpts_to_svgpath(bezeval( (b) => cart_coords(b, t), [0, 1], cartbounds, 0.001)); const lerp_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(t,t), [0, 1], cartbounds, 0.01)); const cubic_bezier = () => bezpts_to_svgpath(bezeval( t => cart_coords(...blending.cubic(t)), [0, 1], cartbounds, 0.01)); const grid_b = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_b); const grid_cart_t = cartsvg.append('g') .attr('fill', 'none').attr('stroke-width', 1).attr('stroke', '#eee') .selectAll('path') .data([...Array(ngrid+1).keys()].map(d => d/ngrid)) .enter().append('path') .attr('d', cart_t); const cart_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[9]) .attr("d", lerp_bezier()); const cart_cubic_path = cartsvg.append("path") .attr("fill", "none").attr("stroke-width", 2) .attr("stroke", d3.schemePaired[8]) .attr("d", cubic_bezier()); // Listen for input events on the view until the cell is disposed. viewof curve_points_smaller.addEventListener("input", update); return Generators.disposable(html`${svg.node()}${cartsvg.node()}`, () => { viewof curve_points_smaller.removeEventListener("input", update); }); } 41:T17e7,{ const plotwidth = 300; const plotheight = 400; const bounds = [0,plotwidth,0,plotheight]; const knots = viewof closed_curve_points.value; const svg0 = d3.select(DOM.svg(plotwidth, plotheight)); const svg1 = d3.select(DOM.svg(plotwidth, plotheight)); const svg2 = d3.select(DOM.svg(plotwidth, plotheight)); const svg3 = d3.select(DOM.svg(plotwidth, plotheight)); const svg4 = d3.select(DOM.svg(plotwidth, plotheight)); const svg5 = d3.select(DOM.svg(plotwidth, plotheight)); const apollo_path = svg2.append("g").selectAll("path") .data([knots]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[9]) .attr("fill", "none"); const apollo_cont_path = svg5.append("g").selectAll("path") .data([knots]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[8]) .attr("fill", "none"); const sly_path = svg1.append("g").selectAll("path") .data([knots]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[5]) .attr("fill", "none"); const sly_trig_path = svg4.append("g").selectAll("path") .data([knots]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[4]) .attr("fill", "none"); const wenz_path = svg0.append("g").selectAll("path") .data([knots]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[1]) .attr("fill", "none"); const sv_path = svg3.append("g").selectAll("path") .data([knots]) .enter().append("path") .attr("stroke-width", 2) .attr("stroke", d3.schemePaired[0]) .attr("fill", "none"); const point0 = svg0.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(knots) .enter().append("circle") .attr("r", 2) .attr("fill", colors.black) // .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point1 = svg1.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(knots) .enter().append("circle") .attr("r", 2) .attr("fill", colors.black) // .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point2 = svg2.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(knots) .enter().append("circle") .attr("r", 2) .attr("fill", colors.black) // .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point3 = svg3.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(knots) .enter().append("circle") .attr("r", 2) .attr("fill", colors.black) // .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point4 = svg4.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(knots) .enter().append("circle") .attr("r", 2) .attr("fill", colors.black) // .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); const point5 = svg5.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(knots) .enter().append("circle") .attr("r", 2) .attr("fill", colors.black) // .attr("fill", "none") .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function clamp(x, min, max) { return (x < min) ? min : (x > max) ? max : x; } function dragged(d) { d[0] = clamp(d3.event.x, 0, plotwidth); d[1] = clamp(d3.event.y, 0, plotheight); viewof closed_curve_points.value = viewof closed_curve_points.value; // Dispatches an input event! } function update() { point0.attr("cx", d => d[0]).attr("cy", d => d[1]); point1.attr("cx", d => d[0]).attr("cy", d => d[1]); point2.attr("cx", d => d[0]).attr("cy", d => d[1]); point3.attr("cx", d => d[0]).attr("cy", d => d[1]); point4.attr("cx", d => d[0]).attr("cy", d => d[1]); point5.attr("cx", d => d[0]).attr("cy", d => d[1]); sly_path.attr("d", d => spline_plot( circle_spline(d, (p0, p1, a0, a1) => arclen_segment(p0, p1, a0, a1, blending.linear)), bounds, 0.1)); sly_trig_path.attr("d", d => spline_plot( circle_spline(d, (p0, p1, a0, a1) => arclen_segment(p0, p1, a0, a1, blending.trig)), bounds, 0.1)); wenz_path.attr("d", d => spline_plot( circle_spline(d, (p0, p1, a0, a1) => lerp_segment(p0, p1, a0, a1, blending.linear)), bounds, 0.1)); sv_path.attr("d", d => spline_plot( circle_spline(d, (p0, p1, a0, a1) => lerp_segment(p0, p1, a0, a1, blending.trig)), bounds, 0.1)); apollo_cont_path.attr("d", d => spline_plot(apollo_spline(d, 1), bounds, 0.1)); apollo_path.attr("d", d => spline_plot(apollo_spline(d, false), bounds, 0.1)); } update(); // Listen for input events on the view until the cell is disposed. viewof closed_curve_points.addEventListener("input", update); return Generators.disposable( html`${svg0.node()}${svg1.node()}${svg2.node()}${svg3.node()}${svg4.node()}${svg5.node()}`, () => { viewof closed_curve_points.removeEventListener("input", update); }); }42:T701,Four_Parameter_Curvature = md` ### Curvature of a four-parameter spline segment The use of a cubic polynomial ${$`\alpha = \alpha_0(\bar{t} + \bar{t}^2t - t^2\bar{t}) + \alpha_1(t + t^2\bar{t} - \bar{t}^2t)`} above hints that we might use some arbitrary cubic polynomial to define our path of our curve segment. An arbitrary cubic polynomial is defined by four parameters, not just the two parameters for start and end angle in the curves described up until now. There are many possible bases we might choose for describing a cubic polynomial, but for analyzing curvature at the endpoints, the most convenient is the [Hermite][] basis. Given a function ${$`\alpha(t)`} defined on the interval ${$`t \in [0, 1]`}, if we call the endpoint values ${$`\alpha_0`} and ${$`\alpha_1`}, and the tangents at the endpoints ${$`\alpha_0'`} and ${$`\alpha_1'`}, then a cubic polynomial matching those criteria is: ${$$` \alpha(t) = \alpha_0h_{00}(t) + \alpha_0'h_{10}(t) + \alpha_1h_{01}(t) + \alpha_1'h_{11}(t) `} Using ${$`h`} for Hermite, with basis functions (letting ${$`\bar{t} = 1-t`} be the [affine][] complement): ${$$` \begin{aligned} h_{00}(t) &= 2t^3 - 3t^2 + 1 = \bar{t} + t\bar{t}\kern2mu^2 - t^2\bar{t} \\ h_{10}(t) &= t^3 - 2t^2 + 1 = t\bar{t}\kern2mu^2 \\ h_{01}(t) &= -2t^3 + 3t^2 = t - t\bar{t}\kern2mu^2 + t^2\bar{t} \\ h_{11}(t) &= t^3 - t^2 = -t^2\bar{t} \\ \end{aligned} `} [Hermite]: https://en.wikipedia.org/wiki/Cubic_Hermite_spline [affine]: https://en.wikipedia.org/wiki/Affine_combination In terms of this basis, we can express simple linear interpolation as specifying only ${$`\alpha_0`} and ${$`\alpha_1`}, and then letting ${$`\alpha_0' = \alpha_1' = (\alpha_1 - \alpha_0)`}. Our smooth polynomial-blended alternative is to set ${$`\alpha_0' = \alpha_1' = 0`}. `43:T47d,md` For a four-parameter Apollo curve between ${$`w(0) = 0`} and ${$`w(1) = 1`} where ${$`\alpha(t)`} is a cubic polynomial of ${$`t`} in Hermite basis, curvature at the endpoints takes quite a simple form. Given the curve: ${$$`\begin{aligned} w_\mathrm{apollo3}(t) &= w(\alpha_0h_{00}(t) + \alpha_0'h_{10}(t) + \alpha_1h_{01}(t) + \alpha_1'h_{11}(t), t) \\ &= \dfrac{t}{t + \exp\left(i\alpha_0h_{00}(t) + i\alpha_0'h_{10}(t) + i\alpha_1h_{01}(t) + i\alpha_1'h_{11}(t)\right)\bar{t}} \end{aligned}`} It turns out that the signed [curvature][] ${$`\kappa(t)`} at the endpoints is: ${$$`\begin{aligned} \kappa(0) = 2\left(\sin(\alpha_0) + \alpha_0'\right) \\ \kappa(1) = 2\left(\sin(\alpha_1) + \alpha_1'\right) \end{aligned}`} There is likely an elegant way to prove this, but it took me a few pages of gnarly hand calculations to work through, which I verified with a computer algebra system and various numerical experiments. The factor of 2 would disappear if we defined curvature as the inverse of the diameter of curvature instead of inverse radius. [curvature]: https://en.wikipedia.org/wiki/Curvature#Curvature_of_plane_curves `44:T639,Distributing_Curvature_Corrections = md` ### Distributing minimal curvature corrections The curvature at the endpoints described in the previous section is for a segment normalized to a unit interval. In a multi-segment spline, each segment will traverse a distance ${$`d_k = ||p_{k+1}-p_k||`}. The curvature above must be divided by this distance to be comparable between segments. If we start with a simple linear blend between circular arcs for each segment, and we find that there is a curvature discrepancy between adjacent segments across a knot ${$`\Delta\kappa_k = \kappa_k(0) - \kappa_{k-1}(1)`}, we can split the difference in two pieces ${$`\Delta\kappa_k^- + \Delta\kappa_k^+ = \Delta\kappa_k`}, and adjust the tangents of our blending function on each interval accordingly, by adding ${$`d_{k-1}\Delta\kappa_k^-`} to ${$`\alpha'_{1, k-1}`} and subtracting ${$`d_{k}\Delta\kappa_k^+`} from ${$`\alpha'_{0,k}`}. The result will be a spline with ${$`G^2`} continuity. The simplest split would just be ${$`\Delta\kappa_k^- = \Delta\kappa_k^+ = \Delta\kappa_k/2`}, but this seems to me to apply apply too much correction to segments with longer distance between endpoints. I think the fair way to split this discrepancy is based on inverse distances. That is, we can adjust the curvature of segment ${$`k-1`} at its final endpoint by: ${$$` \Delta\kappa_k^{-} = \frac{(1/d_{k-1})}{(1/d_k) + (1/d_{k-1})}\Delta\kappa_k `} And adjust the curvature of segment ${$`k`} at its initial endpoint by: ${$$` \Delta\kappa_k^{+} = \frac{(1/d_k)}{(1/d_k) + (1/d_{k-1})}\Delta\kappa_k `} `45:T447,Parametric_Continuity = md` ### Parametric continuity If we would like either of our splines with [${$`G^2`} (geometric) continuity][geometric continuity] to additionally have [${$`C^2`} (parametric) continuity][parametric continuity] (or if we want our ${$`G^1`} spline to be ${$`C^1`}), Apollo splines can be easily reparametrized: just scale the interval of ${$`t`} for each segment so that it is proportional to the distance between endpoints. For example, if we would like the whole spline to use a parameter in ${$`[0, 1]`}, we can scale each segment by the distance between endpoints divided by the total distance around the polyline or polygon defined by the full list of knots. This is simpler than the higher-order polynomial Séquin, Lee, & Yen needed to reparametrize their splines for ${$`C^2`} continuity: once again we are aided by the convenient form of our coordinate system near the endpoints. [geometric continuity]: https://en.wikipedia.org/wiki/Smoothness#Geometric_continuity [parametric continuity]: https://en.wikipedia.org/wiki/Smoothness#Parametric_continuity `46:T4cf,md` But there are many other ways we might choose tangent directions. For example, given any list of knots defining a spline along with specified tangents at the extreme endpoints, it is possible to choose the tangent directions at the intermediate knots such that the linearly blended Apollo curves for each segment make up a ${$`G^2`} continuous spline. This requires solving system of nonlinear equations, and I am not aware of an obvious direct method for it (but I am far from an expert on such topics). In the near future I will run some experiments with computing these tangents using some kind of approximate root-finding method. More generally, we might choose some other curve criteria to optimize, and then adjust the tangent directions at the knots to meet those goals, possibly with additional curvature corrections across the knots. Such schemes might require global optimization, or might be localized to a few knots on either side of each segment. Figuring out additional types of splines using this general scheme is an open research question. If someone has ideas and wants to help me optimize tangent directions to minimize required curvature corrections and optimize for curve fairness, please get in touch! `47:T5d4,xx md` ### Hermite basis If we want to interpolate between specified endpoints with specified tangents we can use a [cubic Hermite spline][]. If we call the endpoint values ${$`x_0`} and ${$`x_1`}, and the tangent values ${$`x_0'`} and ${$`x_1'`}, our interpolating cubic polynomials is: ${$$` x(t) = h_{00}(t)x_0 + h_{10}(t)x_0' + h_{01}(t)x_1 + h_{11}(t)x_1' `} With basis functions (letting ${$`\bar{t} = 1-t`} be the [affine][affine combination] complement): ${$$` \begin{aligned} h_{00}(t) &= 2t^3 - 3t^2 + 1 = \bar{t} + t\bar{t}\kern2mu^2 - t^2\bar{t} \\ h_{10}(t) &= t^3 - 2t^2 + 1 = t\bar{t}\kern2mu^2 \\ h_{01}(t) &= -2t^3 + 3t^2 = t - t\bar{t}\kern2mu^2 + t^2\bar{t} \\ h_{11}(t) &= t^3 - t^2 = -t^2\bar{t} \\ \end{aligned} `} Or in keeping with the previous papers we could use an alternative basis of trigonometric functions: ${$$` x_\mathrm{trig}(t) = k_{00}(t)x_0 + k_{10}(t)x_0' + k_{01}(t)x_1 + k_{11}(t)x_1' `} ${$$` \begin{aligned} k_{00}(t) &= \cos\left(\tfrac{\pi}{2} t\right)^2 \\[.3em] k_{10}(t) &= \tfrac{2}{\pi}\!\left( \sin\left(\tfrac{\pi}{2} t\right) - \sin\left(\tfrac{\pi}{2} t\right)^2 \right) \\[.3em] k_{01}(t) &= \sin\left(\tfrac{\pi}{2} t\right)^2 \\[.3em] k_{11}(t) &= \tfrac{2}{\pi}\!\left( -\cos\left(\tfrac{\pi}{2} t\right) + \cos\left(\tfrac{\pi}{2} t\right)^2 \right) \end{aligned} `} [cubic Hermite spline]: https://en.wikipedia.org/wiki/Cubic_Hermite_spline [affine combination]: https://en.wikipedia.org/wiki/Affine_combination `48:T705,apollo_spline = function apollo_spline(knots, correction) { const npts = knots.length; const astart = [], aend = []; // exterior angle const kstart = [], kend = []; // half curvature = 1 / diameter const dinv = []; // inverse distance between knots // Loop through each interval, finding the angles and uncorrected // curvature at the knots, and the inverse distance between knots. for (let i = npts-1; i >= 0; i--) { const pm1 = knots[mod(i-1, npts)], p0 = knots[i], p1 = knots[mod(i+1, npts)], p2 = knots[mod(i+2, npts)]; const inv_dist = dinv[i] = 1 / cabs(csub(p1, p0)); const [a0, a1] = [astart[i], aend[i]] = angles(pm1, p0, p1, p2); kstart[i] = inv_dist * (Math.sin(a0) - (a1 - a0)); kend[i] = inv_dist * (Math.sin(a1) + (a1 - a0)); } // Loop through each interval again, this time calculating curvature // adjustments, then producing a function that draws the curve segment. const segments = []; for (let i = npts-1; i >= 0; i--) { const im1 = mod(i-1, npts), ip1 = mod(i+1, npts); // indices i-1, i+1 const a0 = astart[i], a1 = aend[i]; let kc0, kc1; // curvature correction if (+correction == 1) { const k0m = kend[im1], k0p = kstart[i], k1m = kend[i], k1p = kstart[ip1], dm1 = dinv[im1], d0 = dinv[i], d1 = dinv[ip1]; kc0 = (k0p - k0m) / (dm1 + d0); kc1 = (k1p - k1m) / (d0 + d1); } else if (+correction == 2) { // set curvature at the endpoints equal to the curvature // of the defining circular arcs. kc0 = (a0 - a1), kc1 = (a0 - a1); } else { kc0 = kc1 = 0; // no curvature correction } segments[i] = apollo_segment_adjusted( knots[i], knots[mod(i+1, npts)], a0, a1, kc0, kc1); } return segments; }49:T42b,curvature = { const n = 256; const pts = chebpts(n+1).map(t => 0.5*(t+1)) // expects `segment` to be a function taking a parameter in [0, 1] return function curvature(segment) { const xv = [], yv = []; for (let i = n; i >= 0; i--) [xv[i], yv[i]] = segment(pts[i]); const x = vals2coeffs(xv), y = vals2coeffs(yv); const Dx = chebdiff(x), Dy = chebdiff(y); const DDx = chebdiff(Dx), DDy = chebdiff(Dy); Dx.push(0); Dy.push(0); DDx.push(0,0); DDy.push(0,0); // pad lengths const Dxv = coeffs2vals(Dx), Dyv = coeffs2vals(Dy); const DDxv = coeffs2vals(DDx), DDyv = coeffs2vals(DDy); const numer_v = [], denom_v = []; for (let i = n; i >= 0; i--) { numer_v[i] = Dxv[i] * DDyv[i] - DDxv[i] * Dyv[i]; const Dr2 = Dxv[i] * Dxv[i] + Dyv[i] * Dyv[i]; denom_v[i] = Dr2 * Math.sqrt(Dr2); } const numer = vals2coeffs(numer_v), denom = vals2coeffs(denom_v); return function(t) { t = 2*(t-0.5); // renormalize t to [-1, 1] return chebeval(numer, t) / chebeval(denom, t); } } }4a:[] 2b:{"id":"e639659056145e88","slug":"apollo","title":"Apollo Curves and Other Blended Circular Arc Splines","thumbnail":"07ce11b8ec0eb14a6122d0a8aefc05d84037d41796351f73791f6622e693d1f9","access_level":"unlisted","create_time":"$D2018-02-12T04:50:31.251Z","update_time":"$D2020-10-25T19:37:08.104Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"9b8a8e177a49059a","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":"starter_2024"},"version":3795,"publish_version":3795,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null}],"members":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Apollo Curves and Other Blended Circular Arc Splines","cells":[{"id":0,"value":"Title = md`# Apollo Curves and Other Blended Circular Arc Splines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2778,"value":"md`## Summary\nI am here proposing a new family of spline curves based on blending circular\narcs in an [Apollonian circle][] coordinate system, which I am calling Apollo\ncurves (because [Apollonius][]’s name has too many letters and syllables, and\nbecause his eponymous deity [Apollo][] is associated to gracefully curved\nthings such as bows and swans).\n\n [Apollonian circle]: https://en.wikipedia.org/wiki/Apollonian_circles\n [Apollonius]: https://en.wikipedia.org/wiki/Apollonius_of_Perga\n [Apollo]: https://en.wikipedia.org/wiki/Apollo\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"md`\nAll of the methods in the papers cited above were designed to produce\nthe ${$`k`}th curve segment of a spline from given control points\n${$`[p_{k-1}, p_k, p_{k+1}, p_{k+2}]`} along the curve. They fit one \ncircular arc through the points ${$`[p_{k-1}, p_k, p_{k+1}]`} and another \nthrough the points ${$`[p_k, p_{k+1}, p_{k+2}]`}, and use those arcs to \ndefine the tangent angles at the points ${$`p_k`} and ${$`p_{k+1}`}. This \nis analogous to a [Catmull-Rom spline][crspline].\n\nBut once we have developed the general idea, we can depart from this\nscheme and develop other types of design tools, analogous to a cubic\nBézier curves, etc. Depending on the particular geometric design problem,\nthese may be more flexible or familiar to designers.\n\n [crspline]: https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull–Rom_spline\n [centrip]: https://en.wikipedia.org/wiki/Centripetal_Catmull–Rom_spline\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2807,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2698,"value":"md`\n\nIf we want to define a parametric curve in our Euclidean plane ${$`p(t)`},\nwe can use a scalar parameter ${$`t \\in [0,1]`} and define a map ${$`w`} \nwith ${$`w(t) \\in \\mathbb{C}`}. Our curve will consist of the points:\n\n${$$`p(t) = p_0 + w(t)v_1`}\n\nIn this notebook we are discussing curves between the endpoints: ${$`p(0) = p_0`} and\n${$`p(1) = p_1`}, so that means ${$`w(0) = 0`} and ${$`w(1) = 1`}.\n\nWhile they are theoretically distinct types of objects, where convenient we\nwill associate the point ${$`p_w`}, the displacement vector ${$`v_w`}, and the\ncomplex number ${$`w`}, and sometimes get a bit sloppy about the differences.\nFor instance we will draw pictures of the complex plane using dots and arrows\nto represent complex numbers, with parametric functions ${$`w(t)`} drawn as\ncurves.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3122,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3441,"value":"{\n const slider = html``;\n const math = html``\n const element = html`${slider}${math}`\n \n slider.oninput = () => viewof time.value = slider.valueAsNumber;\n const update = () => {\n const t = viewof time.value\n slider.value = t;\n math.innerHTML = '';\n math.appendChild($`t = ${t.toFixed(2)}`)\n };\n \n update();\n \n viewof time.addEventListener(\"input\", update);\n return Generators.disposable(element, () => {\n viewof time.removeEventListener(\"input\", update);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"Line_Segment = md`\n## Parametrizing a line segment\n\nTo linearly interpolate between ${$`p_0`} and ${$`p_1`} using a scalar parameter\n${$`t \\in [0,1]`}, we can scale the displacement vector ${$`p_1 - p_0`}:\n\n${$$`p(t) - p_0 = t(p_1 - p_0)`}\n\nWe can rewrite this in the form above, to see that our complex-number\nrepresentation of our point as it travels along the line segment is just\n${$`w(t) = t`}:\n\n${$$`p(t) = p_0 + tv_1`}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3197,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3439,"value":"{\n const slider = html``;\n const math = html``\n const element = html`${slider}${math}`\n \n slider.oninput = () => viewof time.value = slider.valueAsNumber;\n const update = () => {\n const t = viewof time.value\n slider.value = t;\n math.innerHTML = '';\n math.appendChild($`t = ${t.toFixed(2)}`)\n };\n \n update();\n \n viewof time.addEventListener(\"input\", update);\n return Generators.disposable(element, () => {\n viewof time.removeEventListener(\"input\", update);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2809,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3367,"value":"{\n const slider = html``;\n const math = html``\n const element = html`${slider}${math}`\n \n slider.oninput = () => viewof time.value = slider.valueAsNumber;\n const update = () => {\n const t = viewof time.value\n slider.value = t;\n math.innerHTML = '';\n math.appendChild($`t = ${t.toFixed(2)}`)\n };\n \n update();\n \n viewof time.addEventListener(\"input\", update);\n return Generators.disposable(element, () => {\n viewof time.removeEventListener(\"input\", update);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3348,"value":"md` ... above diagram still in progress ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3350,"value":"md`\n... another diagram above here, showing side by side an arc on the chord\nfrom 0 to 1 and an arc of the unit circle ...\n\n\nIf we allow ${$`\\alpha`} to vary over angles in the interval ${$`(-\\pi, \\pi)`}\nand ${$`t`} to vary over the interval ${$`[0, 1]`}, we obtain a coordinate \nsystem covering the full complex plane except for the real axis outside of\nthe interval ${$`[0, 1]`}:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"md`\nThe above parametrization has one significant flaw, however: it cannot\nhandle an angle of ${$`\\alpha = ±π`} (or ${$`\\hat{z} = \\exp(i\\alpha) = -1`}).\nThis is because ${$`\\hat{z} = –1`} corresponds to a pair of straight rays\nemanating from the endpoints headed in opposite directions (the red rays\nin the picture above), or if you like a straight line segment between\nthe endpoints passing through the point at ${$`\\infty`}, and it is\nimpossible to move at uniform speed all the way along an infinite ray\nusing only a finite interval for the parameter. Even for nearby angles\nit starts to break down: for a circle of extremely large radius, a \nparametrization which is uniform in arclength quickly zooms out of our view.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3362,"value":"md`... diagram here ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3359,"value":"md`\nConveniently, near the point ${$`w^\\star(\\hat{z}, 0) = 0`}, this coordinate system looks\nlocally like ${$`(\\hat{z}, t) \\mapsto \\hat{z}^{–1}t`}, while near the point ${$`w^\\star(\\hat{z}, 1) = 1`},\nit looks locally like ${$`(\\hat{z}, t) \\mapsto \\hat{z}(t-1)`}. This makes it straightforward\nto analyze the curvature near the endpoints when constructing splines.\n\nThis parametrization also skips some transcendental function evaluations\n(complex exponential or sine) of the arclength parametrization in favor\nof division, and only involves one singular point,\n${$`w^\\star(-1, \\frac{1}{2}) = \\infty`}, largely avoiding the problem\ndiscussed above for ${$`\\hat{z} \\approx –1`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1505,"value":"Stereographic_Projection = md`\n### Aside: Stereographic projection from the globe\n\nFor the cartographers out there, we might consider a similar Apollonian\ncircle coordinate system to be a [stereographic projection][] from the\n(spherical) globe to the complex plane which maps the south pole to\n${$`0`} and the north pole to ${$`1`}. We could then use latitude and\nlongitude on the globe for our coordinates. Instead of the ${$`(1-t)/t`}\nabove, a coordinate ${$`t`} which varies uniformly with latitude must\nbe scaled ${$`|z| = \\cot(\\pi t/2)`}.\n\n${$$`\n\\dfrac{1 - w}{w} = \\cot(\\pi t/2)\\exp(i\\alpha)\n`}\n\n${$$`\nw_\\mathrm{geo}(\\alpha, t) = \\dfrac{\\sin(\\pi t/2)}{\\cos(\\pi t/2)\\exp(i\\alpha) + \\sin(\\pi t/2)}\n`}\n\nIn the resulting grid, semicircular arcs between ${$`0`} and ${$`1`} when\n${$`\\alpha = \\pm\\pi/2`} are parametrized uniformly with arclength, but\nthe straight segment from ${$`0`} to ${$`1`} when ${$`\\alpha = 0`} is not.\n\n [stereographic projection]: https://en.wikipedia.org/wiki/Stereographic_projection\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2899,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3460,"value":"Tangents_From_Knots = md`\n## Finding tangent directions using arcs through three knots\n\nIf we want to invent a spline construction tool based on curve segments\nmatching positions and tangent directions of an ordered list of knots,\nwe need a way to determine those tangent directions. The simplest would\nbe to just let the curve designer provide them explicitly. If we are\nonly given a list of knot positions and must infer the tangents ourselves,\nthe next simplest is to determine a tangent direction at each knot by\nfitting a circle through three consecutive knots.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3466,"value":"md` ... some mathematical equations and a couple of diagrams here ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1426,"value":"md`\n### Nonlinear blending\nOnce we have this type of grid, there’s nothing stopping us from drawing\nany path we like relative to grid coordinates.\n\nIn particular, Szilvási-Nagy and Vendel (2000) recommend blending between\narcs using a sinusoidal curve with flat tangent at the ends, so that\nat the ends of the segment the curve match not only the tangent direction\nbut also the curvature of the circular arcs (yielding [${$`\\mathrm{G^2}`}\ncontinuity][g2 continuity] for a spline). 19th century navigators rejoice:\na modern use for the [haversine][]!\n\n${$$`\nt_\\mathrm{trig} = \\sin\\left(\\tfrac{\\pi}{2}t\\right)^2 = \\dfrac{1 - \\cos(\\pi t)}{2} = \\mathop{\\mathrm{haversin}}(\\pi t)\n`}\n\nSo that leaves us with:\n\n${$$`\nw_\\mathrm{sv}(t) =\n w_\\mathrm{arc}(\\alpha_0, t)(1-t_\\mathrm{trig}) +\n w_\\mathrm{arc}(\\alpha_1, t)t_\\mathrm{trig}\n`}\n\nOr draw your own favorite blend function...\n\n [g2 continuity]: https://en.wikipedia.org/wiki/Smoothness#Geometric_continuity\n [haversine]: https://en.wikipedia.org/wiki/Versine#Haversine\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"md`\nUnfortunately, while it nominally improves continuity near the endpoints,\njust changing the path through this coordinate system does not fix\nunderlying issues with it.\n\nThe curves making up this grid are not in general circular arcs, and\nthere is nothing preventing this grid from intersecting itself. As a\nresult, for interpolation points which reverse direction, results\ncan be pathological. (Try playing with the interactive diagrams above.)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"md`\n### Blending between circular arcs by interpolating exterior angle\n\nSéquin, Lee, and Yen (2005) describe these flaws with Wenz and\nSzilvási-Nagy & Vendel’s approach and instead propose using a coordinate\nsystem in which the defining angle of circular arcs between the endpoints\nvaries uniformly along one coordinate, while curvilinear distance from one\nendpoint varies uniformly along each arc in the other coordinate. This\nresults in generally much tamer behavior, eliminating cusps and loops and\nplacing the initial and final arcs on more even footing even when they\nare of dramatically different size.\n\n${$$`\nw_\\mathrm{sly1}(t) =\n w_\\mathrm{arc}((1-t)\\alpha_0 + t\\alpha_1, t)\n`}\n\nThey also proposed the curvature-continuous variant which follows the\ndefining circle near each knot to second order:\n\n${$$`\nw_\\mathrm{sly2}(t) =\n w_\\mathrm{arc}((1-t_\\mathrm{trig})\\alpha_0 + t_\\mathrm{trig}\\alpha_1, t)\n`}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1588,"value":"md`\n### Blending with an Apollonian circle parametrization\n\nIn this notebook I am proposing blending between circles using an\nalternative coordinate system based on Apollonian circles, the one \ndescribed previously.\n\nTo clarify our equations, in the following we will let ${$`\\bar{t} = 1 - t`},\nthe [affine][] complement of ${$`t`}.\n\n${$$`\\begin{aligned}\nw_\\mathrm{apollo1}(t)\n &= w(\\alpha_0\\bar{t} + \\alpha_1t, t) \\\\\n &= \\dfrac{t}{t + \\exp\\left(i\\alpha_0\\bar{t} + i\\alpha_1t\\right)\\bar{t}}\n\\end{aligned}`}\n\nAs above, we can follow a nonlinear path in these coordinates. For instance,\nif curvature must match the defining circular arcs at the endpoints,\nwe can use a blending function with flat tangents when ${$`t = 0`} and\n${$`t = 1`}, and then the resulting curve will have curvature matching\nthe limiting circular arcs at the endpoints.\n\n [affine]: https://en.wikipedia.org/wiki/Affine_combination\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3546,"value":"md`\nInstead of the sinusoidal blending function described by Szilvási-Nagy\nand Vendel, I prefer a simpler cubic polynomial (known in computer graphics as [smoothstep]):\n\n${$$`\\begin{aligned}\nt_\\mathrm{poly} &= 3t^2 - 2t^3 = t + t^2\\bar{t} - \\bar{t}^2t \\\\\n1 - t_\\mathrm{poly} &= - 3t^2 + 2t^3 + 1 = \\bar{t} + \\bar{t}^2t - t^2\\bar{t}\n\\end{aligned}`}\n\nThis looks very similar to the trigonometric version, but any curve\nbetween ${$`0`} and ${$`1`} with flat tangents would accomplish\nsomething similar.\n\n${$$`\\begin{aligned}\nw_\\mathrm{apollo2}(t)\n &= w\\!\\left(\\alpha_0(1 - t_\\mathrm{poly}) + \\alpha_1t_\\mathrm{poly}, t\\right) \\\\[.5em] \n &= w\\!\\left(\\alpha_0(\\bar{t} + \\bar{t}^2t - t^2\\bar{t}) + \\alpha_1(t + t^2\\bar{t} - \\bar{t}^2t), t\\right) \\\\[.5em] \n &= \\dfrac{t}{t + \\exp\\left(i\\alpha_0(\\bar{t} + \\bar{t}^2t - t^2\\bar{t}) + i\\alpha_1(t + t^2\\bar{t} - \\bar{t}^2t) \\right)\\bar{t}}\n\\end{aligned}`}\n\n [smoothstep]: https://en.wikipedia.org/wiki/Smoothstep\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"Interpolating_Spline = md`\n## Fitting together an interpolating spline\n\nWenz (1996) wanted to fit a smooth spline through a series of specified\nknots ${$`[p_0, p_1, \\ldots, p_n]`}, as a way of interpolating\nthem more smoothly than a Catmull-Rom spline. \n\nHe proposed to find a tangent angle at a given knot ${$`p_k`} by fitting a\ncircular arc through the points ${$`[p_{k-1}, p_k, p_{k+1}]`}, and then\nfor each segment of his curve blend between a pair of these circular arcs.\n\nAbove, we derived several methods of blending arcs for a single segment. Now\nwe can try to build a spline interpolating a whole list of knot points.\n\nIf we don’t care about curvature continuity at the knots, we can use linear\nblending. ...\n\n.... This section needs a whole lot more text and explanation ....\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1990,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3501,"value":"Curvature_Continuity = md`\n## Curvature continuity\n\nSzilvási-Nagy & Vendel and Séquin, Lee, & Yen both used a sinusoidal\nblending function to guarantee curvature continuity across each knot,\nso that the resulting splines would appear smooth. Their method was\nto set tangent directions at each knot based on a circular arc through\nthe adjacent knots, and then match this arc to second order near the\nknot on each side.\n\n\nBut this is a rather heavy-handed way to force curvature continuity.\nIn particular, this method often applies more curvature correction\nthan necessary to align the two sides, resulting in a kind of flat\nbulge in the curve across the knot. In some cases, the curvature\ncorrection applied to one side of the knot is even in the opposite\ndirection from the correction required to match the curvature on the\nother side, while the correction on the other side overshoots the\noriginal curvature of the first side.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3602,"value":"md`... diagram here with some examples ... `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3600,"value":"Minimal_Curvature_Corrections = md`\n### Minimal curvature corrections\n\nA subtler approach is to start with simple linear blending between\ncircular arcs matching the specified tangents at each knot, then compute\nthe curvature across each side of every knot, and finally apply the\nminimal correction needed on each side to match curvature between the\ntwo sides.\n\nWhen using either the output-space interpolation of Szilvási-Nagy &\nVendel or the arclength-uniform coordinate system of Séquin, Lee, & Yen,\nthis is a difficult computation (which may be why they didn’t attempt\nit). However, in our Apollonian circle coordinate system it thankfully\nbecomes quite straightforward because curvature at the knots takes a\nsimple form.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3511,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3580,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3576,"value":"md`\nAside: we won’t explore it further here, but in keeping with the previous\npapers we could use an alternative basis for a 4-parameter curve inspired\nby sinusoidal blending:\n\n${$$`\n\\alpha_\\mathrm{trig}(t) = \\alpha_0g_{00}(t) + \\alpha_0'g_{10}(t) + \\alpha_1g_{01}(t) + \\alpha_1'g_{11}(t)\n`}\n\n${$$`\n\\begin{aligned}\ng_{00}(t) &= \\cos\\left(\\tfrac{\\pi}{2} t\\right)^2 \\\\[.3em]\ng_{10}(t) &= \\tfrac{2}{\\pi}\\!\\left(\n \\sin\\left(\\tfrac{\\pi}{2} t\\right) - \n \\sin\\left(\\tfrac{\\pi}{2} t\\right)^2 \\right) \\\\[.3em]\ng_{01}(t) &= \\sin\\left(\\tfrac{\\pi}{2} t\\right)^2 \\\\[.3em]\ng_{11}(t) &= \\tfrac{2}{\\pi}\\!\\left(\n -\\cos\\left(\\tfrac{\\pi}{2} t\\right) + \n \\cos\\left(\\tfrac{\\pi}{2} t\\right)^2 \\right)\n\\end{aligned}\n`}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3622,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3723,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3695,"value":"Locality = md`\n### Spline locality\n\nThis method of matching the curvature across knots results in a spline\nwhich is less “local” than the splines of Wenz; Szilvási-Nagy & Vendel;\nSéquin, Lee, & Yen; or our direct Apollo curve analogs of those splines.\nThose splines all set the tangent direction of the curve at each knot\nusing the position of the knot itself as well as the position of the\npair of adjacent knots. Then each curve segment is determined entirely\nby the positions of the endpoints and those tangents at each endpoint.\nSo the shape of each curve segment depends on only the positions of\n4 consecutive knots.\n\nBy contrast, our “minimal curvature corrected” spline sets the tangents\nthe same way, but then makes an adjustment to a given segment based on\nthe shape of the segments on either side. The shape of each curve\nsegment thus depends on the positions of 6 consecutive knots. For most\npurposes the improvement in curve “fairness” is probably worth this\nslight reduction in locality.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3693,"value":"Alternative_Tangents = md`\n## Alternative choices of tangents at the knots\n\nArmed with this new method of reconciling the curvature across each\nknot, we no longer need to determine tangent angles at each knot based\non a circle through the adjacent knots in order to construct a ${$`G^2`}\nspline. We can pick any tangent angles we like and then apply the\nnecessary curvature corrections across the knot.\n\nThe simplest thing we can do with this is leave the choice of tangent\ndirections up to the curve designer:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3714,"value":"md`... diagram here ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3711,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3364,"value":"md` ... some more sections to add below here ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2303,"value":"circle_spline = function circle_spline(knots, segment) {\n const npts = knots.length;\n const segments = [];\n for (let i = 0; i < npts; i++) {\n const pm1 = knots[mod(i-1, npts)], p0 = knots[i];\n const p1 = knots[mod(i+1, npts)], p2 = knots[mod(i+2, npts)];\n const [a0, a1] = angles(pm1, p0, p1, p2);\n segments.push(segment(p0, p1, a0, a1));\n }\n return segments;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1881,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"x apollo_spline(closed_curve_points, 1).map((d, i, A) =>\n [+curvature(d)(1).toFixed(5),\n +curvature(A[mod(i+1, A.length)])(0).toFixed(5)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2352,"value":"x apollo_spline(closed_curve_points, 0).map((d, i, A) =>\n [+curvature(d)(1).toFixed(5),\n +curvature(A[mod(i+1, A.length)])(0).toFixed(5)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1943,"value":"apollo_segment_adjusted = function apollo_segment_adjusted(p0, p1, a0, a1, kc0, kc1) {\n // kc0 and kc1 are the adjustments to make in curvature at the endpoints.\n return function(t) {\n const t_ = 1 - t, tt_ = t*t_;\n const a = t_*(a0 + tt_*kc0) + t*(a1 - tt_*kc1);\n const w = apollo_coords(a, t);\n return cadd(p0, cmul(csub(p1, p0), w));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2475,"value":"md`Curvature of a parametric curve ${$`\\left(x, y\\right)`} is ${$`\n\\kappa = \\dfrac{x'y'' - y'x''}{\\left(x'^2 + y'^2\\right)^{3/2}}\n`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2161,"value":"spline_plot = function spline_plot(segments, bounds, tolerance) {\n const bezpts = [];\n for (let i = 0; i < segments.length; i++) {\n bezpts.push(...bezeval(segments[i], [0, 1], bounds, tolerance));\n }\n return bezpts_to_svgpath(bezpts)\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"md`\n* * *\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"angles = function angle(pm1, p0, p1, p2) {\n const z0 = cdiv(csub(p1, pm1), csub(p0, pm1));\n const z1 = cdiv(csub(p0, p2), csub(p1, p2));\n return [imag(clog(z0)), -imag(clog(z1))];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"$$$`\n\\begin{aligned}\nt_\\mathrm{line} &= t \\\\\n\nt_\\mathrm{trig}\n &= sin\\left(\\tfrac{\\pi}{2} t\\right)^2\n = \\tfrac{1}{2}\\left(1 - \\cos(\\pi t)\\right) \\\\\n\nt_\\mathrm{cubic}\n &= 3t^2 - 2t^3\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1464,"value":"blending = ({\n linear: (t) => [t, t],\n trig: (t) => [t, 0.5*(1 - Math.cos(Math.PI*t))],\n cubic: (t) => [t, t * t * (3 - 2*t)],\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"lerp_segment = function lerp_segment(p0, p1, a0, a1, blend) {\n if (blend == null) blend = (t) => [t, t];\n return function(t) {\n const [t1, t2] = blend(t);\n const w0 = arclen_coords(a0, t1);\n const w1 = arclen_coords(a1, t1);\n const w = cadd(cmul([1-t2,0], w0), cmul([t2,0], w1));\n return cadd(p0, cmul(csub(p1, p0), w));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"arclen_segment = function arclen_segment(p0, p1, a0, a1, blend) {\n if (blend == null) blend = (t) => [t, t];\n return function(t) {\n const [t1, t2] = blend(t);\n const a = (1 - t2)*a0 + t2*a1;\n const w = arclen_coords(a, t1);\n return cadd(p0, cmul(csub(p1, p0), w));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"apollo_segment = function apollo_segment(p0, p1, a0, a1, blend) {\n if (blend == null) blend = (t) => [t, t];\n return function(t) {\n const [t1, t2] = blend(t);\n const a = (1 - t2)*a0 + t2*a1;\n const w = apollo_coords(a, t1);\n return cadd(p0, cmul(csub(p1, p0), w));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"wenz_bezier = function wenz_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n lerp_segment(p0, p1, a0, a1, blending.linear),\n [0, 1], bounds, 0.01));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"sv_bezier = function sv_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n lerp_segment(p0, p1, a0, a1, blending.trig),\n [0, 1], bounds, 0.01));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1513,"value":"lerp_cubic_bezier = function lerp_cubic_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n lerp_segment(p0, p1, a0, a1, blending.cubic),\n [0, 1], bounds, 0.01));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"sly_bezier = function sly_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n arclen_segment(p0, p1, a0, a1, blending.linear),\n [0, 1], bounds, 0.01));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"sly_trig_bezier = function sly_trig_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n arclen_segment(p0, p1, a0, a1, blending.trig),\n [0, 1], bounds, 0.01));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1582,"value":"sly_cubic_bezier = function sly_cubic_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n arclen_segment(p0, p1, a0, a1, blending.cubic),\n [0, 1], bounds, 0.01));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"apollo_bezier = function apollo_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n apollo_segment(p0, p1, a0, a1, blending.linear),\n [0, 1], bounds, 0.01));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"apollo_trig_bezier = function apollo_trig_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n apollo_segment(p0, p1, a0, a1, blending.trig),\n [0, 1], bounds, 0.01));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1592,"value":"apollo_cubic_bezier = function apollo_cubic_bezier(pm1, p0, p1, p2, bounds) {\n const [a0, a1] = angles(pm1, p0, p1, p2);\n return bezpts_to_svgpath(bezeval(\n apollo_segment(p0, p1, a0, a1, blending.cubic),\n [0, 1], bounds, 0.01));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"trig_blend_inv = {\n const PI_INV = 1 / Math.PI;\n return function trig_blendeasing_inv(t) {\n return PI_INV*Math.acos(1 - 2*t);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"$$$`\nw_\\mathrm{arc}(\\alpha, t) =\n \\dfrac{\\sin\\left(\\alpha t\\right)}{\\sin\\alpha}\n \\exp\\left(-i\\alpha(1-t)\\right)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"arclen_coords = function arclen_coords(a, t) {\n if (a == 0) return [t,0];\n const r = Math.sin(a*t)/Math.sin(a);\n const b = -a*(1-t);\n return [r*Math.cos(b), r*Math.sin(b)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"md`\nAlternative expression for the above,\n\n${$$`\nw_\\mathrm{arc}(\\alpha, t) =\n \\dfrac{\\exp(2t\\alpha i) - 1}{\\exp(2\\alpha i) - 1}\n`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"// equivalent to above, modulo rounding errors\narclen_coords2 = function arclen_coords2(a, t) {\n if (a == 0) return [t,0];\n return cdiv(csub(cexp([0,2*a*t]), [1,0]),\n csub(cexp([0,2*a]), [1,0]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1772,"value":"$$$`\nw_\\mathrm{apollo}(\\alpha, t) =\n \\dfrac{t}{t + \\exp(i\\alpha)\\left(1 - t\\right)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"apollo_coords = function apollo_coords(a, t) {\n const t1mz = cmul([1-t,0], cexp([0,a]));\n return cdiv([t,0], cadd(t1mz, [t,0]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"$$$`\nw_\\mathrm{geo}(\\alpha, t) = \\dfrac{\\sin(\\pi t/2)}{\\cos(\\pi t/2)\\exp(i\\alpha) + \\sin(\\pi t/2)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1650,"value":"latlong_coords = function latlong_coords(a, t) {\n const b = Math.PI * t * 0.5;\n const s = Math.sin(b), c = Math.cos(b);\n const z = cexp([0,a]);\n return cdiv([s, 0], cadd(cmul([c,0],z), [s,0]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`* * *`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"import {cadd, csub, cmul, cinv, cdiv, clog, cexp, imag, cabs, phase} from '@jrus/complex'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"md`\nFixed modulo function which does the right thing for negative arguments,\nunlike the bare JavaScript \\`%\\` operator:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1897,"value":"mod = function mod(x, y) {\n return (x % y) + y * !!((x % y) && (x > 0 ^ y > 0));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3169,"value":"viewof time = new View(0.4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof curve_points = new View([[99,401],[361,483],[729,299],[614,476]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"viewof curve_points_smaller = new View([[156,419],[168,381],[371,355],[243,398]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"closed_curve_points.join('],[')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"viewof closed_curve_points = new View([[87,119],[80,199],[107,59],[228,125],[192,137],[265,233],[34,223]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"colors = ({\n \"blue\": \"#08e\",\n \"red\": \"#d03\",\n \"black\": \"#000\",\n \"palegray\": \"#fafafc\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {arcviapoint} from \"@jrus/arc-through-a-point\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"import {bezeval, bezpts_to_svgpath} from \"@jrus/bezplot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2329,"value":"import {evaluate as chebeval, diff as chebdiff, chebpts, vals2coeffs, coeffs2vals} from '@jrus/cheb'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2963,"value":"import {cute_examples, arrow_path} from \"@jrus/arrowheads\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2825,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2827,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/110m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2831,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$$css = html`${math_css}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import {math_css, $, $$} with {$css as $css} from \"@jrus/misc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1","titling":"auto"}} 2c:"$2b:body" 27:E{"digest":"NEXT_REDIRECT;replace;/@jrus/apollo;307;"}