thole/dot.png

## dot.png

      
    Raw
  

              dot.png
            
          
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//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 : 0xFAFAFA});

var texture = PIXI.Texture.fromImage('dot.png');

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

var nodes = d3.range(3500).map(function() { return {x:0,y:0,radius: Math.random() * 2 + 4}; });

var root = nodes[0];
nodes.forEach(function(d){
  var sprite = new PIXI.Sprite(texture);
  sprite.anchor.x = 0.5;
  sprite.anchor.y = 0.5;
  sprite.height = 5;
  sprite.width = 5;
  stage.addChild(sprite);
})

root.radius = 0;
root.fixed = true;

var force = d3.layout.force()
    .gravity(0.05)
    .charge(function(d, i) { return i ? -0.5 : -500; })
    .nodes(nodes)
    .size([width, height]);

force.start();

animate();

function animate() {

  root.px = renderer.plugins.interaction.mouse.global.x;
  root.py = renderer.plugins.interaction.mouse.global.y;
  force.resume();

  var i = 0;
  nodes.forEach(function(d){
    var graphic = stage.getChildAt(i);
    graphic.position.x = d.x;
    graphic.position.y = d.y;
    i++;
  });

  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="//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 : 0xFAFAFA});

	var texture = PIXI.Texture.fromImage('dot.png');

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

	var nodes = d3.range(3500).map(function() { return {x:0,y:0,radius: Math.random() * 2 + 4}; });

	var root = nodes[0];
	nodes.forEach(function(d){
	var sprite = new PIXI.Sprite(texture);
	sprite.anchor.x = 0.5;
	sprite.anchor.y = 0.5;
	sprite.height = 5;
	sprite.width = 5;
	stage.addChild(sprite);
	})

	root.radius = 0;
	root.fixed = true;

	var force = d3.layout.force()
	.gravity(0.05)
	.charge(function(d, i) { return i ? -0.5 : -500; })
	.nodes(nodes)
	.size([width, height]);

	force.start();

	animate();

	function animate() {

	root.px = renderer.plugins.interaction.mouse.global.x;
	root.py = renderer.plugins.interaction.mouse.global.y;
	force.resume();

	var i = 0;
	nodes.forEach(function(d){
	var graphic = stage.getChildAt(i);
	graphic.position.x = d.x;
	graphic.position.y = d.y;
	i++;
	});

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

	</script>