32:T61d,visual = { const context = DOM.context2d(w, h, 1); function update() { const D = d3.deviation(values, Math.abs) * 2; context.clearRect(0, 0, w, h); const data = context.getImageData(0, 0, w, h); switch (view) { case "levels": for (let i = 0; i < values.length; i++) { data.data[4 * i + 0] = values[i] < 0 ? (values[i] / D) ** 2 * 150 : 0; data.data[4 * i + 1] = values[i] > 0 ? (values[i] / D) ** 2 * 200 : 0; data.data[4 * i + 2] = 160; data.data[4 * i + 3] = Math.abs((values[i] / D) * 255); } break; case "flat": for (let i = 0; i < values.length; i++) { data.data[4 * i + 3] = values[i] > 0 ? 255 : 80; } break; case "contours": default: for (let i = 0; i < values.length; i++) { data.data[4 * i + 3] = (i % w < w - 1 && values[i] * values[i + 1] < 0) || values[i] * values[i + w] < 0 ? 255 : 0; } break; } context.putImageData(data, 0, 0); } // d3.select(context.canvas).on("pointermove", (event) => { // const p = d3.pointers(event, context.canvas)[0]; // const x = Math.floor(p[0]); // const y = Math.floor(p[1]); // for (let i = -15; i <= 15; i++) { // const r = Math.ceil(Math.sqrt(Math.abs(i))); // for (let j = -15 + r; j <= 15 - r; j++) values[x + i + w * (y + j)] = 0; // } // }); return Object.assign(context.canvas, { update, style: `min-width:${width}px` }); }33:T4b5,run = { const blurred = new Float32Array(values.length); while (what.length || entropy > 0) { const t = d3.mean(values); const e = d3.extent(values); const s = d3.deviation(values); blurred.set(values); d3.blur2({ width: w, data: blurred }, curvature); // ENTROPY if (entropy > 0) { for (let i = 0; i < values.length; i++) values[i] += (Math.random() - 0.5) * entropy; } // EQUALIZE if (what.includes("equalize")) { for (let i = 0; i < values.length; i++) values[i] = -0.5 + (values[i] - t) / s; } // BORDER if (what.includes("border")) { const M = -1; let k; for (let i = 0; i < w; i++) { values[i] = Math.min(values[i], M); values[(k = i + (h - 1) * w)] = Math.min(values[k], M); } for (let i = 0; i < h; i++) { values[(k = i * w)] = Math.min(values[k], M); values[(k = w - 1 + i * w)] = Math.min(values[k], M); } } // MEAN CURVATURE FLOW if (what.includes("mean curvature flow")) { for (let i = 0; i < values.length; i++) values[i] += (blurred[i] - values[i]) * 0.7; } visual.update(values); yield e; } }34:[] 30:{"title":"Level set experiment 1","cells":[{"id":0,"value":"# Level set experiment 1\n\nThe [level set](https://en.wikipedia.org/wiki/Level-set_method) method describes a shape as the contour of all the points that have a raster value > 0. In this framework, operations on curves (like, say, an intersection) are computed as operations applied to their underlying rasters (for intersection: the min; union: the max, etc.). In this notebook the operations are: adding entropy (random noise); [mean curvature flow](https://en.wikipedia.org/wiki/Mean_curvature_flow) (which creates “roundish” shapes); an equalization process that tries to maintain a balance between the positive and negative values; and a repelling force on the borders of the canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"viewof what = Inputs.checkbox([\"mean curvature flow\", \"equalize\", \"border\"], {\n value: [\"mean curvature flow\", \"equalize\", \"border\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"viewof view = Inputs.select([\"levels\", \"flat\", \"contours\"], {\n label: \"view\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"viewof entropy = Inputs.range([0, 0.5], {\n label: \"entropy\",\n value: 0.1,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"viewof curvature = Inputs.range([0, 10], {\n label: \"curvature radius\",\n value: 2,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"viewof reset = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"values = (reset,\nFloat64Array.from({ length: w * h }, () => Math.random() - 0.5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"By the way, the _curvature_ is measured by the technique we introduced in [Deriving Pantelleria](https://observablehq.com/@visionscarto/deriving-pantelleria#_laplacian): it is the difference between the value at a point and the mean value in its neighborhood (computed with [d3.blur2](https://d3js.org/d3-array/blur#blur2)).","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"w = width | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"h = w >> 1","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}