Particleground

Lower the density and watch the framerate.

by ebemunk

HTML

<script src="https://jnicol.github.io/particleground/js/jquery.particleground.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="particleground"></div>
<input id="density" value="1000" type="number" step="100">
<button id="startstop">></button>

CSS

html, body {
	height: 100%;
  margin: 0;
}

#particleground {
	width: 100%;
	height: 100%;
}

#density {
	position: absolute;
	right: 0;
	top: 0;
}

#startstop {
	position: absolute;
	right: 0;
	top: 25px;
}

JavaScript

var pg = particleground(
	document.getElementById('particleground'),
	{density: 10000}
);
pg.pause();

$('#density').on('change', function () {
	pg.pause();
	pg.destroy();
	pg = particleground(
		document.getElementById('particleground'),
		{density: $(this).val()}
	);
	
	paused = false;
	$('#startstop').text('||');
});

var paused = true;

$('#startstop').on('click', function () {
	if( paused ) pg.start();
	else pg.pause();

	$(this).text(paused ? '||' : '>');

	paused = !paused;
});

var stats = new Stats();
stats.setMode( 0 ); // 0: fps, 1: ms, 2: mb

// align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

var update = function () {

    stats.begin();

    // monitored code goes here

    stats.end();

    requestAnimationFrame( update );

};

requestAnimationFrame( update );