particle-sandbox/script/main.ts

const SLIDER_MIN = 50;
const SLIDER_MAX = 1000;
const SLIDER_STEP = 50;
const SLIDER_DEFAULT = 350;

const MAX_INTERACTION_NUMBER = 20;

const MIN_INTENSITY = 1;
const MAX_INTENSITY = 1000;
const DEFAULT_INTENSITY = 100;
const INTENSITY_STEP = 1;
const INTENSITY_DIVIDER = 10000;

const DISTANCE_MIN = 10;
const DISTANCE_MAX = 500;
const DISTANCE_STEP = 10;
const DISTANCE_DEFAULT = 200;

const Group1 = 0;
const Group2 = 1;

const canvas = document.querySelector("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

type Options = {
	distance?: number;
	g?: number;
};

type Interaction = {
	group1: Particle[];
	group2: Particle[];
	options: Options;
};

class Particle {
	public x: number;
	public y: number;
	public radius: number;
	public color: string;
	public vx: number = 0;
	public vy: number = 0;

	public static DEFAULT_RADIUS = 5;

	public constructor(x: number, y: number, color: string, radius: number) {
		this.x = x;
		this.y = y;
		this.color = color;
		this.radius = radius;
	}

	public draw(ctx: CanvasRenderingContext2D) {
		ctx.fillStyle = ColorsHex[this.color];
		ctx.fillRect(this.x, this.y, this.radius, this.radius);
	}
}

let paused = true;
let particles: Particle[] = [];
let interactions: Interaction[] = [];

const ColorsHex = Object.freeze({
	red: "#f91d4d",
	green: "#0db342",
	blue: "#4a4ad7",
	yellow: "#f0e246",
	magenta: "#d742d7",
	cyan: "#42cedb",
});

const colors = {
	red: null,
	green: null,
	blue: null,
	yellow: null,
	magenta: null,
	cyan: null,
};

function reset() {
	particles.forEach((particle) => {
		particle.x = randomInt(0, canvas.width);
		particle.y = randomInt(0, canvas.height);
	});

	paused = true;
	const img = document.querySelector(".play-pause img") as HTMLImageElement;
	img.src = "/assets/images/svg/play_arrow.svg";
}

function addColor(color: string, autoGroup: boolean = true) {
	if (autoGroup)
		colors[color] = makeGroup(350, color, { radius: Particle.DEFAULT_RADIUS });

	const container = document.querySelector(".particle-containers")!;

	const particle = document.createElement("div");
	particle.classList.add("particle-container");
	particle.classList.add(color);

	const head = document.createElement("div");
	head.classList.add("container-head");
	head.innerHTML = `<div class="color"></div><h3 class="sublabel">${color}</h3><button class="close particle">⨯</button>`;

	const close = head.querySelector(".close") as HTMLButtonElement;

	close.addEventListener("click", () => {
		particles = particles.filter((p) => p.color !== color);
		colors[color] = null;
		container.removeChild(particle);

		interactions = interactions.filter((itn) => {
			if (itn.group1[0].color === color || itn.group2[0].color === color) {
				document
					.querySelector(`.interaction-container .colors .color.${color}`)
					?.parentElement?.parentElement?.parentElement?.remove();

				return false;
			}

			return true;
		});
	});

	const particleSetting = document.createElement("h4");
	particleSetting.classList.add("setting");
	particleSetting.innerHTML = `Particle number : <span class="setting-value">${SLIDER_DEFAULT.toLocaleString(
		"en-US"
	)}</span>`;

	const range = document.createElement("div");
	range.classList.add("range");

	range.innerHTML = `<p class="value">${SLIDER_MIN.toLocaleString(
		"en-US"
	)}</p><input class="range-content" type="range" min="${SLIDER_MIN}" max="${SLIDER_MAX}" step="${SLIDER_STEP}" value="${SLIDER_DEFAULT}"><p class="value">${SLIDER_MAX.toLocaleString(
		"en-US"
	)}</p>`;

	const input = range.querySelector("input") as HTMLInputElement;

	input.addEventListener("input", () => {
		const value = parseInt(input.value);
		particleSetting.innerHTML = `Particle number : <span class="setting-value"Z>${value.toLocaleString(
			"en-US"
		)}</span>`;

		particles = particles.filter((p) => p.color !== color);

		colors[color] = makeGroup(value, color, {
			radius: Particle.DEFAULT_RADIUS,
		});

		interactions = interactions.map((itn) => {
			if (itn.group1[0].color === color) {
				itn.group1 = colors[color]!;
			} else if (itn.group2[0].color === color) {
				itn.group2 = colors[color]!;
			}

			return itn;
		});
	});

	particle.appendChild(head);
	particle.appendChild(particleSetting);
	particle.appendChild(range);

	container.appendChild(particle);
}

function colorSelector(
	selected: string,
	group: number,
	interaction: Interaction
) {
	const selector = document.createElement("div");
	selector.classList.add("color-selector");

	const selectedColor = document.createElement("button");
	selectedColor.classList.add("color");
	selectedColor.classList.add(selected);

	const colorList = document.createElement("div");
	colorList.classList.add("color-list");

	selectedColor.addEventListener("click", (e) => {
		e.stopPropagation();

		if (colorList.classList.contains("show")) {
			colorList.classList.remove("show");
		} else {
			const colorButtons = document.querySelectorAll(".color-list");

			colorButtons.forEach((colorButton) => {
				if (colorButton.classList.contains("show")) {
					colorButton.classList.remove("show");
				}
			});

			colorList.classList.add("show");
			colorList.innerHTML = "";

			for (const color in colors) {
				if (!colors[color]) continue;

				const colorButton = document.createElement("button");
				colorButton.classList.add("color");
				colorButton.classList.add(color);

				colorButton.addEventListener("click", (e) => {
					e.stopPropagation();

					selectedColor.classList.remove(selected);
					selected = color;
					selectedColor.classList.add(selected);
					colorList.classList.remove("show");

					switch (group) {
						case Group1:
							interaction.group1 = colors[color];
							break;

						case Group2:
							interaction.group2 = colors[color];
							break;
					}
				});

				colorList.appendChild(colorButton);
			}
		}
	});

	selector.appendChild(selectedColor);
	selector.appendChild(colorList);

	return selector;
}

function addInteraction(interaction: Interaction) {
	interactions.push(interaction);
	let isAttractionForce = true;
	const container = document.querySelector(".interaction-containers")!;

	const interactionContainer = document.createElement("div");
	interactionContainer.classList.add("interaction-container");

	const colors = document.createElement("div");
	colors.classList.add("colors");

	const color1 = colorSelector(interaction.group1[0].color, 0, interaction);
	const color2 = colorSelector(interaction.group2[0].color, 1, interaction);

	const liaison = document.createElement("h3");
	liaison.classList.add("setting");

	if (isAttractionForce) {
		liaison.textContent = "is attracted to";
	} else {
		liaison.textContent = "is repulsed by";
	}

	const close = document.createElement("button");
	close.classList.add("close");
	close.classList.add("interaction");
	close.textContent = "⨯";

	colors.appendChild(color1);
	colors.appendChild(liaison);
	colors.appendChild(color2);
	colors.appendChild(close);

	const forceContainer = document.createElement("div");
	forceContainer.classList.add("force-container");
	forceContainer.innerHTML = `<h4 class="setting">Force Type</h4><div class="force-types"><button class="force-type selected">Attraction</button><button class="force-type">Repulsion</button></div>`;

	const forceTypes = forceContainer.querySelectorAll(".force-type");

	forceTypes.forEach((forceType) => {
		forceType.addEventListener("click", () => {
			forceTypes.forEach((ft) => ft.classList.remove("selected"));
			forceType.classList.add("selected");

			isAttractionForce = forceType.textContent === "Attraction";

			if (isAttractionForce) {
				liaison.textContent = "is attracted to";
				interaction.options.g = -Math.abs(interaction.options.g!);
			} else {
				liaison.textContent = "is repulsed by";
				interaction.options.g = Math.abs(interaction.options.g!);
			}
		});
	});

	const intensityContainer = document.createElement("h4");
	intensityContainer.classList.add("setting");
	intensityContainer.innerHTML = `Intensity : <span class="setting-value">${DEFAULT_INTENSITY.toLocaleString(
		"en-US"
	)}</span>`;

	const intensityRange = document.createElement("div");
	intensityRange.classList.add("range");
	intensityRange.innerHTML = `<p class="value">${MIN_INTENSITY.toLocaleString(
		"en-US"
	)}</p><input class="range-content" type="range" min="${MIN_INTENSITY}" max="${MAX_INTENSITY}" step="${INTENSITY_STEP}" value="${DEFAULT_INTENSITY}"><p class="value">${MAX_INTENSITY.toLocaleString(
		"en-US"
	)}</p>`;

	const intensityInput = intensityRange.querySelector(
		"input"
	) as HTMLInputElement;

	intensityInput.addEventListener("input", () => {
		const value = parseInt(intensityInput.value);
		intensityContainer.innerHTML = `Intensity : <span class="setting-value">${value.toLocaleString(
			"en-US"
		)}</span>`;

		if (isAttractionForce) {
			interaction.options.g = -value / INTENSITY_DIVIDER;
		} else {
			interaction.options.g = value / INTENSITY_DIVIDER;
		}
	});

	const distanceContainer = document.createElement("h4");
	distanceContainer.classList.add("setting");
	distanceContainer.innerHTML = `Distance : <span class="setting-value">${DISTANCE_DEFAULT.toLocaleString(
		"en-US"
	)}</span>`;

	const distanceRange = document.createElement("div");
	distanceRange.classList.add("range");
	distanceRange.innerHTML = `<p class="value">${DISTANCE_MIN.toLocaleString(
		"en-US"
	)}</p><input class="range-content" type="range" min="${DISTANCE_MIN}" max="${DISTANCE_MAX}" step="${DISTANCE_STEP}" value="${DISTANCE_DEFAULT}"><p class="value">${DISTANCE_MAX.toLocaleString(
		"en-US"
	)}</p>`;

	const distanceInput = distanceRange.querySelector(
		"input"
	) as HTMLInputElement;

	distanceInput.addEventListener("input", () => {
		const value = parseInt(distanceInput.value);
		distanceContainer.innerHTML = `Distance : <span class="setting-value">${value.toLocaleString(
			"en-US"
		)}</span>`;

		interaction.options.distance = value;
	});

	close.addEventListener("click", () => {
		interactions = interactions.filter((itn) => itn !== interaction);
		container.removeChild(interactionContainer);
	});

	interactionContainer.appendChild(colors);
	interactionContainer.appendChild(forceContainer);
	interactionContainer.appendChild(intensityContainer);
	interactionContainer.appendChild(intensityRange);
	interactionContainer.appendChild(distanceContainer);
	interactionContainer.appendChild(distanceRange);

	container.appendChild(interactionContainer);
}

function randomInt(min: number, max: number) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

function makeGroup(
	number: number,
	color: string,
	options: { radius?: number }
) {
	const group: Particle[] = [];

	for (let i = 0; i < number; i++) {
		const particle = new Particle(
			randomInt(0, canvas.width),
			randomInt(0, canvas.height),
			color,
			options.radius ?? Particle.DEFAULT_RADIUS
		);

		group.push(particle);
		particles.push(particle);
	}

	return group;
}

function interaction(
	group1: Particle[],
	group2: Particle[],
	options: Options = {}
) {
	const g = options.g ?? 0.1;
	const distance = options.distance ?? 100;

	for (let i = 0; i < group1.length; i++) {
		let fx = 0;
		let fy = 0;

		for (let j = 0; j < group2.length; j++) {
			let a = group1[i];
			let b = group2[j];

			const dx = a.x - b.x;
			const dy = a.y - b.y;
			const d = Math.sqrt(dx * dx + dy * dy);

			if (d > 0 && d < distance) {
				const F = g / d;
				fx += F * dx;
				fy += F * dy;
			}

			a.vx = (a.vx + fx) * 0.5;
			a.vy = (a.vy + fy) * 0.5;
			a.x += a.vx * 0.01;
			a.y += a.vy * 0.01;
		}
	}
}

document.querySelector(".add.particle")?.addEventListener("click", () => {
	let color: string | null = null;

	for (const c in colors) {
		if (!colors[c]) {
			color = c;
			break;
		}
	}

	if (color) addColor(color);
});

document.querySelector(".add.interaction")?.addEventListener("click", () => {
	if (interactions.length >= MAX_INTERACTION_NUMBER) return;

	let color1: string | null = null;
	let color2: string | null = null;

	for (const c in colors) {
		if (colors[c]) {
			color1 = c;
			break;
		}
	}

	if (!color1) return;

	for (const c in colors) {
		if (colors[c] && c !== color1) {
			color2 = c;
			break;
		}
	}

	if (!color2) color2 = color1;

	const group1 = colors[color1];
	const group2 = colors[color2];
	if (!group1 || !group2) return;

	const intensity = DEFAULT_INTENSITY;
	const distance = 100;

	const options: Options = {
		distance,
		g: intensity / INTENSITY_DIVIDER,
	};

	const interaction: Interaction = {
		group1,
		group2,
		options,
	};

	addInteraction(interaction);
});

document.querySelector(".play-pause")?.addEventListener("click", () => {
	paused = !paused;

	const img = document.querySelector(".play-pause img") as HTMLImageElement;

	img.src = paused
		? "/assets/images/svg/play_arrow.svg"
		: "/assets/images/svg/pause.svg";
});

document.querySelector(".reset")?.addEventListener("click", () => {
	reset();
});

document.querySelector(".save")?.addEventListener("click", () => {
	const element = document.createElement("a");
	element.style.display = "none";
	element.download = `ps${Date.now()}.json`;

	element.setAttribute(
		"href",
		"data:text/plain;charset=utf-8," +
			encodeURIComponent(
				JSON.stringify([
					interactions.map((itn) => ({
						group1: itn.group1[0].color,
						group2: itn.group2[0].color,
						options: itn.options,
					})),
					Object.entries(colors)
						.filter(([_, v]) => v)
						.map(([k, _]) => ({
							color: k,
							number: colors[k]!.length,
						})),
				])
			)
	);

	element.click();
	element.remove();
});

document.querySelector(".load")?.addEventListener("click", () => {
	const element = document.createElement("input");
	element.style.display = "none";
	element.type = "file";
	element.accept = ".json";

	element.addEventListener("change", (e) => {
		const file = (e.target as HTMLInputElement).files![0];
		const reader = new FileReader();

		reader.addEventListener("load", (e) => {
			const [itn, groups] = JSON.parse(e.target!.result as string);

			interactions = [];
			particles = [];

			const particleContainer = document.querySelector(".particle-containers")!;

			const interactionContainer = document.querySelector(
				".interaction-containers"
			)!;

			particleContainer.innerHTML = "";
			interactionContainer.innerHTML = "";

			for (const group of groups) {
				addColor(group.color, false);

				colors[group.color] = makeGroup(group.number, group.color, {
					radius: Particle.DEFAULT_RADIUS,
				});
			}

			for (const it of itn) {
				const group1 = colors[it.group1];
				const group2 = colors[it.group2];

				if (!group1 || !group2) continue;

				addInteraction({
					group1,
					group2,
					options: it.options,
				});
			}
		});

		reader.readAsText(file);
	});

	element.click();
	element.remove();
});

document.querySelector(".minimize")?.addEventListener("click", () => {
	const gui = document.querySelector(".gui .content") as HTMLDivElement;
	gui.classList.toggle("minimized");
});

window.addEventListener("resize", () => {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	reset();
});

window.addEventListener("click", () => {
	document.querySelectorAll(".color-list").forEach((colorList) => {
		if (colorList.classList.contains("show")) {
			colorList.classList.remove("show");
		}
	});
});

addColor("red");
addColor("green");

addInteraction({
	group1: colors.red!,
	group2: colors.green!,
	options: {
		distance: DISTANCE_DEFAULT,
		g: -DEFAULT_INTENSITY / INTENSITY_DIVIDER,
	},
});

function animate() {
	if (!paused) {
		interactions.forEach((itn) =>
			interaction(itn.group1, itn.group2, itn.options)
		);
	}

	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	particles.forEach((particle) => particle.draw(ctx));
	return requestAnimationFrame(animate);
}

animate();