31:T7f4,{ 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(100).map((cell) => { const { x, y, width, height } = cell; const pixels = getPixels2({ context, x, y, width, height }); const meanLightness = d3.mean(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]); // context.clearRect(0, 0, imageWidth, imageHeight); // grid.forEach((d) => { // const { x, y, width, height, meanLightness } = d; // context.beginPath(); // context.fillStyle = d3 // .color("red") // .copy({ opacity: d3.scaleLinear([0, 255], [0, 1])(meanLightness) }); // context.fillRect(x, y, width, height); // }); const contours = d3 .contours() // .thresholds([0, 10, 50, 100, 150, 200, 240, 255]) .thresholds(d3.range(0, 300, 20)) .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 contourPaths; return htl.html` `; // return context.canvas; }32:T800,{ const context = DOM.context2d(imageWidth, imageHeight, 1); context.drawImage(image, 0, 0, imageWidth, imageHeight); const img = await imageJS.Image.fromCanvas(context.canvas); // lowThreshold: Low threshold for the hysteresis procedure (default: 10). // highThreshold: High threshold for the hysteresis procedure (default: 30). // gaussianBlur: Sigma parameter for the gaussian filter step (default: 1.1). const grey = img.grey(); const defaultOptions = { lowThreshold: 10, highThreshold: 30, gaussianBlur: 1.1 }; const edges = grey.cannyEdge({ ...defaultOptions, lowThreshold: 30, highThreshold: 30, gaussianBlur: 2.0 }); 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``; // contextOut.clearRect(0, 0, imageWidth, imageHeight); // voronoiCells.forEach((cell) => { // const path = new Path2D(cell.pathDefinition); // contextOut.strokeStyle = "black"; // contextOut.stroke(path); // }); // return contextOut.canvas; }33:T482,{ // const voronoiCells = getVoronoiCells(voronoiPoints, { // width: imageWidth, // height: imageHeight // }); // const voronoiPaths = voronoiCells.map( // (d) => htl.svg`` // ); const colorScale = d3.scaleLinear([0, 255], ["white", "black"]); const bumpMax = 100; const bumpScale = d3.scaleLinear([0, 255], [bumpMax, 0]); const dots = voronoiPoints.map( ([x, y, average]) => htl.svg`` ); const lines = d3 .groups(voronoiPoints, (d) => d[1]) .map(([rowY, values]) => { const chunks = values .map(([x, y, lightness]) => { const bump = bumpScale(lightness); return `L ${x} ${y + bump}`; }) .join(" "); return `M 0 ${rowY} ${chunks}`; }) .map((pathDef) => { return htl.svg``; }); // return lines; const children = lines; return htl.html``; }34:[{"id":"046a8a0a5dcfbec229c4f43f7a43829846c894a137e04b0353cf58457ef528601dac1b1aa679835d7c12d4916e0aaf2969054c4251dfe74c0a2fda47749a7d0d","href":"https://static.observableusercontent.com/files/046a8a0a5dcfbec229c4f43f7a43829846c894a137e04b0353cf58457ef528601dac1b1aa679835d7c12d4916e0aaf2969054c4251dfe74c0a2fda47749a7d0d","name":"my-face-small@1.png","type":"image/png","lastModified":1626111869143.108,"size":543951}] 2f:{"title":"Image Processing Sandbox, v4","cells":[{"id":0,"value":"# Image Processing Sandbox, v4","pinned":false,"hidden":false,"mode":"md"},{"id":1370,"value":"More image processing stuff. Presented without comment.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"image = {\n const image = await FileAttachment(\"my-face-small@1.png\").image();\n image.width = 100;\n return image;\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":47,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"mutable voronoiPoints = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1271,"value":"$33","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":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"imagetracer = require(\"imagetracerjs\")","pinned":true,"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":true,"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":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}