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>
#conter{
	position: absolute;
	color: white;
	font-family: monospace;
}

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

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

</style>

<body>
	<div id='conter'></div>
</body>

<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>

<script>

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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

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

	<style>
	#conter{
	position: absolute;
	color: white;
	font-family: monospace;
	}

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

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

	</style>

	<body>
	<div id='conter'></div>
	</body>

	<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>

	<script>

	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>