const INIT_DENSITY = 0.0002, // particles per sq px
	PARTICLE_RADIUS_RANGE = [2, 10],
	ACCELERATION_K = 0.3;

const canvasWidth = window.innerWidth,
	canvasHeight = window.innerHeight,
	svgCanvas = d3.select('svg#canvas')
		.attr('width', canvasWidth)
		.attr('height', canvasHeight);

const forceSim = d3.forceSimulation()
	.alphaDecay(0)
	.velocityDecay(0)
	.on('tick', particleDigest)
	.force('bounce', d3.forceBounce()
		.radius(d => d.r)
		.elasticity(0)
	)
	.force('container', d3.forceSurface()
		.surfaces([
			{from: {x:0,y:0}, to: {x:0,y:canvasHeight}},
			{from: {x:0,y:canvasHeight}, to: {x:canvasWidth,y:canvasHeight}},
			{from: {x:canvasWidth,y:canvasHeight}, to: {x:canvasWidth,y:0}},
			{from: {x:canvasWidth,y:0}, to: {x:0,y:0}}
		])
		.oneWay(true)
		.radius(d => d.r)
		.elasticity(0)
	)
	.force('magnetic', d3.forceMagnetic()
		.charge(node => node.r*node.r*node.pole)
		.strength(ACCELERATION_K)
	);

// Init particles
onDensityChange(INIT_DENSITY);

// Event handlers
function onDensityChange(density) {
	d3.select('#density-control').attr('value', density);
	forceSim.nodes(genNodes(density));
	d3.select('#numparticles-val').text(forceSim.nodes().length);
	onAttractionChange();
}

function onAttractionChange() {
	const probAttraction = +d3.select('#attraction-control').node().value;
	const negThreshold = Math.floor(probAttraction * forceSim.nodes().length);
	forceSim.nodes().forEach((node, i) => {
		node.pole = i < negThreshold ? 1 : -1;
	});
}

//

function genNodes(density) {
	const numParticles = Math.round(canvasWidth * canvasHeight * density),
		existingParticles = forceSim.nodes();

	// Trim
	if (numParticles < existingParticles.length) {
		return existingParticles.slice(0, numParticles);
	}

	// Append
	return [...existingParticles, ...d3.range(numParticles - existingParticles.length).map(() => {
		return {
			x: Math.random() * canvasWidth,
			y: Math.random() * canvasHeight,
			r: Math.round(Math.random() * (PARTICLE_RADIUS_RANGE[1] - PARTICLE_RADIUS_RANGE[0]) + PARTICLE_RADIUS_RANGE[0]),
			pole: 1
		}
	})];
}

function particleDigest() {
	let particle = svgCanvas.selectAll('circle.particle').data(forceSim.nodes().map(hardLimit));

	particle.exit().remove();

	particle.merge(
		particle.enter().append('circle')
			.classed('particle', true)
			.attr('r', d=>d.r)
	)
		.attr('fill', d => d.pole>0 ? 'darkslategrey': 'crimson')
		.attr('cx', d => d.x)
		.attr('cy', d => d.y);
}

function hardLimit(node) {
	// Keep in canvas
	node.x = Math.max(node.r, Math.min(canvasWidth-node.r, node.x));
	node.y = Math.max(node.r, Math.min(canvasHeight-node.r, node.y));

	return node;
}