Pixi fisheye example – 20k particles

<html>

<head>
	<title>Pixi fisheye example – 20k particles</title>
	<style> html,body {padding:0; margin:0}</style>
</head>

<body>
	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.1.0/pixi.min.js"></script>
	<script>
		
		var width = document.body.clientWidth;
		var height = document.body.clientHeight;

var container = new PIXI.Container();
		var stage = new PIXI.Container();
		stage.addChild(container);

var renderer = new PIXI.WebGLRenderer(width, height, {resolution:2});
		document.body.appendChild(renderer.view);

var canvas = d3.select(renderer.view);
		canvas.style("width", width).style("height",height);

var centerY = height * .5;
		var centerX = width * .5;
		var particleSize = 64;
		var data = d3.range(0,20000);
		var yScale = d3.scaleLinear().domain(d3.extent(data)).range([height*.2, height*.8]);
		var padding = 2;
		var distortion = 3;
		var radius =200;
		var texture = PIXI.Texture.fromImage('particle@2x.png');
		var mouse;
		// fisheye variables
		var k0 = Math.exp(distortion);
		k0 = k0 / (k0 - 1) * radius;
		var k1 = distortion / radius;

var initialRadius = 2.5, initialAngle = Math.PI * (3 - Math.sqrt(5));
		data = data.map(function(i) {

return {
				r: 2,
				vx:Math.random()*2 -1,
				vy:Math.random()*2 -1,
				x: Math.random() * width,
				y: Math.random() * height
			}
		});

var extent = d3.extent(data, function(d,i) {return i});
		var colourScale = d3.scaleSequential(d3.interpolateRainbow).domain(extent);

var circles = d3.selectAll("custom.circle")
		.data(data)
		.enter()
		.append("custom")
		.attr("class", "circle")
		.each(function(d,i) {
			d.sprite = new PIXI.Sprite(texture);
			d.color = rgbToHex(d3.color(colourScale(i)).rgb());
			d.anchor = {x:.5, y:.5};
			d.sprite.tint = d.color;
			container.addChild(d.sprite);
		});

canvas.on("mousemove", function() {

mouse = {x:d3.event.clientX, y:d3.event.clientY};

})

d3
		.forceSimulation(data)
		.velocityDecay(0)
		.alphaDecay(0)

d3.timer(function() {

circles
			.each(function(d,i) {
				fisheye(d);
				d.sprite.position.x = d.tx;
				d.sprite.position.y = d.ty;
				d.sprite.scale.x = d.tz;
				d.sprite.scale.y = d.tz;
				if(d.x > width) d.vx *=-1;
				if(d.y > height) d.vy *=-1;
				if(d.x <0) d.vx *=-1; 
				if(d.y <0) d.vy *=-1;
			});

renderer.render(stage);
		});

function rgbToHex(c) {
			return "0x" + componentToHex(c.r) + componentToHex(c.g) + componentToHex(c.b);
			function componentToHex(c) {
				var hex = c.toString(16);
				return hex.length == 1 ? "0" + hex : hex;
			}
		}

</script>
</body>

</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.1.0/pixi.min.js