31:Tb0c,{ const context = DOM.context2d(imageWidth, imageHeight, 1); context.drawImage(image, 0, 0, imageWidth, imageHeight); const imageData = context.getImageData(0, 0, imageWidth, imageHeight); const traceData = imagetracer.imagedataToTracedata(imageData, { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7, linefilter: true, // viewbox: true, ltres: 0.0001 }); const linesData = traceData.layers .flat() .map((d) => d.segments) .flat() .filter((d) => d.type === "L") .sort((a, b) => d3.ascending(a.y1, b.y1)); // const maxDistance = 100; // const connected = linesData // .map((d, i, arr) => { // const prev = arr[i - 1]; // let type = "M"; // if (prev) { // const distanceX = Math.abs(prev.x1 - d.x1); // const distanceY = Math.abs(prev.y1 - d.y1); // const dist = (distanceX ** 2 + distanceY ** 2) ** 0.5; // if (dist < maxDistance && dist > 0) { // // console.log({ d, prev, dist }); // type = "L"; // } // } // return { // ...d, // type // }; // }) // .map((d) => `${d.type} ${d.x1} ${d.y1} L ${d.x2} ${d.y2}`) // .join(" "); // const onePath = htl.svg``; const lines = linesData.map( (d) => htl.svg`` ); const voronoiCells = getVoronoiCells( linesData.map((d) => [d.x1, d.y1]).filter(() => Math.random() < 0.2), { width: imageWidth, height: imageHeight } ); const voronoiPaths = voronoiCells .map( ({ pathDefinition }) => htl.svg`` ) .filter((d) => d.getTotalLength() > 90); const points = linesData.map( (d) => htl.svg`` ); return htl.html``; // return 23; // LOoks cool // const svgMarkup = imagetracer.imagedataToSVG(imageData, { // colorsampling: 0, // colorquantcycles: 1, // numberofcolors: 7, // linefilter: true, // viewbox: true, // ltres: 0.0001 // }); // const svgContainer = d3.select(html`${svgMarkup}`).node(); // const paths = [...svgContainer.querySelectorAll("path")]; // const filteredPaths = paths // .filter((d) => d.getTotalLength() > 10e3) // .map((pathElement) => { // const pathDef = pathElement.getAttribute("d"); // return htl.svg``; // }); // return htl.html``; // console.log("paths", paths); // return svgContainer; }32:[{"id":"5aeda5b1ec303f92d4ad61346413ef4d895800d852432e21adb8a97d17fdad9d31944f149fdc7341e220e935b446a214e9f2f077555f4b146c337dad59f9af76","href":"https://static.observableusercontent.com/files/5aeda5b1ec303f92d4ad61346413ef4d895800d852432e21adb8a97d17fdad9d31944f149fdc7341e220e935b446a214e9f2f077555f4b146c337dad59f9af76","name":"my-face-2.png","type":"image/png","lastModified":1626042567057.963,"size":3675207}] 2f:{"title":"Image Processing Sandbox, v1","cells":[{"id":0,"value":"# Image Processing Sandbox, v1","pinned":true,"hidden":false,"mode":"md"},{"id":2,"value":"Let's try some image processing. Here's my face:","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"image = {\n const image = await FileAttachment(\"my-face-2.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":18,"value":"Now let's re-draw the image on a canvas:","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"{\n const context = DOM.context2d(imageWidth, imageHeight, 1);\n context.drawImage(image, 0, 0, imageWidth, imageHeight);\n\n context.canvas.style.width = \"200px\";\n context.canvas.style.border = \"1px solid black\";\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"Great.","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"Let's go ahead and get all the image data:","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"allPixels = {\n const context = DOM.context2d(imageWidth, imageHeight, 1);\n context.drawImage(image, 0, 0, imageWidth, imageHeight);\n return getPixels({\n context,\n x: 0,\n y: 0,\n width: imageWidth,\n height: imageHeight,\n sample: 0.1\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"Now let's create a grid and draw it on the canvas:","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"{\n const context = DOM.context2d(imageWidth, imageHeight, 1);\n context.drawImage(image, 0, 0, imageWidth, imageHeight);\n\n getCells().forEach((cell) => {\n const { x, y, width, height } = cell;\n context.beginPath();\n context.rect(x, y, width, height);\n context.strokeStyle = `rgba(255, 255, 255, 0.2)`;\n context.lineWidth = 3;\n context.stroke();\n });\n\n context.canvas.style.width = \"400px\";\n context.canvas.style.border = \"1px solid black\";\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"Okay, now let's try getting a chunk of image data and making it black and white:","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"{\n const context = DOM.context2d(imageWidth, imageHeight, 1);\n context.drawImage(image, 0, 0, imageWidth, imageHeight);\n\n context.canvas.style.width = \"300px\";\n context.canvas.style.border = \"1px solid black\";\n\n const sampleX = 700;\n const sampleY = 870;\n const sampleWidth = 1000;\n const sampleHeight = 250;\n\n getPixels2({\n x: sampleX,\n y: sampleY,\n width: sampleWidth,\n height: sampleHeight\n }).forEach((d) => {\n const { x, y, grayscale } = d;\n context.beginPath();\n context.fillStyle = grayscale;\n context.fillRect(x, y, 4, 4);\n });\n\n context.beginPath();\n context.strokeStyle = `blue`;\n context.lineWidth = 3;\n context.strokeRect(sampleX, sampleY, sampleWidth, sampleHeight);\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"Well that was harder than I thought it would be. \n\nLet's try doing the same for some random sample of our grid cells:","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"{\n const context = DOM.context2d(imageWidth, imageHeight, 1);\n context.drawImage(image, 0, 0, imageWidth, imageHeight);\n\n context.canvas.style.width = \"400px\";\n context.canvas.style.border = \"1px solid black\";\n\n const cells = getCells(10);\n\n cells.forEach((cell) => {\n const { x, y, width, height } = cell;\n context.beginPath();\n context.rect(x, y, width, height);\n context.strokeStyle = `rgba(255, 255, 255, 0.2)`;\n context.lineWidth = 3;\n context.stroke();\n });\n\n cells.forEach((cell) => {\n if (Math.random() > 0.3) return;\n const { x, y, width, height } = cell;\n const pixels = getPixels2({\n x,\n y,\n width,\n height\n });\n\n pixels.forEach((d) => {\n const { x, y, r, g, b, grayscale } = d;\n context.beginPath();\n context.fillStyle = grayscale;\n context.fillRect(x, y, 4, 4);\n });\n });\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"Amazing. Now let's start doing some cool calculations...","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"Here's the average lightness of each grid cell:","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"lightness = {\n return renderWithTransform({\n columns: 100,\n sample: 0.06,\n func: ({ cells }) => {\n return cells.map((cell) => {\n const avg = Math.floor(d3.mean(cell.pixels, (d) => d.lightness));\n const fillStyle = d3.rgb(avg, avg, avg);\n return { ...cell, fillStyle, color: avg };\n });\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"lightnessCells = lightness.cells","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"How about the variance?","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"variance = {\n return renderWithTransform({\n columns: 50,\n sample: 0.06,\n func: ({ cells }) => {\n const munged = cells.map((d) => {\n const variance = d3.variance(d.pixels, (d) => d.lightness);\n return {\n ...d,\n variance\n };\n });\n const extent = d3.extent(munged, (d) => d.variance);\n const quantiles = d3\n .scaleQuantile(\n munged.map((d) => d.variance),\n Array.from({ length: 10 })\n )\n .quantiles();\n const varianceScale = d3.scaleLinear([0, d3.max(quantiles)], [255, 0]);\n return munged.map((cell) => {\n // const avg = d3.mean(cell.pixels, (d) => d.lightness);\n const color = varianceScale(cell.variance);\n const fillStyle = d3.rgb(color, color, color);\n return { ...cell, fillStyle, color };\n });\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"Oh, this seems promising.","pinned":false,"hidden":false,"mode":"md"},{"id":692,"value":"varianceCells = variance.cells","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"Variance as line slopes:","pinned":false,"hidden":false,"mode":"md"},{"id":704,"value":"{\n const thetaScale = d3.scaleLinear([0, 255], [0, Math.PI / 2]).clamp(true);\n const cells = varianceCells.map((d) => {\n const { x, y, width, height, color } = d;\n const x1 = x;\n const y1 = y;\n const theta = thetaScale(color);\n const x2 = x1 + Math.cos(theta) * width;\n const y2 = y1 + Math.sin(theta) * width;\n // return htl.svg``;\n return htl.svg``;\n });\n return htl.html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"Variance as circle radius:","pinned":false,"hidden":false,"mode":"md"},{"id":729,"value":"{\n const radiusScale = d3.scaleLinear([0, 255], [20, 0]).clamp(true);\n const cells = varianceCells.map((d) => {\n const { x, y, width, height, color } = d;\n\n const radius = radiusScale(color);\n return htl.svg``;\n });\n return htl.html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"Same thing, but filter out variance below a certain value","pinned":false,"hidden":false,"mode":"md"},{"id":757,"value":"{\n const radiusScale = d3.scaleLinear([0, 255], [10, 0]).clamp(true);\n const cells = varianceCells\n .filter((d) => d.color < 250)\n .map((d) => {\n const { x, y, width, height, color, grayscale } = d;\n\n const radius = radiusScale(color);\n return htl.svg``;\n });\n return htl.html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"Now let's try Voronoi:","pinned":false,"hidden":false,"mode":"md"},{"id":780,"value":"{\n const radiusScale = d3.scaleLinear([0, 255], [10, 0]).clamp(true);\n const filtered = varianceCells.filter((d) => d.color > 220);\n const cells = filtered.map((d) => {\n const { x, y, width, height, color, grayscale } = d;\n const radius = radiusScale(color);\n return htl.svg``;\n });\n const voronoiCells = getVoronoiCells(\n filtered.filter((d) => d.x < 1400).map((d) => [d.x, d.y]),\n { width: imageWidth, height: imageHeight }\n );\n const voronoiPaths = voronoiCells\n .map((d) => {\n return htl.svg``;\n })\n .filter((d) => d.getTotalLength() > 120);\n return htl.html`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":822,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"---------\n# Helpers","pinned":false,"hidden":false,"mode":"md"},{"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":637,"value":"function getPixels2({ x, y, width, height }) {\n return allPixels.filter(\n (d) => d.x >= x && d.y >= y && d.x <= x + width && d.y <= y + height\n );\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":"$W32","stdlib":"1","titling":"auto"}