veltman/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Some fun with spirals and d3-scale's new rainbow scale.

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

body {
  background-color: #000;
}

</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.18.min.js"></script>
<script>

var width = 960,
    height = 500,
    cx = width / 2,
    cy = height / 2,
    duration = 60000,
    timer;

var rainbow = d3.scaleRainbow();

var angle = d3.scaleLinear()
  .domain([0,1])
  .range([(Math.sqrt(5) - 1) / 2,0])
  .clamp(true);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var seeds = d3.range(fibonacci(18).pop()).map(function(d){

  return {
    index: d,
    color: rainbow((1 + Math.sin(2 * Math.PI * angle.range()[0] * d)) / 2)
  };

});

draw(0);

transition();

function transition() {

  if (timer) {
    timer.stop();
  }

  d3.timeout(function(){
    timer = d3.timer(draw);
  },1000);

}

function draw(t){

  context.clearRect(0,0,width,height);

  t = d3.easeCubicInOut(t / duration);

  var ϕ = angle(t);

  seeds.forEach(function(seed){

    var θ = 2 * Math.PI * ϕ * seed.index,
        r = Math.sqrt(seed.index) * 6;

    context.fillStyle = seed.color;

    context.beginPath();
    context.arc(cx + r * Math.cos(θ),cy - r * Math.sin(θ),2,0,Math.PI*2);
    context.fill();

  });

  // Back to sunflower, switch directions
  if (t >= 1) {

    angle.range(angle.range().reverse());
    transition();

  }

}

function fibonacci(n) {

  return d3.range(n).reduce(function(arr, x, i){
    return arr.concat((i < 2) ? i : arr[i-1] + arr[i-2]);
  }, []);

}

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

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

	body {
	background-color: #000;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.0.0-alpha.18.min.js"></script>
	<script>

	var width = 960,
	height = 500,
	cx = width / 2,
	cy = height / 2,
	duration = 60000,
	timer;

	var rainbow = d3.scaleRainbow();

	var angle = d3.scaleLinear()
	.domain([0,1])
	.range([(Math.sqrt(5) - 1) / 2,0])
	.clamp(true);

	var canvas = d3.select("body").append("canvas")
	.attr("width", width)
	.attr("height", height);

	var context = canvas.node().getContext("2d");

	var seeds = d3.range(fibonacci(18).pop()).map(function(d){

	return {
	index: d,
	color: rainbow((1 + Math.sin(2 * Math.PI * angle.range()[0] * d)) / 2)
	};

	});

	draw(0);

	transition();

	function transition() {

	if (timer) {
	timer.stop();
	}

	d3.timeout(function(){
	timer = d3.timer(draw);
	},1000);

	}

	function draw(t){

	context.clearRect(0,0,width,height);

	t = d3.easeCubicInOut(t / duration);

	var ϕ = angle(t);

	seeds.forEach(function(seed){

	var θ = 2 * Math.PI * ϕ * seed.index,
	r = Math.sqrt(seed.index) * 6;

	context.fillStyle = seed.color;

	context.beginPath();
	context.arc(cx + r * Math.cos(θ),cy - r * Math.sin(θ),2,0,Math.PI*2);
	context.fill();

	});

	// Back to sunflower, switch directions
	if (t >= 1) {

	angle.range(angle.range().reverse());
	transition();

	}

	}

	function fibonacci(n) {

	return d3.range(n).reduce(function(arr, x, i){
	return arr.concat((i < 2) ? i : arr[i-1] + arr[i-2]);
	}, []);

	}

	</script>