| license: gpl-3.0 |
This is the beginning of an experiment in sorting the polygons of a voronoi diagram.
The polygons are moving to random locations rather than sorting because I was working on how to smoothly transition them from one location to another. It's definitely not smooth at this point!
The previous version is here: Voronoi Shuffling v1
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| path { | |
| fill-opacity: 0; | |
| stroke: black; | |
| } | |
| </style> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body></body> | |
| <script> | |
| var width = window.innerWidth, | |
| height = window.innerHeight; | |
| var voronoi = d3.voronoi() | |
| .size([width, height]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var pointCoords = [], | |
| oldPointCoords = []; | |
| getPointCoords(); | |
| var dots = svg.selectAll("circle") | |
| .data(pointCoords) | |
| .enter().append("circle") | |
| .attr("r", 2) | |
| .attr("transform", function(d) {return "translate(" + d[0] + ", " + d[1] + ")"}) | |
| var paths = svg.selectAll("path") | |
| .data(voronoi(pointCoords).polygons()) | |
| .enter().append("path") | |
| .attr("d", function(d) {return "M" + d.join("L") + "Z";}) | |
| function getPointCoords() { | |
| for (i=0; i<100; i++) { | |
| oldPointCoords[i] = pointCoords[i]; | |
| pointCoords[i] = [Math.random() * width, Math.random() * height] | |
| }; | |
| }; | |
| var reDraw = function() { | |
| getPointCoords(); | |
| dots.data(pointCoords) | |
| .transition().duration(3000) | |
| .attr("transform", function(d) {return "translate(" + d[0] + ", " + d[1] + ")"}) | |
| paths.data(voronoi(pointCoords).polygons()) | |
| .transition().duration(3000) | |
| .attr("transform", function(d, i) {return "translate(" + (pointCoords[i][0] - oldPointCoords[i][0]) + ", " + (pointCoords[i][1] - oldPointCoords[i][1]) + ")"}) | |
| .transition().duration(3000) | |
| .attr("transform", "translate(0,0)") | |
| .attr("d", function(d) {return "M" + d.join("L") + "Z"}) | |
| d3.timeout(reDraw, 8000); | |
| } | |
| d3.timeout(reDraw, 2000); | |
| </script> |
