Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active August 30, 2016 03:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save 1wheel/d43f93e5e205e31142e3b186bfdf8092 to your computer and use it in GitHub Desktop.
Save 1wheel/d43f93e5e205e31142e3b186bfdf8092 to your computer and use it in GitHub Desktop.
Download ZIP
svg voroni spiral
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
body{
margin: 0px;
}
path{
stroke: black;
fill: none;
}
</style>
<body>
<script src='/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script src='voroni-spiral.js'></script>
Raw
voroni-spiral.js
var width = 960,
height = 500;
var vertices = d3.range(40).map(function(d) {
return [Math.random() * width, Math.random() * height];
})
var voronoi = d3.geom.voronoi()
.clipExtent([[0, 0], [width, height]])
var polygons = voronoi(vertices)
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
svg.dataAppend(polygons, 'path')
.attr('d', function(d){ return 'M' + d.join('L') + 'Z' })
polygons.forEach(drawSpiral)
// drawSpiral(polygons[0])
function drawSpiral(polygon){
var duration = 100
var points = polygon.slice()
setInterval(function(){
var curPoint = points.shift()
var nextPoint = points[0]
svg.append('path')
.attr('d', ['M', curPoint, 'L', curPoint].join(' '))
// .transition().duration(duration)
.attr('d', ['M', curPoint, 'L', nextPoint].join(' '))
var percent = .1 //+ points.length/30
points.push([
curPoint[0]*(1 - percent) + nextPoint[0]*percent,
curPoint[1]*(1 - percent) + nextPoint[1]*percent])
}, duration)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment