D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mbostock
Full window
Github gist
Voronoi Spirals III
Inspired by
Adam Pearce
.
<!DOCTYPE html> <meta charset="utf-8"> <canvas width="960" height="960"></canvas> <script src="https://d3js.org/d3.v4.0.0-alpha.28.min.js"></script> <script> var canvas = d3.select("canvas").node(), context = canvas.getContext("2d"), width = canvas.width, height = canvas.height; var sites = d3.range(100).map(function() { return [Math.random() * width, Math.random() * height]; }), cells = d3.voronoi().size([width, height]).polygons(sites), formatHex = d3.format("02x"); var colors = d3.range(256) .map(d3.scaleRainbow().domain([0, 255])) .map(function(c) { return d3.rgb(c); }); for (var i = 0; i < 256; ++i) { context.beginPath(); cells.forEach(function(cell) { drawCell(cell); var p0 = cell.shift(), p1 = cell[0], t = Math.min(0.5, 4 / distance(p0, p1)), p2 = [p0[0] * (1 - t) + p1[0] * t, p0[1] * (1 - t) + p1[1] * t]; cell.push(p2); }); context.fillStyle = "#" + formatHex(i) + "0000"; context.fill(); } var source = context.getImageData(0, 0, width, height).data, targetBuffer = context.createImageData(width, height), target = targetBuffer.data; for (var i = 0, y = 0; y < height; ++y) { for (var x = 0; x < width; ++x, i += 4) { target[i + 0] = target[i + 1] = target[i + 2] = target[i + 3] = 255; } } context.clearRect(0, 0, width, height); d3.timer(function(elapsed) { for (var i = 0, y = 0; y < height; ++y) { for (var x = 0; x < width; ++x, i += 4) { var c = colors[Math.floor(source[i] + elapsed / 10) % 256]; target[i + 0] = c.r; target[i + 1] = c.g; target[i + 2] = c.b; } } context.putImageData(targetBuffer, 0, 0); }); function drawCell(cell) { context.moveTo(cell[0][0], cell[0][1]); for (var i = 1, n = cell.length; i < n; ++i) context.lineTo(cell[i][0], cell[i][1]); context.closePath(); } function distance(a, b) { var dx = a[0] - b[0], dy = a[1] - b[1]; return Math.sqrt(dx * dx + dy * dy); } </script>
https://d3js.org/d3.v4.0.0-alpha.28.min.js