30:T461,{ const context = DOM.context2d(210, 210); const colors = ["red", "green", "yellow", "cyan", "white", "black"] .slice(0, points.length) .map((d) => d3.rgb(d)); for (let x = 0; x < 210; x++) { for (let y = 0; y < 210; y++) { const k = x + 210 * y; if (isNaN(A[0][k])) continue; context.fillStyle = d3.rgb( d3.sum(colors, (d, i) => d.r * A[i][k]), d3.sum(colors, (d, i) => d.g * A[i][k]), d3.sum(colors, (d, i) => d.b * A[i][k]) ); context.fillRect(x, y, 1, 1); } } context.scale(2, 2); context.beginPath(); context.moveTo(...points[points.length - 1]); for (const p of points) context.lineTo(...p); context.closePath(); context.lineWidth = 1; context.strokeStyle = "white"; context.stroke(); for (let i = 0; i < points.length; i++) { context.beginPath(); context.fillStyle = "white"; context.arc(...points[i], 4, 0, 2 * Math.PI); context.fill(); context.beginPath(); context.fillStyle = colors[i]; context.arc(...points[i], 3, 0, 2 * Math.PI); context.fill(); } return context.canvas; }31:T624,function getWeights(points, [x, y]) { // 1. center on [x, y] const n = points.length; const s = points.map(([xi, yi]) => [xi - x, yi - y]); // 2. compute the cross product of each triangle [0, s[i], s[i+1]] (A2, double area) // and their dot product (D) const A2 = new Float32Array(n); const D = new Float32Array(n); for (let i = 0; i < n; i++) { const i1 = (i + 1) % n; const p = s[i]; const q = s[i1]; A2[i] = p[0] * q[1] - p[1] * q[0]; D[i] = p[0] * q[0] + p[1] * q[1]; } // 3. compute the weight of each vertex const weights = new Float32Array(n); for (let i = 0; i < n; i++) { const i_ = (i - 1 + n) % n; const i1 = (i + 1) % n; const p = s[i]; const q = s[i1]; const q_ = s[i_]; const r = Math.hypot(...p); // Is s[i] the point? if (r < 1e-6) { weights[i] = INF; continue; } // s[i] and s[i+1] collinear? const r1 = Math.hypot(...q); const coll = Math.abs(A2[i]) === 0; if (coll && D[i] < 0) { weights[i] = INF * (r1 / (r + r1)); continue; } const r_1 = Math.hypot(...s[i_]); // s[i] and s[i-1] collinear? const coll_ = Math.abs(A2[i_]) === 0; if (coll_ && D[i_] < 0) { weights[i] = INF * (r_1 / (r + r_1)); continue; } // normal case: difference of the half-tangents weights[i] = (coll ? 0 : (r1 - D[i] / r) / A2[i]) + (coll_ ? 0 : (r_1 - D[i_] / r) / A2[i_]); } // 3. normalize const S = d3.sum(weights); for (let i = 0; i < n; i++) weights[i] /= S; return weights; }32:[] 2e:{"title":"Mean value coordinates","cells":[{"id":0,"value":"# Mean value coordinates\n\nReferences: Michael Floater, 2003 ([PDF](https://sci-hub.se/https://www.sciencedirect.com/science/article/abs/pii/S0167839603000025)); Kai Hormann & Floater, 2006 ([PDF](https://sci-hub.se/https://dl.acm.org/doi/10.1145/1183287.1183295)).","pinned":false,"hidden":false,"mode":"md"},{"id":879,"value":"The first chart shows the weight of each vertex (red) inside and outside the polygon (white):","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"htl.html`

${points.map((point, k) => {\n const canvas = heatmap(\n A[k].map((d) => (d < -0.09 ? -0.09 : d > 1.1 ? 1.1 : d)),\n {\n width: 210,\n color: d3.interpolateTurbo,\n contours: \"white\",\n extent: [-0.1, 1.1],\n dither: false\n }\n );\n const context = canvas.getContext(\"2d\");\n context.scale(2, 2);\n context.beginPath();\n context.moveTo(...points[points.length - 1]);\n for (const p of points) context.lineTo(...p);\n context.closePath();\n context.lineWidth = 2;\n context.stroke();\n\n context.fillStyle = \"red\";\n context.beginPath();\n context.arc(...point, 3, 0, 2 * Math.PI);\n context.fill();\n return Object.assign(canvas, { style: \"margin: 10px\" });\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":706,"value":"viewof a = Inputs.range([0, 100], { step: 1, value: 45 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"Second chart interpolates a color that is specified on each of the ${points.length} vertices, according to the weights:","pinned":false,"hidden":false,"mode":"md"},{"id":610,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"Third chart shows which of the vertices dominates:","pinned":false,"hidden":false,"mode":"md"},{"id":1263,"value":"{\n const context = DOM.context2d(210, 210);\n const colors = [\"red\", \"green\", \"yellow\", \"cyan\", \"#ddd\", \"black\"]\n .slice(0, points.length)\n .map((d) => d3.rgb(d));\n\n for (let x = 0; x < 210; x++) {\n for (let y = 0; y < 210; y++) {\n const k = x + 210 * y;\n if (isNaN(A[0][k])) continue;\n context.fillStyle = colors[d3.greatestIndex(A, (d) => d[k])];\n context.fillRect(x, y, 1, 1);\n }\n }\n\n context.scale(2, 2);\n context.beginPath();\n context.moveTo(...points[points.length - 1]);\n for (const p of points) context.lineTo(...p);\n context.closePath();\n context.lineWidth = 1;\n context.strokeStyle = \"white\";\n context.stroke();\n\n for (let i = 0; i < points.length; i++) {\n context.beginPath();\n context.fillStyle = \"white\";\n context.arc(...points[i], 4, 0, 2 * Math.PI);\n context.fill();\n context.beginPath();\n context.fillStyle = colors[i];\n context.arc(...points[i], 3, 0, 2 * Math.PI);\n context.fill();\n }\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"*Note to self:* this is inherently parallelizable, and should be done on the GPU.\n\n----\n","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"points = [\n [5, 100],\n [5, 5],\n [45, 5],\n [a, 100 - a],\n [100, 55],\n [100, 100]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1024,"value":"INF = 1e36","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"check = (p) => {\n const w = getWeights(points, p);\n return [\n d3.sum(points, (p, k) => p[0] * w[k]),\n d3.sum(points, (p, k) => p[1] * w[k])\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"A = {\n const p = 210;\n const A = d3\n .range(points.length)\n .map((i) => Float32Array.from({ length: p * p }).fill(NaN));\n\n for (let i = 0; i < p; i++) {\n for (let j = 0; j < p; j++) {\n const x = i / 2;\n const y = j / 2;\n const W = getWeights(points, [x, y]);\n for (let k = 0; k < points.length; k++)\n A[k][i + p * j] = W.contains ? Math.abs(W[k]) : W[k];\n }\n }\n return A;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { heatmap } from \"@fil/heatmap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { acos, tan } from \"@fil/math\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}