30:T732,cheb_plot = { const bez = viewof curve_bez.value const cpts = bez3_to_pts(bez); const svgheight = 300; const svgwidth = 640; const svg = d3.select(DOM.svg(svgwidth, svgheight)) .attr('style', `background-color: ${colors.palegray};`); const bezier = svg.append("path") .attr("fill", "none") .attr("stroke-width", "1.5px") .attr("stroke", colors.blue); const point = svg.append("g") .attr("cursor", "move") .attr("pointer-events", "all") .attr("stroke", "transparent") .attr("stroke-width", 30) .selectAll("circle") .data(cpts) .enter().append("circle") .attr("r", (d, i) => (i === 1 || i === 2) ? 4 : 5) .attr("fill", (d, i) => (i === 1 || i === 2) ? colors.blue : colors.black) .call(d3.drag() .subject(([x, y]) => ({x, y})) .on("drag", dragged)); function dragged(d) { d[0] = clamp(d3.event.x, 0, svgwidth); d[1] = clamp(d3.event.y, 0, svgheight); // sync chebyshev values -> bezier control points pts_to_bez3(cpts).forEach( (p,i) => {bez[i][0] = p[0]; bez[i][1] = p[1]}); viewof curve_bez.value = viewof curve_bez.value; // Dispatches an input event! } function update() { const [p1, p2, p3, p4] = bez; // sync bezier control point -> chebyshev values bez3_to_pts(bez).forEach( (d,i) => {cpts[i][0] = d[0]; cpts[i][1] = d[1]}); point.attr("cx", d => d[0]).attr("cy", d => d[1]); bezier.attr("d", `M${p1[0]},${p1[1]} C${p2[0]},${p2[1]},${p3[0]},${p3[1]},${p4[0]},${p4[1]}`); } update(); // Listen for input events on the view until the cell is disposed. viewof curve_bez.addEventListener("input", update); return Generators.disposable(svg.node(), () => { viewof curve_bez.removeEventListener("input", update); }); return svg.node(); }31:T784,bez_plot = { const [p1, p2, p3, p4] = viewof curve_bez.value; const svgheight = 300; const svgwidth = 640; const svg = d3.select(DOM.svg(svgwidth, svgheight)) .attr('style', `background-color: ${colors.palegray};`); const stretch = svg.append("g") .attr("fill", "none") .attr("stroke", colors.red) .selectAll("path") .data([[p1, p2], [p4, p3]]) .enter().append("path") .attr("d", d => `M${d[0][0]},${d[0][1]} L${d[1][0]},${d[1][1]}`); const bezier = svg.append("path") .attr("fill", "none") .attr("stroke-width", "1.5px") .attr("stroke", colors.blue); 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", (d, i) => (i === 1 || i === 2) ? 4 : 5) .attr("fill", (d, i) => (i === 1 || i === 2) ? colors.red : 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, svgwidth); d[1] = clamp(d3.event.y, 0, svgheight); viewof curve_bez.value = viewof curve_bez.value; // Dispatches an input event! } function update() { point.attr("cx", d => d[0]).attr("cy", d => d[1]); stretch.attr("d", d => `M${d[0][0]},${d[0][1]} L${d[1][0]},${d[1][1]}`); bezier.attr("d", `M${p1[0]},${p1[1]} C${p2[0]},${p2[1]},${p3[0]},${p3[1]},${p4[0]},${p4[1]}`); } update(); // Listen for input events on the view until the cell is disposed. viewof curve_bez.addEventListener("input", update); return Generators.disposable(svg.node(), () => { viewof curve_bez.removeEventListener("input", update); }); return svg.node(); }32:T644,md` Drag the blue ${draw_bullet(colors.blue)} black ${draw_bullet(colors.black)} and red ${draw_bullet(colors.red)} control points in the plots above. We can represent a parametric cubic polynomial curve in a variety of ways. Two convenient ones for the sake of drawing a user interface are the Bernstein basis, which allows us to draw the usual Bézier curve control points; and the basis of Chebyshev values, which allow us to directly manipulate points at values of the parameter ${$`t = \{0, \frac{1}{4}, \frac{3}{4}, 1\}`} (if you like, this is a [Lagrange polynomial](https://en.wikipedia.org/wiki/Lagrange_polynomial)). If you remember that the blue points ${draw_bullet(colors.blue)} in the top plot above correspond to values of the parameter ${$`\{\frac{1}{4}, \frac{3}{4}\}`}, directly dragging those points to change the shape of the curve can in some cases be a more effective interface than dragging traditional Bézier curve control points like the red ones ${draw_bullet(colors.red)} in the second plot. For example, notice how easily dragging the blue points causes the red control points to move far away from the curve – some shapes of cubic curves are difficult to make with the traditional interface simply because the intermediate control points would need to be too distant. However, dragging the blue points ${draw_bullet(colors.blue)} has the disadvantage that it does not directly involve specifying the tangent direction at the endpoints. This can be a problem when trying to draw a piecewise cubic curve with continuous tangent direction at the joints between segments. `33:Te2b,bernstein_vs_chebyshev = { const svgheight = 335; const svgwidth = 320; const margin = {top:10, bottom: 10, left: 10, right: 10} const pts = chebpts(129); const msvg = d3.select(DOM.svg(svgwidth, svgheight)); const bsvg = d3.select(DOM.svg(svgwidth, svgheight)); const csvg = d3.select(DOM.svg(svgwidth, svgheight)); const vsvg = d3.select(DOM.svg(svgwidth, svgheight)); const my = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const mx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const by = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const bx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const cy = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const cx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const vy = d3.scaleLinear().domain([-1.05, 1.05]).range([svgheight-margin.top, margin.bottom]) const vx = d3.scaleLinear().domain([-1, 1]).range([margin.left, svgwidth-margin.right]) const mline = d3.line().x(d => mx(d[0])).y(d => my(d[1])); const bline = d3.line().x(d => bx(d[0])).y(d => by(d[1])); const cline = d3.line().x(d => cx(d[0])).y(d => cy(d[1])); const vline = d3.line().x(d => vx(d[0])).y(d => vy(d[1])); const mdata = [[1,0,0,0], [0,1,0,0], [.5,0,.5,0], [0,.75,0,.25]]; const bdata = [[10,-15,6,-1], [6,-3,-6,3], [6,3,-6,-3], [10,15,6,1]]; const cdata = [[1,0,0,0], [0,1,0,0], [0,0,1,0], [0,0,0,1]]; const vdata = [[1/6,-2/6,2/6,-1/6], [2/6,-2/6,-2/6,2/6], [2/6,2/6,-2/6,-2/6], [1/6,2/6,2/6,1/6]]; const mcurve = msvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(mdata) .enter().append("path") .attr("d", d => mline(pts.map(p => [p, chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); const bcurve = bsvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(bdata) .enter().append("path") .attr("d", d => bline(pts.map(p => [p, 1/32 * chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); const ccurve = csvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(cdata) .enter().append("path") .attr("d", d => cline(pts.map(p => [p, chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); const vcurve = vsvg.append("g") .attr("fill", "none").attr("stroke-width", 1.5) .selectAll("path") .data(vdata) .enter().append("path") .attr("d", d => vline(pts.map(p => [p, chebeval(d, p)]))) .attr("stroke", (d, i) => d3.schemeCategory10[i]); return html`

Some cubic polynomial bases

${msvg.node()}
Monomial basis

${bsvg.node()}
Bernstein basis

${csvg.node()}
Chebyshev basis

${vsvg.node()}
Chebyshev values basis

` }34:T48c,md` The [\`bez3_to_cheb\`](#bez3_to_cheb) function uses matrix multiplication to convert a cubic Bézier curve with control points ${$`(b_0, b_1, b_2, b_3)`} (usually considered to be a parametric curve with parameter ${$`t \in [0, 1]`}) into coefficients ${$`(c_0, c_1, c_2, c_3)`} of Chebyshev-basis polynomials (for ${$`x`} and ${$`y`}) over the domain ${$`[-1, 1]`}. ${$$` \begin{pmatrix} c_0 \\ c_1 \\ c_2 \\ c_3 \end{pmatrix} = \frac{1}{32} \begin{pmatrix} 10 & 6 & 6 & 10 \\ -15 & -3 & 3 & 15 \\ 6 & -6 & -6 & 6 \\ -1 & 3 & -3 & 1 \\ \end{pmatrix} \begin{pmatrix} b_0 \\ b_1 \\ b_2 \\ b_3 \end{pmatrix} `} The Bézier curve control point coordinates ${$`(b_0, b_1, b_2, b_3)`} are coefficients of the associated polynomial in [Bernstein basis][bern]. The inverse transformation used in [\`cheb3_to_bez\`](#cheb3_to_bez) is: ${$$` \begin{pmatrix} b_0 \\ b_1 \\ b_2 \\ b_3 \end{pmatrix} = \frac{1}{3} \begin{pmatrix} 3 & -3 & 3 & -3 \\ 3 & -1 & -5 & 15 \\ 3 & 1 & -5 & -15 \\ 3 & 3 & 3 & 3 \end{pmatrix} \begin{pmatrix} c_0 \\ c_1 \\ c_2 \\ c_3 \end{pmatrix} `} [bern]: http://mae.engr.ucdavis.edu/~farouki/bernstein.pdf `35:[] 2e:{"title":"Cubic Curves in Chebyshev Basis","cells":[{"id":0,"value":"Title = md`\n# Cubic Curves in Chebyshev Basis\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"md`### ... in progress ... more to come later ...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`* * *`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`\nThe [\\`curve_bez\\`](#curve_bez) view is the canonical source of the state\nof our Bézier curve. From our plots, we mutate it, and then when it changes\nwe propagate the new values through the plots.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof curve_bez = new View([[241,63],[615,250],[14,210],[400,61]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":513,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"bez3_to_cheb = function bez3_to_cheb([b0, b1, b2, b3]) {\n const denom = 1/32;\n const [b00, b01] = b0, [b10, b11] = b1, [b20, b21] = b2, [b30, b31] = b3;\n return [\n [ ( 10*b00 + 6*b10 + 6*b20 + 10*b30) * denom,\n (-15*b00 - 3*b10 + 3*b20 + 15*b30) * denom,\n ( 6*b00 - 6*b10 - 6*b20 + 6*b30) * denom,\n ( -b00 + 3*b10 - 3*b20 + b30) * denom],\n [ ( 10*b01 + 6*b11 + 6*b21 + 10*b31) * denom,\n (-15*b01 - 3*b11 + 3*b21 + 15*b31) * denom,\n ( 6*b01 - 6*b11 - 6*b21 + 6*b31) * denom,\n ( -b01 + 3*b11 - 3*b21 + b31) * denom]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"cheb_to_bez3 = function cheb_to_bez3([c0, c1]) {\n const denom = 1/3;\n const [c00, c01, c02, c03] = c0, [c10, c11, c12, c13] = c1;\n return [\n [ (c00 - c01 + c02 - c03),\n (c10 - c11 + c12 - c13)],\n [ (3*c00 - c01 - 5*c02 + 15*c03) * denom,\n (3*c10 - c11 - 5*c12 + 15*c13) * denom],\n [ (3*c00 + c01 - 5*c02 - 15*c03) * denom,\n (3*c10 + c11 - 5*c12 - 15*c13) * denom],\n [ (c00 + c01 + c02 + c03),\n (c10 + c11 + c12 + c13)]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`\nTo convert from Chebyshev coefficients ↔ values we use a\ndiscrete cosine transform:\n\n${$$`\n\\begin{pmatrix} v_0 \\\\ v_1 \\\\ v_2 \\\\ v_3 \\end{pmatrix} =\n\\frac{1}{2} \\begin{pmatrix}\n 2 & -2 & 2 & -2 \\\\\n 2 & -1 & -1 & 2 \\\\\n 2 & 1 & -1 & -2 \\\\\n 2 & 2 & 2 & 2 \n\\end{pmatrix}\n\\begin{pmatrix} c_0 \\\\ c_1 \\\\ c_2 \\\\ c_3 \\end{pmatrix}\n`}\n\n${$$`\n\\begin{pmatrix} c_0 \\\\ c_1 \\\\ c_2 \\\\ c_3 \\end{pmatrix} =\n\\frac{1}{6} \\begin{pmatrix}\n 1 & 2 & 2 & 1 \\\\\n -2 & -2 & 2 & 2 \\\\\n 2 & -2 & -2 & 2 \\\\\n -1 & 2 & -2 & 1 \n\\end{pmatrix}\n\\begin{pmatrix} v_0 \\\\ v_1 \\\\ v_2 \\\\ v_3 \\end{pmatrix}\n`}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"// coeffs2vals of length 4 but taking 2 lists of coefficients as inputs,\n// returning 4 separate coordinate pairs, and with less overhead.\n// We could save more work by not doing a full matrix multiplication but\n// the code would get more complicated, and this is plenty fast.\ncheb3_to_pts = function cheb3_to_pts([c0, c1]) {\n const [c00, c01, c02, c03] = c0, [c10, c11, c12, c13] = c1;\n return [\n [( c00 - c01 + c02 - c03), ( c10 - c11 + c12 - c13)],\n [( c00 - .5*c01 - .5*c02 + c03), ( c10 - .5*c11 - .5*c12 + c13)],\n [( c00 + .5*c01 - .5*c02 - c03), ( c10 + .5*c11 - .5*c12 - c13)],\n [( c00 + c01 + c02 + c03), ( c10 + c11 + c12 + c13)]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"// vals2coeffs of length 4 but taking 4 coordinate pairs as input\n// and returning a pair of lists of coefficients\npts_to_cheb3 = function pts_to_cheb3([v0, v1, v2, v3]) {\n const denom = 1/6;\n const [v00, v01] = v0, [v10, v11] = v1, [v20, v21] = v2, [v30, v31] = v3;\n return [\n [ ( v00 + 2*v10 + 2*v20 + v30) * denom,\n (-2*v00 - 2*v10 + 2*v20 + 2*v30) * denom,\n ( 2*v00 - 2*v10 - 2*v20 + 2*v30) * denom,\n ( -v00 + 2*v10 - 2*v20 + v30) * denom],\n [ ( v01 + 2*v11 + 2*v21 + v31) * denom,\n (-2*v01 - 2*v11 + 2*v21 + 2*v31) * denom,\n ( 2*v01 - 2*v11 - 2*v21 + 2*v31) * denom,\n ( -v01 + 2*v11 - 2*v21 + v31) * denom]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"md`\nWe can also compose these matrices to go straight from Chebyshev\nvalues to Bézier control points.\n\n${$$`\n\\begin{pmatrix} b_0 \\\\ b_1 \\\\ b_2 \\\\ b_3 \\end{pmatrix} =\n\\frac{1}{9} \\begin{pmatrix}\n 9 & 0 & 0 & 0 \\\\\n -10 & 24 & -8 & 3 \\\\\n 3 & -8 & 24 & -10 \\\\\n 0 & 0 & 0 & 9 \n\\end{pmatrix}\n\\begin{pmatrix} v_0 \\\\ v_1 \\\\ v_2 \\\\ v_3 \\end{pmatrix}\n`}\n\n${$$`\n\\begin{pmatrix} v_0 \\\\ v_1 \\\\ v_2 \\\\ v_3 \\end{pmatrix} =\n\\frac{1}{64} \\begin{pmatrix}\n 64 & 0 & 0 & 0 \\\\\n 27 & 27 & 9 & 1 \\\\\n 1 & 9 & 27 & 27 \\\\\n 0 & 0 & 0 & 64 \n\\end{pmatrix}\n\\begin{pmatrix} b_0 \\\\ b_1 \\\\ b_2 \\\\ b_3 \\end{pmatrix}\n`}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"pts_to_bez3 = function pts_to_bez3([v0, v1, v2, v3]) {\n const denom = 1/9;\n const [v00, v01] = v0, [v10, v11] = v1, [v20, v21] = v2, [v30, v31] = v3;\n return [\n [v00, v01],\n [ (-10*v00 + 24*v10 - 8*v20 + 3*v30)*denom,\n (-10*v01 + 24*v11 - 8*v21 + 3*v31)*denom],\n [ (3*v00 - 8*v10 + 24*v20 - 10*v30)*denom,\n (3*v01 - 8*v11 + 24*v21 - 10*v31)*denom],\n [v30, v31]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"bez3_to_pts = function bez3_to_pts([b0, b1, b2, b3]) {\n const denom = 1/64;\n const [b00, b01] = b0, [b10, b11] = b1, [b20, b21] = b2, [b30, b31] = b3;\n return [\n [b00, b01],\n [ (27*b00 + 27*b10 + 9*b20 + b30)*denom,\n (27*b01 + 27*b11 + 9*b21 + b31)*denom],\n [ (b00 + 9*b10 + 27*b20 + 27*b30)*denom,\n (b01 + 9*b11 + 27*b21 + 27*b31)*denom],\n [b30, b31]];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`* * *`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"import {evaluate as chebeval, diff, cumsum, sum, coeffs2vals, vals2coeffs, chebpts} from \"@jrus/cheb\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"import {math_css, $, $$} with {$css as $css} from \"@jrus/misc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"$$css = html`${math_css}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"colors = ({\n \"blue\": \"#08e\",\n \"red\": \"#d03\",\n \"black\": \"#000\",\n \"palegray\": \"#fafafc\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"draw_bullet = function draw_bullet(color) {\n const svg = d3.select(DOM.svg(10, 10));\n svg.append(\"circle\")\n .attr(\"fill\", color).attr(\"r\", 4)\n .attr(\"cx\", 5).attr(\"cy\", 5);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"clamp = function clamp(x, min, max) {\n return (x < min) ? min : (x > max) ? max : x;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}