1wheel/README.md

## README.md

      
    Raw
  

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

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

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

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

</style>

<body></body>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>

var width = 960,
		height = 500,
		outerR = 200,
		periods = 8,
		n = 180

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 ticks = d3.range(0, Math.PI*2 + 1/n, Math.PI*2/n)
var pathA = []
var pathB = []

d3.timer(function(t){
	ticks.forEach(function(θ, i){
		//magnitute of distance from circle is a triangle wave
		var mag = Math.abs((n - i + t/30) % n - n/2)/n
		//set offsets on half of circle to 0
		mag = Math.max(0, mag - 1/4)*120

		var rA = outerR + Math.sin(θ*periods)*mag
		pathA[i] = [Math.cos(θ)*rA, Math.sin(θ)*rA]

		var rB = outerR - Math.sin(θ*periods)*mag
		pathB[i] = [Math.cos(θ)*rB, Math.sin(θ)*rB]
	})

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


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

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

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

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

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

	</style>

	<body></body>

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<script>

	var width = 960,
	height = 500,
	outerR = 200,
	periods = 8,
	n = 180

	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 ticks = d3.range(0, Math.PI2 + 1/n, Math.PI2/n)
	var pathA = []
	var pathB = []

	d3.timer(function(t){
	ticks.forEach(function(θ, i){
	//magnitute of distance from circle is a triangle wave
	var mag = Math.abs((n - i + t/30) % n - n/2)/n
	//set offsets on half of circle to 0
	mag = Math.max(0, mag - 1/4)*120

	var rA = outerR + Math.sin(θperiods)mag
	pathA[i] = [Math.cos(θ)rA, Math.sin(θ)rA]

	var rB = outerR - Math.sin(θperiods)mag
	pathB[i] = [Math.cos(θ)rB, Math.sin(θ)rB]
	})

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


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

	</script>