31:T7c6,viewof view = { const svg = d3.select(DOM.svg(450, 350)) const a = mutable ABC[0] const b = mutable ABC[1] const c = mutable ABC[2] const p = mutable P svg.call(fill_texture) svg.append('defs').node().appendChild(html` `) const triangle = svg.append('path').attr('class', 'triangle').attr('stroke', 'none') const edges = svg.selectAll('path.edge').data([[a,b],[a,c],[b,c]]) .enter() .append('path').attr('class', 'edge') .attr('stroke-width', 1.5).attr('fill', 'none') .attr('d', line) function redraw_triangle () { const a = mutable ABC[0] const b = mutable ABC[1] const c = mutable ABC[2] triangle.attr('d', line([a, b, c, a])) edges.data([[a,b],[a,c],[b,c]]) .attr('d', line) } redraw_triangle() svg.append('g').attr('class', 'proj_layer') svg.selectAll('circle.pt').data([a,b,c]) .enter() .append('circle').attr('r', 5).attr('fill', '#000') .attr('what', P => console.log(P)) .attr('cx', P => P[0]).attr('cy', P => P[1]) .attr('class', P => 'pt ' + P[2]) svg.selectAll('text').data([a,b,c]) .enter() .append('text').text(P => P[2]).attr('class', P => P[2]).attr('font-family', 'monospace') .attr('x', P => P[0]).attr('y', P => P[1]-15) svg.append('circle').attr('class', 'P').attr('r', 8) .attr('fill', '#fff').attr('stroke', '#000').attr('stroke-width', 2) .attr('cx', p[0]).attr('cy', p[1]) svg.append('text').attr('class', 'P').text('P').attr('font-family', 'monospace') .attr('x', p[0]).attr('y', p[1]-15) const view = d3.select(html`

${svg.node()}

`) view.node().value = view view.redraw_triangle = redraw_triangle return view.node() }32:T41b,md`How to we go from the equation of a point ${tex`P`} in terms of barycentric coordinates, ${tex.block`P = A + u(C - A) + v(B - A)`} …to ${tex`(u,v)`} in terms of ${tex`P`}? Writing ${tex`x`} for ${tex`x-A`} (for each ${tex`x = b,c,p`}), we can transform this equation to the more manipulable: ${tex.block`p = u\,c + v\,b`} We have two unknowns (${tex`u`} and ${tex`v`}) so we need two equations to solve for them. Dot both sides by ${tex`c`} to get one and dot both sides by ${tex`b`} to get a second. ${tex.block`\begin{aligned} p \cdot c &= (u\, c + v\, b) \cdot c = u(c\cdot c) + v(b \cdot c) \\ p \cdot b &= (u\, c + v\, b) \cdot b = u(c\cdot b) + v(b \cdot b) \end{aligned}`} Now we have two equations and two unknowns, so we can solve one equation for one unknown, and put that into second, i.e. we first rewrite the first equation as ${tex`u = f(v,p,b,c)`}, and then substitute that into the second equation and rewrite it as ${tex`v = g(p,b,c)`}, and then put that back into the first to get some ${tex`u = h(p,b,c)`}.`33:T870,b ? md`

Solving the first for ${tex`u`} gives: ${tex.block`u = \frac{p\cdot c - v(b\cdot c)}{c\cdot c}`} Plugging that into the second equation: ${tex.block`\begin{aligned} p\cdot b &= \frac{p\cdot c-v(b\cdot c)}{c\cdot c}(c\cdot b) + v(b\cdot b) \\[1em] &= \frac{(p\cdot c)(c\cdot b)}{c\cdot c}-\frac{(b\cdot c)(b\cdot c)}{c\cdot c}v + (b\cdot b)v \\[1em] &= \frac{(p\cdot c)(c\cdot b)}{c\cdot c} + \left(\frac{(b\cdot b)(c\cdot c) - (b\cdot c)(b\cdot c)}{c\cdot c}\right)v \end{aligned}`} Then solving for ${tex`v`}: ${tex.block`\begin{aligned} v &= \left(p\cdot b - \frac{(p\cdot c)(c\cdot b)}{c\cdot c}\right) \left(\frac{c\cdot c}{(b\cdot b)(c\cdot c) - (b\cdot c)(b\cdot c)}\right) \\[1em] &= \left(\frac{(p\cdot b)(c\cdot c) - (p\cdot c)(c\cdot b)}{c\cdot c}\right) \left(\frac{c\cdot c}{(b\cdot b)(c\cdot c) - (b\cdot c)(b\cdot c)}\right) \\[1em] &= \frac{(p\cdot b)(c\cdot c)(c\cdot c) - (p\cdot c)(c\cdot b)(c\cdot c)}{(b\cdot b)(c\cdot c)(c\cdot c) - (b\cdot c)(b\cdot c)(c\cdot c)} \\[1em] &= \frac{(p\cdot b)(c\cdot c) - (p\cdot c)(c\cdot b)}{(b\cdot b)(c\cdot c) - (b\cdot c)(b\cdot c)} \end{aligned}`} And then for ${tex`u`}: ${tex.block`\begin{aligned} u &= \frac{p\cdot c - v(b\cdot c)}{c\cdot c} \\[1em] &= \frac{p\cdot c}{c\cdot c}-\frac{b\cdot c}{c\cdot c}v \\[1em] &= \frac{p\cdot c}{c\cdot c}-\frac{(b\cdot c)(p\cdot b)(c\cdot c) - (b\cdot c)(p\cdot c)(c\cdot b)}{(c\cdot c)(b\cdot b)(c\cdot c) - (c\cdot c)(b\cdot c)(b\cdot c)} \\[1em] &= \frac{(p\cdot c)(b\cdot b)(c\cdot c) - (p\cdot c)(b\cdot c)(b\cdot c) - (b\cdot c)(p\cdot b)(c\cdot c) + (b\cdot c)(p\cdot c)(c\cdot b)}{(c\cdot c)(b\cdot b)(c\cdot c) - (c\cdot c)(b\cdot c)(b\cdot c)} \\[1em] &= \frac{(p\cdot c)(b\cdot b)(c\cdot c) - (b\cdot c)(p\cdot b)(c\cdot c)}{(c\cdot c)(b\cdot b)(c\cdot c) - (c\cdot c)(b\cdot c)(b\cdot c)} \\[1em] &= \frac{(p\cdot c)(b\cdot b) - (b\cdot c)(p\cdot b)}{(c\cdot c)(b\cdot b) - (b\cdot c)(b\cdot c)} \end{aligned}`}` : md`(If you want to see all of the messy solving equations, use the switch above.)

`34:T609,upd = { const [u,v] = uv // display const fmt = d3.format('.4'); const ems = 'font-family: serif; font-size: 14px; color: #999;'; const rej = text => `${text}` view.select('div.calc').html(html`

P's position expressed in terms of (u,v)
P = A + u(C−A) + v(B−A)

Calculated values for (u,v)
    u = ${fmt(u)} ${u>=0 ? '≥ 0' : rej('< 0')}
    v = ${fmt(v)} ${v>=0 ? '≥ 0' : rej('< 0')}
1-u-v = ${fmt(1-u-v)} ${1-u-v>=0 ? '≥ 0' : rej('< 0')}

`.outerHTML) const ab = add(A, smul(v, sub(B, A))); const ac = add(A, smul(u, sub(C, A))); const proj = view.select('g.proj_layer').selectAll('path.proj') .data([ [A, ac, 'u'], [A, ab, 'v'], [ab, P, 'u'], [ac, P, 'v'], ]); proj.enter() .append('path').attr('class', 'proj') .attr('stroke-width', 3) .merge(proj).attr('marker-end', `url('#arrow')`).attr('fill', '#c00') .attr('d', line).attr('stroke', d => colors[d[2]]) view.select('path.triangle').attr('fill', intriangle ? fill_texture_url : '#fff') view.selectAll('path.edge').attr('stroke-dasharray', intriangle ? 'none' : '2 3').attr('stroke', intriangle ? '#444' : '#aaa') return md`**[view updating code here]**`; }35:T1604,textures = { var t=function(){return(Math.random().toString(36)+"00000000000000000").replace(/[^a-z]+/g,"").slice(0,5)};return{circles:function(){var r=20,n="",e=2,a=!1,u="#343434",i="#343434",c=0,l=t(),o=function(t){var o=t.append("defs").append("pattern").attr("id",l).attr("patternUnits","userSpaceOnUse").attr("width",r).attr("height",r);n&&o.append("rect").attr("width",r).attr("height",r).attr("fill",n),o.append("circle").attr("cx",r/2).attr("cy",r/2).attr("r",e).attr("fill",u).attr("stroke",i).attr("stroke-width",c),a&&[[0,0],[0,r],[r,0],[r,r]].forEach(function(t){o.append("circle").attr("cx",t[0]).attr("cy",t[1]).attr("r",e).attr("fill",u).attr("stroke",i).attr("stroke-width",c)})};return o.heavier=function(t){return 0===arguments.length?e*=2:e*=2*t,o},o.lighter=function(t){return 0===arguments.length?e/=2:e/=2*t,o},o.thinner=function(t){return 0===arguments.length?r*=2:r*=2*t,o},o.thicker=function(t){return 0===arguments.length?r/=2:r/=2*t,o},o.background=function(t){return n=t,o},o.size=function(t){return r=t,o},o.complement=function(t){return a=0===arguments.length||t,o},o.radius=function(t){return e=t,o},o.fill=function(t){return u=t,o},o.stroke=function(t){return i=t,o},o.strokeWidth=function(t){return c=t,o},o.id=function(t){return 0===arguments.length?l:(l=t,o)},o.url=function(){return"url(#"+l+")"},o},lines:function(){var r=20,n="#343434",e=2,a="",u=t(),i=["diagonal"],c="auto",l=function(t){var n=r;switch(t){case"0/8":case"vertical":return"M "+n/2+", 0 l 0, "+n;case"1/8":return"M "+n/4+",0 l "+n/2+","+n+" M "+-n/4+",0 l "+n/2+","+n+" M "+3*n/4+",0 l "+n/2+","+n;case"2/8":case"diagonal":return"M 0,"+n+" l "+n+","+-n+" M "+-n/4+","+n/4+" l "+n/2+","+-n/2+" M "+.75*n+","+5/4*n+" l "+n/2+","+-n/2;case"3/8":return"M 0,"+.75*n+" l "+n+","+-n/2+" M 0,"+n/4+" l "+n+","+-n/2+" M 0,"+5*n/4+" l "+n+","+-n/2;case"4/8":case"horizontal":return"M 0,"+n/2+" l "+n+",0";case"5/8":return"M 0,"+-n/4+" l "+n+","+n/2+"M 0,"+n/4+" l "+n+","+n/2+" M 0,"+3*n/4+" l "+n+","+n/2;case"6/8":return"M 0,0 l "+n+","+n+" M "+-n/4+","+.75*n+" l "+n/2+","+n/2+" M "+3*n/4+","+-n/4+" l "+n/2+","+n/2;case"7/8":return"M "+-n/4+",0 l "+n/2+","+n+" M "+n/4+",0 l "+n/2+","+n+" M "+3*n/4+",0 l "+n/2+","+n;default:return"M "+n/2+", 0 l 0, "+n}},o=function(t){var o=t.append("defs").append("pattern").attr("id",u).attr("patternUnits","userSpaceOnUse").attr("width",r).attr("height",r);a&&o.append("rect").attr("width",r).attr("height",r).attr("fill",a),i.forEach(function(t){o.append("path").attr("d",l(t)).attr("stroke-width",e).attr("shape-rendering",c).attr("stroke",n).attr("stroke-linecap","square")})};return o.heavier=function(t){return 0===arguments.length?e*=2:e*=2*t,o},o.lighter=function(t){return 0===arguments.length?e/=2:e/=2*t,o},o.thinner=function(t){return 0===arguments.length?r*=2:r*=2*t,o},o.thicker=function(t){return 0===arguments.length?r/=2:r/=2*t,o},o.background=function(t){return a=t,o},o.size=function(t){return r=t,o},o.orientation=function(){for(var t=arguments.length,r=Array(t),n=0;n= 0) && (v >= 0) && (u + v < 1)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"viewof b = toggle({ title: 'Show the messy details, please!' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"md`Finally, we end up with: ${tex.block`\n u = \\frac{(p\\cdot c)(b\\cdot b) - (b\\cdot c)(p\\cdot b)}{(c\\cdot c)(b\\cdot b) - (b\\cdot c)(b\\cdot c)} \\qquad\n v = \\frac{(p\\cdot b)(c\\cdot c) - (p\\cdot c)(c\\cdot b)}{(b\\cdot b)(c\\cdot c) - (b\\cdot c)(b\\cdot c)}\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"md`The rest is just the implementation of the interactive visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"{\n const p = view.select('circle.P').style('cursor', 'pointer')\n .call(d3.drag().on('drag', function () {\n const x = constrain(d3.event.x, 10, 450-10);\n const y = constrain(d3.event.y, 10, 350-10);\n p.attr('cx', x).attr('cy', y)\n view.select('text.P').attr('x', x).attr('y', y-15)\n mutable P = [x, y, 'P']\n }))\n \n view.selectAll('circle.A, circle.B, circle.C').style('cursor', 'pointer')\n .call(d3.drag().on('drag', function (d) {\n const x = constrain(d3.event.x, 10, 450-10);\n const y = constrain(d3.event.y, 10, 350-10);\n d3.select(this).attr('cx', x).attr('cy', y)\n view.select('text.' + d[2]).attr('x', x).attr('y', y-15)\n d[0] = x\n d[1] = y\n mutable ABC = mutable ABC\n view.redraw_triangle()\n }))\n \n return md`**[code making the points draggable here]**`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"mutable P = [200, 150, 'P']","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"A = ABC[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"B = ABC[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"C = ABC[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"mutable ABC = [\n [59, 220, 'A'],\n [180, 60, 'B'],\n [410, 310, 'C'],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"bary = ([u,v]) => add(A, add( smul(u, sub(C, A)), smul(v, sub(B, A)) ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"dot = ([a,b],[d,e]) => a*d + b*e","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"smul = (s, [a,b]) => [s*a, s*b]","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"add = ([a,b],[d,e]) => [a+d,b+e]","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"sub = ([a,b],[d,e]) => [a-d,b-e]","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"constrain = (x, min, max) => Math.max(Math.min(x, max), min)","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"colors = ({\n u: '#4cc13a', // green\n v: '#3471d3', // blue\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"fill_texture = textures.circles()\n .lighter().thicker().fill('#999')","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"bug_desc = md`Now using \\`fill_texture_url\\` instead of \\`fill_texture.url()\\` in the cell labeled **[view updating code here]**, above.\n\nSee [https://talk.observablehq.com/t/url-references-within-svgs/666].`","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"fill_texture_url = 'url(' + DOM.uid().href.replace(/#[a-zA-Z0-9\\-]*$/, fill_texture.url().match(/^url\$(#.*)\$$/)[1]) + ')'","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"fill_texture.url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"html`[styling]