Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Mar 19, 2019
Embed
What would you like to do?
Shiboronoi
license: gpl-3.0
redirect: https://observablehq.com/@mbostock/shiboronoi
  wow
         such voronoi
                 html5
     many cells
                       very convexity
   so tessellation
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
id = 0;
var voronoi = d3.geom.voronoi()
.clipExtent([[-1, -1], [width + 1, height + 1]]);
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
d3.tsv("shibe.tsv", function(error, vertices) {
if (error) throw error;
var shibe = new Image;
shibe.src = "shibe.jpg";
shibe.onload = loaded;
function loaded() {
canvas.on("mousemove", mousemoved);
render();
}
function mousemoved() {
vertices[0] = d3.mouse(this);
render();
}
function render() {
var cells = voronoi(vertices);
cells.forEach(function(cell) {
context.save();
path(cell);
context.clip();
context.drawImage(shibe, cell.point[0] - 90, cell.point[1] - 115);
context.stroke();
context.restore();
});
}
});
function path(cell) {
context.beginPath();
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();
}
</script>
0 1
941 190
546 3
50 482
437 19
855 116
497 464
834 417
118 340
619 265
374 307
169 182
504 40
36 167
438 99
204 262
477 201
729 111
298 297
658 326
737 18
397 147
628 376
532 104
876 21
318 472
395 83
146 28
911 74
913 208
236 468
254 33
78 23
438 317
957 311
64 83
528 400
313 140
789 40
556 350
758 415
713 176
384 480
880 457
578 247
366 436
20 327
610 33
957 430
863 258
18 386
172 51
33 276
709 218
653 260
855 60
163 473
59 243
162 220
477 8
335 333
385 30
462 478
176 423
860 184
933 265
644 193
858 342
598 442
425 362
323 56
406 389
104 277
136 199
282 83
229 316
111 78
217 190
306 429
797 110
761 276
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment