31:T6a7,{ const canvasHeight = 250; const svg = d3.select(DOM.svg(canvasWidth, canvasHeight)); const P = [ [canvasWidth / 4.5, (6 * canvasHeight) / 9], [(6 * canvasWidth) / 9, (6 * canvasHeight) / 9], [canvasWidth / 2, canvasHeight / 8] ]; // end Points const colors = endPointColors2D.map(hex2rgb); //[[1,0,0],[0,1,0],[0,0,1]]; svg .selectAll('line') .data([0, 1, 2]) .join("line") .attr("x1", i => P[i][0]) .attr("x2", i => P[(i + 1) % 3][0]) .attr("y1", i => P[i][1]) .attr("y2", i => P[(i + 1) % 3][1]) .style("stroke", "gray") .style("stroke-width", "5"); svg .selectAll("circle") .data(P) .join("circle") .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", 10) .style("stroke", "black") .style("fill", (d, i) => rgb2hex(colors[i])); svg .append("circle") .attr( "cx", P[0][0] * (1 - param2d.alpha - param2d.beta) + P[1][0] * param2d.alpha + P[2][0] * param2d.beta ) .attr( "cy", P[0][1] * (1 - param2d.alpha - param2d.beta) + P[1][1] * param2d.alpha + P[2][1] * param2d.beta ) .attr("r", 15) .style("stroke", "black") .style( "fill", rgb2hex([ colors[0][0] * (1 - param2d.alpha - param2d.beta) + colors[1][0] * param2d.alpha + colors[2][0] * param2d.beta, colors[0][1] * (1 - param2d.alpha - param2d.beta) + colors[1][1] * param2d.alpha + colors[2][1] * param2d.beta, colors[0][2] * (1 - param2d.alpha - param2d.beta) + colors[1][2] * param2d.alpha + colors[2][2] * param2d.beta ]) ); return svg.node(); }32:[] 2f:{"title":"Barycentric Coordinates","cells":[{"id":0,"value":"md`# Barycentric Coordinates`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`### of a point on a line.\nTwo points define a line segment and also define an infinite line that extends beyond the endpoints. \nGiven two endpoints P0 and P1 of a line segment, any point P on the line can be expressed as *affine combination* of the endpoints as \nP = (1-*α*)*P0 + *α**P1 \nwhere *α* may be considered as the Barycentric Coordinate of the point with respect to line segment defined by P0 and P1. (Note that the coordinates of P will change if any or both the endpoints of the line segment change.) \n*α* can take any scalar value, can be positive or negative. \nHere are some important properties of *α*: \n - *α*=0: P = P0 \n - *α*=1: P = P1 \n - 0 < *α* < 1: Point is on the segment \n - Otherwise: Point is outside the segment.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"viewof endPointColors1D = columns([\n color({\n value: \"#ffff00\",\n title:\"Vertex0: Color\"\n }),\n color({\n value: \"#00ffff\",\n title:\"Vertex1: Color\"\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof param1d = columns({\n alpha: Inputs.range([-0.5,1.5],{\n step: 0.1, \n value: 0, \n label: \"alpha\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"{\n const height = 35;\n const svg = d3.select(DOM.svg(canvasWidth, height));\n const y = height/2;\n const P = [canvasWidth/4,3*canvasWidth/4]; // end Points\n \n const colors = endPointColors1D.map(hex2rgb);//[[1,1,0],[0,1,1]];\n svg\n .append(\"line\")\n .attr(\"x1\", canvasWidth/4)\n .attr(\"x2\", 3*canvasWidth/4)\n .attr(\"y1\", y)\n .attr(\"y2\", y)\n .style(\"stroke\", \"gray\")\n .style(\"stroke-width\",\"5\");\n\n svg.selectAll(\"circle\")\n .data(P)\n .join(\"circle\")\n .attr(\"cx\", d=>d)\n .attr(\"cy\", y)\n .attr(\"r\",10)\n .style(\"stroke\", \"black\")\n .style(\"fill\",(d,i)=>rgb2hex(colors[i])); \n \n svg.append(\"circle\")\n .attr(\"cx\", P[0]*(1-param1d.alpha)+P[1]*param1d.alpha)\n .attr(\"cy\", y)\n .attr(\"r\",15)\n .style(\"stroke\", \"black\")\n .style(\"fill\",rgb2hex([\n colors[0][0]*(1-param1d.alpha)+colors[1][0]*param1d.alpha,\n colors[0][1]*(1-param1d.alpha)+colors[1][1]*param1d.alpha,\n colors[0][2]*(1-param1d.alpha)+colors[1][2]*param1d.alpha\n ]));\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"md`## Barycentric Coordinates of a point on a plane.\nThree points define a triangle and also define an infinite plane extending beyond the triangle. \nGiven three points P0, P1 and P2 on a plane, any point P on the plane can be expressed as *affine combination* of the points as \nP = (1-*α*-*β*)*P0 + *α**P1 + *β**P2 \nwhere (*α*, *β*) may be considered as the Barycentric Coordinates of the point P with respect to P0, P1 and P2. (Note that the coordinates of P will change if the position of the three basis points change.) \n*α* and *β* can take any value, can be positive or negative. \nHere are some important properties of (*α*, *β*): \n - (*α*, *β*)=(0,0): P = P0, \n - (*α*, *β*)=(1,0): P = P1, \n - (*α*, *β*)=(0,1): P = P2,\n - *α* = 0, 0 < *β* < 1: P is on the edge P0_P2,\n - 0 < *α* < 1, *β* = 0 : P is on the edge P0_P1,\n - 0 < *α* < 1, 0 < *β* < 1, 0 < *α*+*β* < 1: P is inside the triangle\n - otherwise: P is outside the triangle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof endPointColors2D = columns([\n color({\n value: \"#ff0000\",\n title:\"Vertex0: Color\"\n }),\n color({\n value: \"#00ff00\",\n title:\"Vertex1: Color\"\n }),\n color({\n value: \"#0000ff\",\n title:\"Vertex2: Color\"\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof param2d = columns({\n alpha: Inputs.range([-0.5, 1.5], {\n step: 0.1,\n value: 0,\n label: \"α\"\n }),\n beta: Inputs.range([-0.5, 1.5], {\n step: 0.1,\n value: 0,\n label: \"β\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md `### TODO: of a point on a tetrahedron`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"canvasWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"canvasHeight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md `## Useful Functions`","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"hex2rgb = hex => (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(l => parseInt(hex.length%2 ? l+l : l, 16)/255)","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"rgb2hex([2,0,0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"rgb2hex = (rgb)=>{\n if (rgb.some(d=>d<0||d>1)) return '#ffffff';\n else{ return '#'+\n rgb.map(x => {\n const X = Math.round(x*255);\n if (X > 255 || X < 0) return 'ff'\n else{\n const hex = X.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n }\n }).join('');\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"mouse = canvas => Generators.observe(notify => {\n const update = mouse => (/*canvas.update(mouse),*/ notify(mouse));\n const moved = event => update({x: event.clientX, y: event.clientY});\n canvas.addEventListener(\"mousemove\", moved);\n //update({x: window.innerWidth / 2, y: window.innerHeight / 2});\n return () => canvas.removeEventListener(\"mousemove\", moved);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md `## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}