31:T777,function polygonDemo(ctx, points, change) { const canvas = ctx.canvas, width = canvas.width, height = canvas.height; let selected = -1; let moved = false; let mouse; change(ctx, points, -1); // 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 points) { if (vec2.dist(mouse, p) < 8) { selected = i; break; } i++; } if (selected < 0) { // new point const n = points.length; if (n >= 2) { // Find closest line segment where to insert let minDist = Infinity; let closest = -1; for (let i = 1; i < n; i++) { const p = points[(i - 1 + n) % n]; const q = points[i]; const d = vec2.distSegment(mouse, p, q); if (d < minDist) { [minDist, closest] = [d, i]; } } if (vec2.dist(mouse, points[0]) <= minDist) points.unshift(mouse); else if (vec2.dist(mouse, points[n - 1]) <= minDist) points.push(mouse); else points.splice(closest, 0, mouse); change(ctx, points, closest); } else { points.push(mouse); change(ctx, points, n); } } else { moved = false; } }; canvas.onmousemove = function (event) { moved = true; if (selected < 0) return; let newMouse = [event.offsetX, event.offsetY]; let v = vec2.sub([], newMouse, mouse); vec2.add(points[selected], points[selected], v); mouse = newMouse; change(ctx, points, selected); }; canvas.onmouseup = function (event) { if (!moved && selected != -1 && points.length > 1) { // click on point points.splice(selected, 1); change(ctx, points, selected); } selected = -1; }; return canvas; }32:T9a4,function paletteFromCurve(options = {}) { const { width = 800, height = 600, image = null, ncolors = 5, cornerColors = ["red", "blue", "green", "white"] } = options; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; if (image) { ctx.drawImage(image, 0, 0, width, height); } else { const interpolateTop = d3.interpolateHsl(cornerColors[0], cornerColors[1]); const interpolateBottom = d3.interpolateHsl( cornerColors[2], cornerColors[3] ); for (let x = 0; x < width; x++) { const c0 = interpolateTop(x / width); const c1 = interpolateBottom(x / width); const gradient = ctx.createLinearGradient(x, 0, x, height); gradient.addColorStop(0, c0); gradient.addColorStop(1, c1); ctx.fillStyle = gradient; ctx.fillRect(x, 0, x + 1, height); } } let imgData = ctx.getImageData(0, 0, width, height); let points = [ [width * 0.1, height * 0.1], [width * 0.6, height * 0.4], [width * 0.9, height * 0.9] ]; let container = htl.html`

`; container.append(canvas); container.value = null; let change = (ctx, pts) => { ctx.putImageData(imgData, 0, 0); for (let p of pts) { 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(); } ctx.strokeStyle = "black"; ctx.setLineDash([8, 8]); ctx.lineWidth = 1; ctx.beginPath(); for (let i = 0; i < 5; i++) { pts = fourPoint(pts, false); } for (let p of pts) ctx.lineTo(...p); ctx.stroke(); let curveLookup = arcLengthParameterize(pts); let delta = 1 / (ncolors - 1); let palettePoints = []; for (let i = 0; i < ncolors; i++) palettePoints.push(curveLookup(i * delta)); ctx.setLineDash([]); const palette = []; for (let [x, y] of palettePoints) { 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; container.dispatchEvent(new Event("input", { bubbles: true })); }; polygonDemo(ctx, points, change); return container; }33:[] 2f:{"title":"Image curve palette","cells":[{"id":0,"value":"# Image curve palette\n\nThe idea here is to pick colors along a smooth curve drawn on an input image. By default, an image is a gradient built from 4 colors, one for each corner. But you can use an external image if desired. The `paletteFromCurve` function generates a component where you can draw the curve by dragging control points (black dots). Clicking a control points deletes it, while clicking elsewhere adds another control point.\n\nSuggested by Tuan Anh.\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof imgfile = Inputs.file({\n label: \"Image file\",\n accept: \".png,.jpg\",\n required: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof ncolors = Inputs.number([3, 12], { label: \"colors\", step: 1, value: 5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"paletteDisplay(palette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof palette = paletteFromCurve({\n ncolors,\n cornerColors: [\"red\", \"blue\", \"green\", \"white\"],\n image\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"function arcLengthParameterize(points) {\n let accum = [0];\n let total = 0;\n for (let i = 1; i < points.length; i++) {\n total += vec2.dist(points[i - 1], points[i]);\n accum[i] = total;\n }\n return (t) => {\n t *= total;\n let i = 0;\n let j = points.length;\n let maxiter = 100;\n while (j - i > 1 && maxiter--) {\n let k = (i + j) >> 1;\n if (accum[k] > t) j = k;\n else i = k;\n }\n if (maxiter == 0) throw \"Inf loop\";\n if (i + 1 >= points.length) return points[points.length - 1];\n let alpha = (t - accum[i]) / (accum[i + 1] - accum[i]);\n return vec2.lerp([], points[i], points[i + 1], alpha);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"function paletteDisplay(palette, options = {}) {\n const { width = 300, height = 40 } = options;\n const div = htl.html`

`;\n Object.assign(div.style, { display: \"inline-block\" });\n const n = palette.length;\n const w = width / n;\n const r = `${Math.min(w, height) / 2}px`;\n for (let i = 0; i < n; i++) {\n const color = palette[i];\n const sample = htl.html`

`;\n Object.assign(sample.style, {\n borderRadius:\n i == 0 ? `${r} 0 0 ${r}` : i == n - 1 ? `0 ${r} ${r} 0` : \"0\",\n width: `${width / palette.length}px`,\n height: `${height}px`,\n display: \"inline-block\",\n background: color\n });\n div.append(sample);\n }\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"mutable image = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"{\n mutable image = await imgfile.image();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"function lagrange([x0, y0], [x1, y1], [x2, y2]) {\n const l0 = (x) => ((x - 1) * (x - 2)) / 2;\n const l1 = (x) => ((x - 0) * (x - 2)) / -1;\n const l2 = (x) => ((x - 0) * (x - 1)) / 2;\n return (t) => {\n let [a, b, c] = [l0(t * 2), l1(t * 2), l2(t * 2)];\n return [x0 * a + x1 * b + x2 * c, y0 * a + y1 * b + y2 * c];\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { vec2, lr, lr4, fourPoint } from \"@esperanc/lane-riesenfeld-subdivision\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}