README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Inspired by https://twitter.com/moebio/status/659020040050757632 from @moebio and the prompt from @stevenstrogatz https://twitter.com/stevenstrogatz/status/658980873077936128

Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("rect")
    	.attr("width", width + margin.left + margin.right)
    	.attr("height", height + margin.top + margin.bottom)
    	.attr("fill", "#111111");

    var NUM_O_DOGS = 120;
    var SPEED = 5;

    var dogs = [];
    var targets = d3.range(0, NUM_O_DOGS, 1);
    targets = d3.shuffle(targets);


    var radius = (height < width) ? height / 2 : width / 2;

    for (var i = 0; i < NUM_O_DOGS; i++) {
      var theta = 2 * Math.PI * i / NUM_O_DOGS;

      var origin = {
      	x: Math.cos(theta) * radius + width / 2,
        y: Math.sin(theta) * radius + height / 2
      }

      var color = d3.hsl(i / NUM_O_DOGS * 360, 0.8, 0.6).toString();

      dogs.push({
        target: targets[i],
        steps: [origin],
        color: color
      });
    }

    // Feel free to change or delete any of the code you see!
    var step = 0;

    var circle = svg.selectAll("circle")
	    .data(dogs);

    var paths = svg.selectAll("path")
    	.data(dogs);

    paths.enter().append("path")
    	.attr("fill", "none")
    	.attr("stroke", function(d) {
      	return d.color;
    	})
    	.attr("stroke-width", 0.5)
    	.attr("opacity", 0.8);

   	circle.enter().append("circle")
	    .attr("r", 2.5)
    	.attr("fill", function(d) {
      	return d.color;
    	});

    var lineFunction = d3.svg.line()
			.x(function(d) { return d.x; })
			.y(function(d) { return d.y; })
			.interpolate("linear");

    function chase(dog) {
      var targetDog = dogs[dog.target];
      var deltaX = targetDog.steps[step].x - dog.steps[step].x;
      var deltaY = targetDog.steps[step].y - dog.steps[step].y;

      var deltaLength = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

      if (deltaLength < SPEED) {
        var unitX = deltaX;
	      var unitY = deltaY;
      } else {
      	var unitX = deltaX / deltaLength * SPEED;
	      var unitY = deltaY / deltaLength * SPEED;
      }

      var newCoordinates = {
      	x: dog.steps[step].x + unitX,
        y: dog.steps[step].y + unitY
      }

      dog.steps.push(newCoordinates);
    }

    function reset() {
      targets = d3.shuffle(targets);

     	dogs.forEach(function(dog, i) {
        dog.target = targets[i];
        dog.steps = dog.steps.slice(0,1);
      })
    }

    function draw(timestamp) {
      dogs.forEach(chase);

			circle
        .attr("cx", function(d) { return d.steps[step].x; })
        .attr("cy", function(d) { return d.steps[step].y; })
        .attr("r", 2.5);

      paths
      	.attr("d", function(d) {
        	return lineFunction(d.steps);
      	})

      step++;

      if (step > 150) {
        reset();
        step = 0;
      }

      window.requestAnimationFrame(draw);
    }

    window.requestAnimationFrame(draw);

  </script>
</body>