31:Tb63,viewof palette = { const width = 500, height = 500; const ctx = DOM.context2d(width, height, 1); let imgData = ctx.getImageData(0, 0, width, height); const setImgData = () => { const colors = rgb.value; if (gradientType == "3 colors") { colorInterpolationImgDataTriangle( imgData, colors.c3, colors.c4, colors.c1, mode.value ); } else if (gradientType == "4 colors") { colorInterpolationImgData( imgData, colors.c1, colors.c2, colors.c3, colors.c4, mode.value ); } else { ctx.drawImage(pickImageFile, 0, 0, width, height); imgData = ctx.getImageData(0, 0, width, height); } }; setImgData(); let vertices = [ [width * 0.1, height * 0.9], [width * 0.9, height * 0.9], [width * 0.5, height * 0.1] ]; let points; const container = htl.html`

`; Object.assign(container.style, { maxWidth: width + "px", background: "gray", padding: "10px" }); container.append(ctx.canvas); container.value = null; const drawImageData = () => ctx.putImageData(imgData, 0, 0); ctx.canvas.drawImageData = drawImageData; const drawInteractionWidgets = () => { ctx.strokeStyle = "black"; ctx.setLineDash([8, 8]); ctx.lineWidth = 1; ctx.beginPath(); for (let p of points.slice(0, 3)) ctx.lineTo(...p); ctx.closePath(); ctx.stroke(); for (let [i, j] of [ [0, 4], [1, 5], [2, 6] ]) { ctx.beginPath(); ctx.lineTo(...points[i]); ctx.lineTo(...points[j]); ctx.stroke(); } ctx.setLineDash([]); for (let p of points.slice(0, 4)) { ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(...p, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(...p, 3, 0, Math.PI * 2); ctx.fill(); } const palette = []; for (let [x, y] of points) { ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI * 2); ctx.stroke(); const index = (Math.round(x) + Math.round(y) * width) * 4; let [r, g, b] = imgData.data.slice(index, index + 3); palette.push(`rgb(${r},${g},${b})`); } container.value = palette; }; ctx.canvas.drawInteractionWidgets = drawInteractionWidgets; const change = (ctx, pts) => { points = pts; drawImageData(); drawInteractionWidgets(); container.dispatchEvent(new Event("input", { bubbles: true })); }; triangleInteraction(ctx, vertices, change); const gradientChangeCallback = () => { setImgData(); change(ctx, points); }; rgb.addEventListener("input", gradientChangeCallback); mode.addEventListener("input", gradientChangeCallback); const curveParmCallback = () => { change(ctx, points); }; return container; }32:T4c1,function colorInterpolationImgDataTriangle( imgData, cleft, cright, ctop, mode = "rgb" ) { const { data, width, height } = imgData; const rgb = culori.converter("rgb"); const nx = width - 1; const ny = height - 1; const interpolatorLeft = culori.interpolate([ctop, cleft], mode); const interpolatorRight = culori.interpolate([ctop, cright], mode); for (let j = 0; j < height; j++) { const u = j / ny; const interpolator = culori.interpolate( [interpolatorLeft(u), interpolatorRight(u)], mode ); const ileft = Math.floor(width / 2 - (j * width) / 2 / height); const iright = Math.ceil(width / 2 + (j * width) / 2 / height); const segLen = iright - ileft - 1; for (let i = 0; i <= nx; i++) { const idx = (i + j * width) * 4; data[idx] = 0; data[idx + 1] = 0; data[idx + 2] = 0; data[idx + 3] = 0; } for (let i = ileft; i < iright; i++) { const v = (i - ileft) / segLen; const color = interpolator(v); const { r, g, b } = rgb(color); const idx = (i + j * width) * 4; data[idx] = r * 255; data[idx + 1] = g * 255; data[idx + 2] = b * 255; data[idx + 3] = 255; } } }33:T62f,function triangleInteraction(ctx, vertices, change) { const canvas = ctx.canvas, width = canvas.width, height = canvas.height; let baryCoords = [1 / 3, 1 / 3, 1 / 3]; let center = barycentricToCartesian(baryCoords, ...vertices); let points; const callChange = () => { const edgePoints = [ vec2.lineIntersection([], vertices[0], center, vertices[1], vertices[2]), vec2.lineIntersection([], vertices[1], center, vertices[2], vertices[0]), vec2.lineIntersection([], vertices[2], center, vertices[0], vertices[1]) ]; points = [...vertices, center, ...edgePoints]; change(ctx, points); }; callChange(); let selected = -1; let mouse; // Disable context menu canvas.oncontextmenu = () => { return false; }; canvas.onmousedown = function (event) { mouse = [event.offsetX, event.offsetY]; selected = -1; let i = 0; for (let p of [...vertices, center]) { if (vec2.dist(mouse, p) < 8) { selected = i; break; } i++; } }; canvas.onmousemove = function (event) { if (selected < 0) return; let newMouse = [event.offsetX, event.offsetY]; let v = vec2.sub([], newMouse, mouse); if (selected == 3) { vec2.add(center, center, v); baryCoords = cartesianToBarycentric(center, ...vertices); } else { vec2.add(vertices[selected], vertices[selected], v); center = barycentricToCartesian(baryCoords, ...vertices); } mouse = newMouse; callChange(); }; canvas.onmouseup = function (event) { selected = -1; }; }34:[{"id":"ba557faf998dbc86aa3861a9e24d5bdd74da09da4495ba1b4347b884bbc95982dc9e99374e226732b5b98614a69e65f1271c52f206820fed82e990315eba02a1","href":"https://static.observableusercontent.com/files/ba557faf998dbc86aa3861a9e24d5bdd74da09da4495ba1b4347b884bbc95982dc9e99374e226732b5b98614a69e65f1271c52f206820fed82e990315eba02a1","name":"testimg.svg","type":"image/svg+xml","lastModified":1709750906436.489,"size":32886},{"id":"bcded1b7a78fbdf0a3cd575b74eabd1fd9d447648c832bed4b00488b45e1f790fceff5c5ffcbf9c5df1b28ebd7ecc5ef17d01c32930980540311ab0c3b18d5c6","href":"https://static.observableusercontent.com/files/bcded1b7a78fbdf0a3cd575b74eabd1fd9d447648c832bed4b00488b45e1f790fceff5c5ffcbf9c5df1b28ebd7ecc5ef17d01c32930980540311ab0c3b18d5c6","name":"testimg@1.svg","type":"image/svg+xml","lastModified":1709751061503.735,"size":1407004},{"id":"9a4e0074a603724679149f4798ecae676cfaa7929b2b71c7d1b6cbf49f34b43b6e48889bb7447bccddebe1825235ff052e5b55d648a3a092da644f6cf5071384","href":"https://static.observableusercontent.com/files/9a4e0074a603724679149f4798ecae676cfaa7929b2b71c7d1b6cbf49f34b43b6e48889bb7447bccddebe1825235ff052e5b55d648a3a092da644f6cf5071384","name":"testimg@2.svg","type":"image/svg+xml","lastModified":1709751739284.628,"size":21783},{"id":"aa2b9db126e4344982e814e006c5ad15d19eaf2058f2501600c3cbb4b9fd3c85ad636ccf0c192719c74551df99ab63a1dade795b4723cd3de5a624ae40ceddad","href":"https://static.observableusercontent.com/files/aa2b9db126e4344982e814e006c5ad15d19eaf2058f2501600c3cbb4b9fd3c85ad636ccf0c192719c74551df99ab63a1dade795b4723cd3de5a624ae40ceddad","name":"Lenna_(test_image).png","type":"image/png","lastModified":1732049039827.86,"size":473831}] 2f:{"title":"Palette from triangle on a gradient","cells":[{"id":243,"value":"# Palette from triangle on a gradient","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"paletteDisplay(palette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"display = {\n let panel = htl.html`

`;\n let pane1 = viewof palette;\n let pane2 = testimg;\n Object.assign(pane1.style, {\n display: \"inline-block\",\n verticalAlign: \"middle\"\n });\n Object.assign(pane2.style, {\n display: \"inline-block\",\n verticalAlign: \"middle\",\n paddingLeft: \"20px\",\n width: \"500px\"\n });\n panel.append(pane1, pane2);\n return panel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof gradientType = Inputs.select([\"3 colors\", \"4 colors\", \"image\"], {\n label: \"Gradient type\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"mode = Inputs.select([\"rgb\", \"lrgb\", \"oklab\"], { label: \"Interpolation\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"{\n const save = htl.html`