So this show how to basically do https://bl.ocks.org/mbostock/22fd67be72552774736d using d3 v4. It basically use an imlementation of a Poisson disk distribution to do some sampling and then uses the pixel color to color in a polygon generated by a voronoi algorithm on all the sampled points.
The original picture of the taco cat I used can be found https://c1.staticflickr.com/7/6046/6303841970_a9f081904c.jpg
Put more taco cats on the internet pls
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script>
</head>
<body>
<div id="heap">
</div>
<script src="main.js"></script>
</body>
</html>
// needed if using a build tool like browserify
// var d3 = require('d3');
console.log('ready to get sampling')
var width = 300
let height = 400
var sample = poissonDiscSampler(width, height, 3.45)
let samples = []
let s
while (s = sample()) samples.push(s)
console.log(samples)
var voronoi = d3.voronoi()
.extent([[0, 0], [width, height]])
var canvas = d3.select('body').append('canvas')
.attr('width', width)
.attr('height', height)
var context = canvas.node().getContext('2d')
var image = new Image()
image.src = 'tacocatlit.jpg'
image.onload = start
function start () {
context.drawImage(image, 0, 0)
image = context.getImageData(0, 0, width, height)
var diagram = voronoi(samples)
var links = diagram.links()
polygons = diagram.polygons()
console.log('diagram, ', diagram)
context.fillStyle = 'green' // "#f00"; context.fill()
for (var i = 0, n = polygons.length; i < n; ++i) {
context.beginPath()
drawCell(polygons[i])
var x = Math.floor(polygons[i].data[0]),
y = Math.floor(polygons[i].data[1]),
q = (y * width + x) << 2
var color = d3.rgb(image.data[q + 0], image.data[q + 1], image.data[q + 2]) + ''
// console.log(color)
context.fillStyle = color
context.fill()
}
}
// Based on https://www.jasondavies.com/poisson-disc/
function poissonDiscSampler (width, height, radius) {
var k = 30, // maximum number of samples before rejection
radius2 = radius * radius,
R = 3 * radius2,
cellSize = radius * Math.SQRT1_2,
gridWidth = Math.ceil(width / cellSize),
gridHeight = Math.ceil(height / cellSize),
grid = new Array(gridWidth * gridHeight),
queue = [],
queueSize = 0,
sampleSize = 0
return function () {
if (!sampleSize) return sample(Math.random() * width, Math.random() * height)
// Pick a random existing sample and remove it from the queue.
while (queueSize) {
var i = Math.random() * queueSize | 0,
s = queue[i]
// Make a new candidate between [radius, 2 * radius] from the existing sample.
for (var j = 0; j < k; ++j) {
var a = 2 * Math.PI * Math.random(),
r = Math.sqrt(Math.random() * R + radius2),
x = s[0] + r * Math.cos(a),
y = s[1] + r * Math.sin(a)
// Reject candidates that are outside the allowed extent,
// or closer than 2 * radius to any existing sample.
if (x >= 0 && x < width && y >= 0 && y < height && far(x, y)) return sample(x, y)
}
queue[i] = queue[--queueSize]
queue.length = queueSize
}
}
function far (x, y) {
var i = x / cellSize | 0,
j = y / cellSize | 0,
i0 = Math.max(i - 2, 0),
j0 = Math.max(j - 2, 0),
i1 = Math.min(i + 3, gridWidth),
j1 = Math.min(j + 3, gridHeight)
for (j = j0; j < j1; ++j) {
var o = j * gridWidth
for (i = i0; i < i1; ++i) {
if (s = grid[o + i]) {
var s,
dx = s[0] - x,
dy = s[1] - y
if (dx * dx + dy * dy < radius2) return false
}
}
}
return true
}
function sample (x, y) {
var s = [x, y]
queue.push(s)
grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s
++sampleSize
++queueSize
return s
}
}
function drawSite (site) {
context.moveTo(site[0] + 2.5, site[1])
context.arc(site[0], site[1], 2.5, 0, 2 * Math.PI, false)
}
function drawLink (link) {
context.moveTo(link.source[0], link.source[1])
context.lineTo(link.target[0], link.target[1])
}
function drawCell (cell) {
if (!cell) return false
context.moveTo(cell[0][0], cell[0][1])
for (var j = 1, m = cell.length; j < m; ++j) {
context.lineTo(cell[j][0], cell[j][1])
}
context.closePath()
return true
}