31:T677,{ const context = DOM.context2d(imageWidth, imageHeight, 1); context.drawImage(image, 0, 0, imageWidth, imageHeight); context.canvas.style.width = "400px"; context.canvas.style.border = "1px solid black"; const grid = getCells(200).map((cell) => { const { x, y, width, height } = cell; const pixels = getPixels2({ context, x, y, width, height }); const meanLightness = d3.max(pixels, (d) => d.lightness); return { ...cell, meanLightness }; }); const columns = d3.max(grid, (d) => d.column) + 1; const rows = d3.max(grid, (d) => d.row) + 1; const xScale = d3.scaleLinear([0, columns], [0, imageWidth]); const yScale = d3.scaleLinear([0, rows], [0, imageHeight]); const contours = d3 .contours() // .thresholds([0, 10, 50, 100, 150, 200, 240, 255]) // .thresholds(d3.range(0, 300, 20)) .thresholds(thresholds) .size([columns, rows])(grid.map((d) => d.meanLightness)); // Re-scale in place contours.forEach(({ coordinates }) => { coordinates.forEach((lineStrings) => { lineStrings.forEach((points) => { points.forEach((point) => { point[0] = xScale(point[0]); point[1] = yScale(point[1]); }); }); }); }); mutable contours_ = contours; const contourPaths = contours .map((geoJSON) => d3.geoPath()(geoJSON)) .filter((d) => d) .map( (pathDef) => htl.svg`` ); return htl.html` `; }32:T558,{ const context = DOM.context2d(imageWidth, imageHeight, 1); context.drawImage(image, 0, 0, imageWidth, imageHeight); context.canvas.style.width = "400px"; context.canvas.style.border = "1px solid black"; const columns = 100; const grid = getCells(columns).map((cell) => { const { x, y, width, height } = cell; const pixels = getPixels2({ context, x, y, width, height }); const maxLightness = d3.max(pixels, (d) => d.lightness); const meanLightness = d3.mean(pixels, (d) => d.lightness); return { ...cell, maxLightness, meanLightness }; }); // const maxDots = 1500 / columns; const maxDots = 10; // const maxDots = 20; const numDotsScale = d3.scaleLinear([0, 255], [0, maxDots]); const allDots = grid .map((cell) => { const numDots = Math.ceil(numDotsScale(cell.meanLightness)); const dots = d3.range(numDots).map(() => { const x = cell.x + Math.random() * cell.width; const y = cell.y + Math.random() * cell.height; return { x, y }; }); return dots; }) .flat(1) .map((d) => htl.svg``); const children = allDots; return htl.html` `; }33:T605,{ const context = DOM.context2d(imageWidth, imageHeight, 1); context.drawImage(image, 0, 0, imageWidth, imageHeight); const img = await imageJS.Image.fromCanvas(context.canvas); const grey = img.grey(); const defaultOptions = { lowThreshold: 10, highThreshold: 30, gaussianBlur: 1.1 }; const edges = grey.cannyEdge({ ...defaultOptions, lowThreshold, highThreshold, gaussianBlur }); const contextOut = DOM.context2d(imageWidth, imageHeight, 1); edges.data.forEach((d, i) => { const x = i % img.width; const y = Math.floor(i / img.width); contextOut.beginPath(); contextOut.fillStyle = d === 0 ? `white` : `red`; contextOut.fillRect(x, y, 1, 1); }); const voronoiPointsAll = getCells(100).map((cell) => { const { x, y, width, height } = cell; const pixels = getPixels2({ context: contextOut, x, y, width, height }); const average = d3.mean(pixels, (d) => d.lightness); return [x, y, average]; }); mutable voronoiPoints = voronoiPointsAll; const voronoiPointsFiltered = voronoiPointsAll.filter((d) => d[2] < 255); const voronoiCells = getVoronoiCells(voronoiPointsFiltered, { width: imageWidth, height: imageHeight }); const voronoiPaths = voronoiCells.map( (d) => htl.svg`` ); return htl.html` `; }34:[{"id":"046a8a0a5dcfbec229c4f43f7a43829846c894a137e04b0353cf58457ef528601dac1b1aa679835d7c12d4916e0aaf2969054c4251dfe74c0a2fda47749a7d0d","href":"https://static.observableusercontent.com/files/046a8a0a5dcfbec229c4f43f7a43829846c894a137e04b0353cf58457ef528601dac1b1aa679835d7c12d4916e0aaf2969054c4251dfe74c0a2fda47749a7d0d","name":"my-face-small@1.png","type":"image/png","lastModified":1626125270027.808,"size":543951},{"id":"172c4b92e6a60ac67e037b44aae528b6ed7b319875aa66e4df4b317e7d06fcbac818de4f86ffb1878f432ff8eacbb49b19a1807d07833b116d4a10cf42da881f","href":"https://static.observableusercontent.com/files/172c4b92e6a60ac67e037b44aae528b6ed7b319875aa66e4df4b317e7d06fcbac818de4f86ffb1878f432ff8eacbb49b19a1807d07833b116d4a10cf42da881f","name":"waldo.png","type":"image/png","lastModified":1639960081424.515,"size":682912}] 2f:{"title":"Image Processing Sandbox, v5","cells":[{"id":0,"value":"# Image Processing Sandbox, v5","pinned":false,"hidden":false,"mode":"md"},{"id":1541,"value":"More image processing stuff. Presented without comment.","pinned":false,"hidden":false,"mode":"md"},{"id":1389,"value":"viewof imageRaw = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: undefined\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"image = {\n const image = await FileAttachment(\"waldo.png\").image();\n return image;\n // const image = await FileAttachment(\"my-face-small@1.png\").image();\n // imageRaw.width = 100;\n // return imageRaw;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"imageWidth = image.naturalWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"imageHeight = image.naturalHeight","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"mutable contours_ = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1412,"value":"thresholds = {\n // return [0, 20, 40, 100, 200, 240, 250, 270];\n // return [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300];\n return [0, 20, 60, 90, 120, 150, 180, 210, 240];\n // return d3.range(0, 300, 30);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1485,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"mutable voronoiPoints = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1429,"value":"viewof lowThreshold = Inputs.range([10, 50], {\n value: 30,\n step: 10,\n label: \"Low Threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1437,"value":"viewof highThreshold = Inputs.range([10, 100], {\n value: 30,\n step: 10,\n label: \"High Threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"viewof gaussianBlur = Inputs.range([0, 3], {\n value: 1.5,\n step: 0.5,\n label: \"Blur\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1271,"value":"{\n const colorScale = d3.scaleLinear([0, 255], [\"white\", \"black\"]);\n const bumpMax = 100;\n const bumpScale = d3.scaleLinear([0, 255], [bumpMax, 0]);\n\n const dots = voronoiPoints.map(\n ([x, y, average]) =>\n htl.svg``\n );\n\n const lines = d3\n .groups(voronoiPoints, (d) => d[1])\n .map(([rowY, values]) => {\n const chunks = values\n .map(([x, y, lightness]) => {\n const bump = bumpScale(lightness);\n return `L ${x} ${y + bump}`;\n })\n .join(\" \");\n return `M 0 ${rowY} ${chunks}`;\n })\n .map((pathDef) => {\n return htl.svg``;\n });\n\n const children = lines;\n return htl.html``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"---------\n# Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":1146,"value":"imageJS = import(\"https://cdn.skypack.dev/image-js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"imagetracer = require(\"imagetracerjs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"function getVoronoiCells(points, { width = 100, height = 100 } = {}) {\n const voronoi = d3.Delaunay.from(points).voronoi([0, 0, width, height]);\n const cells = points.map((point, i) => {\n const pathDefinition = voronoi.renderCell(i);\n return { pathDefinition, point };\n });\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"function getPixels2({ context, x, y, width, height }) {\n const imageData = context.getImageData(x, y, width, height);\n const pixels = imageData.data;\n const out = [];\n const channels = [\"r\", \"g\", \"b\", \"a\"];\n let current = {};\n for (const [index, pixel] of pixels.entries()) {\n const mod = index % 4;\n const channel = channels[mod];\n current[channel] = pixel;\n if (mod === 3) {\n const column = index % width;\n const row = Math.floor(index / width);\n const { r, g, b } = current;\n const lightness = Math.floor((r + g + b) / 3);\n out.push({\n ...current,\n x: x + column,\n y: y + row,\n lightness\n });\n current = {};\n }\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"function getPixels({ context, x, y, width, height, sample = 0.5 }) {\n const imageData = context.getImageData(x, y, width, height);\n const pixels = imageData.data;\n const out = [];\n const keys = [\"r\", \"g\", \"b\", \"a\"];\n let current = {};\n pixels.forEach((d, i) => {\n const mod = i % 4;\n const key = keys[mod];\n current[key] = d;\n if (mod === 3) {\n if (Math.random() > sample) {\n current = {};\n return;\n }\n const pixelIndex = Math.floor(i / 4);\n const column = pixelIndex % width;\n const row = Math.floor(pixelIndex / width);\n Object.assign(current, {\n index: pixelIndex,\n column,\n row,\n x: x + column,\n y: y + row\n });\n const { r, g, b } = current;\n const lightness = Math.floor((r + g + b) / 3);\n const grayscale = `rgb(${lightness}, ${lightness}, ${lightness})`;\n out.push({ ...current, lightness, grayscale });\n current = {};\n }\n });\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":536,"value":"function getCells(columns = 50) {\n const aspectRatio = imageWidth / imageHeight;\n const rows = Math.ceil(columns / aspectRatio);\n const cellWidth = Math.ceil(imageWidth / columns);\n const cellHeight = Math.ceil(imageHeight / rows);\n const numCells = columns * rows;\n const cells = Array.from({ length: numCells }).map((d, i) => {\n const column = i % columns;\n const row = Math.floor(i / columns);\n return {\n x: column * cellWidth,\n y: row * cellHeight,\n column,\n row,\n width: cellWidth,\n height: cellHeight\n };\n });\n return cells;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"function renderWithTransform({ func, columns, sample }) {\n const context = DOM.context2d(imageWidth, imageHeight, 1);\n context.canvas.style.width = \"400px\";\n context.canvas.style.border = \"1px solid black\";\n context.drawImage(image, 0, 0, imageWidth, imageHeight);\n\n const outContext = DOM.context2d(imageWidth, imageHeight, 1);\n outContext.canvas.style.width = context.canvas.style.width;\n\n const withPixels = getCells(columns).map((cell, index) => {\n const pixels = getPixels({\n ...cell,\n context,\n sample\n });\n return {\n ...cell,\n pixels: pixels\n };\n });\n\n const transformed = func({ cells: withPixels });\n\n transformed.forEach((cell, index) => {\n const { x, y, width, height, fillStyle } = cell;\n outContext.beginPath();\n outContext.fillStyle = fillStyle;\n outContext.fillRect(x, y, width, height);\n });\n\n outContext.canvas.cells = transformed;\n\n return outContext.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}