spinning-spiral

Remake of http://beesandbombs.tumblr.com/post/118139231509/from-the-archive

<!DOCTYPE html>
<meta charset="utf-8">

body{
	background-color: rgb(38, 38, 38);
}

path{
	stroke: white;
	stroke-width: 11px;
	fill: none;
}

</style>

var width = 960,
		height = 500,
		maxR = 200,
		periods = 8,
		n = 480,
		cycle = n/periods

var svg = d3.select('body')
	.append('svg')
		.attr({height: height, width: width})
	.append('g')
		.attr('transform', 'translate(' + [width/2, height/2] + ')')

svg.append('path')
// svg.append('path')

var toAngle = d3.scale.linear().domain([0, n/periods]).range([0, Math.PI*2])
var toDist  = d3.scale.linear().domain([0, n]).range([0, maxR])

var ticks = d3.range(n)
var pathA = []
var pathB = []

d3.timer(function(t){
	var s = t/5
	var offset = s % cycle
	ticks.forEach(function(i){

var θ = toAngle(i +offset)

// var distOff = 
		var dist = toDist(i) + Math.sin(s/cycle)*maxR/periods*(i/n)

pathA[i] = [Math.cos(θ)*dist, Math.sin(θ)*dist]
	})

svg.selectAll('path').data([pathA, pathB]).attr('d', pointsToPath)

d3.select('#conter').text([offset, Math.sin(s/cycle)*10].map(Math.round))
})

function pointsToPath(array){
	return 'M' + array.join('L')
}

</script>