const INIT_DENSITY = 0.0004, // particles per sq px
	PROTON_RADIUS = 9,
	ELECTRON_RADIUS = 2.5,
	PROTON_ELECTRON_CHARGE_RATIO = 10,
	ACCELERATION_K = 0.05;

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*(node.pole>0 ? PROTON_ELECTRON_CHARGE_RATIO : 1))
		.strength(ACCELERATION_K)
		.polarity((q1,q2) => q1*q2 < 0) // Attraction of opposites
	);

// 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);
	onPolarityChange();
}

function onPolarityChange() {
	const probPositive = +d3.select('#polarity-control').node().value;
	const negThreshold = Math.floor(probPositive * forceSim.nodes().length);
	forceSim.nodes().forEach((node, i) => {
		node.r = i < negThreshold ? PROTON_RADIUS : ELECTRON_RADIUS;
		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: PROTON_RADIUS,
			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('fill', d => d.pole<0 ? 'darkslategrey': 'crimson')
		.attr('r', d=>d.r)
		.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;
}