{
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: 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`<path fill="none" stroke="black" d=${d.pathDefinition} />`
);
return htl.html`<svg viewBox=${`0 0 ${imageWidth} ${imageHeight}`} style="border: 1px dashed black; width: 400px">${voronoiPaths}</svg>`;
}