thole/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://www.goodboydigital.com/pixijs/bloom/pixi.min.js"></script>

<script>


var width = 960,
    height = 500;

var resolution=window.devicePixelRatio;
var renderer = PIXI.autoDetectRenderer(width, height,{'resolution':resolution,autoResize:true,antialias:true,backgroundColor : 0x000000})

document.body.appendChild(renderer.view);
var stage = new PIXI.Container();

var nodes = d3.range(200).map(function() { return {x:Math.random()*width,y:Math.random()*height,speed: Math.random() * 2}; });

var graphic = new PIXI.Graphics();
stage.addChild(graphic)
animate();

function animate() {

  nodes.forEach(function(d){
    d.y = (d.y + d.speed) % height;
  })

  graphic.clear();

  var nodesAsArray = new Array();
  nodes.forEach(function(d){
    nodesAsArray.push([d.x,d.y])
  });

  var trianlges = d3.geom.delaunay(nodesAsArray);
  trianlges.forEach(function(triangle){
    graphic.lineStyle(1, 0xFF0000, 2);
    graphic.moveTo(triangle[0][0],triangle[0][1]);
    graphic.lineTo(triangle[1][0], triangle[1][1]);
    graphic.lineTo(triangle[2][0], triangle[2][1]);
    graphic.endFill();
  })

  nodes.forEach(function(d){
    graphic.lineStyle(0);
    graphic.beginFill(0x000000, 0.75);
    graphic.drawCircle(d.x, d.y, 3);
    graphic.endFill();
    stage.addChild(graphic)
  });


  renderer.render(stage);
  requestAnimationFrame( animate );
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="http://www.goodboydigital.com/pixijs/bloom/pixi.min.js"></script>

	<script>


	var width = 960,
	height = 500;

	var resolution=window.devicePixelRatio;
	var renderer = PIXI.autoDetectRenderer(width, height,{'resolution':resolution,autoResize:true,antialias:true,backgroundColor : 0x000000})

	document.body.appendChild(renderer.view);
	var stage = new PIXI.Container();

	var nodes = d3.range(200).map(function() { return {x:Math.random()width,y:Math.random()height,speed: Math.random() * 2}; });

	var graphic = new PIXI.Graphics();
	stage.addChild(graphic)
	animate();

	function animate() {

	nodes.forEach(function(d){
	d.y = (d.y + d.speed) % height;
	})

	graphic.clear();

	var nodesAsArray = new Array();
	nodes.forEach(function(d){
	nodesAsArray.push([d.x,d.y])
	});

	var trianlges = d3.geom.delaunay(nodesAsArray);
	trianlges.forEach(function(triangle){
	graphic.lineStyle(1, 0xFF0000, 2);
	graphic.moveTo(triangle[0][0],triangle[0][1]);
	graphic.lineTo(triangle[1][0], triangle[1][1]);
	graphic.lineTo(triangle[2][0], triangle[2][1]);
	graphic.endFill();
	})

	nodes.forEach(function(d){
	graphic.lineStyle(0);
	graphic.beginFill(0x000000, 0.75);
	graphic.drawCircle(d.x, d.y, 3);
	graphic.endFill();
	stage.addChild(graphic)
	});


	renderer.render(stage);
	requestAnimationFrame( animate );
	}

	</script>