Particle-Life-Simulation/form.js at master · Amjuks/Particle-Life-Simulation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
function setupForm() {
	const form = document.querySelector('.form-container');
	let inactivityTimeout;

	const formInputs = {};

	function showForm() {
	form.style.display = 'block';
	setTimeout(() => {
		form.style.opacity = 1;
		form.style.transform = 'translate(-50%, -50%) scale(1)';
	}, 10);
	resetInactivityTimeout();
	}

	function hideForm() {
	form.style.opacity = 0;
	form.style.transform = 'translate(-50%, -50%) scale(0.9)';
	setTimeout(() => {
		form.style.display = 'none';
	}, 500);
	}

	function resetInactivityTimeout() {
	clearTimeout(inactivityTimeout);
	inactivityTimeout = setTimeout(hideForm, 5000);
	}

	function updateURLparams(param, value) {
	params.set(param, value);
	url.search = params.toString();
	window.history.replaceState({}, '', url);
	}

	function updateInputValues(input, display, initialize, multiplier=1, round=0) {
	const displayElement = document.querySelector(display);

	if (initialize) {
		input.addEventListener('input', () => {
		const value = input.value;
		displayElement.textContent = (value * multiplier).toFixed(round);
		simulationParams[initialize] = value;
		updateURLparams(initialize, value);
		if (initializeParameters.includes(initialize)) {
			initializeSimulation();
		}
		});
	} else {
		input.addEventListener('input', () => {
		const value = input.value;
		displayElement.textContent = (value * multiplier).toFixed(round);
		updateURLparams(initialize, value);
		});
	}

	input.dispatchEvent(new Event('input'));
	}

	function updateCheckboxValues(input, func) {
	func(input.checked);

	input.addEventListener('change', () => {
		func(input.checked);
	})
	}

	function initFormInputs() {
		const inputs = [
			'numberOfParticles',
			'numberOfColors',
			'radius',
			'forceRadius',
			'forcePower',
			'matrixEvolutionDelta',
			'matrixEvolutionDuration',
			'predatorPreyEvolutionDuration',
			'toggleMatrixEvolution',
			'togglePredatorPreyEvolution',
			'mouseRepulsion',
			'toggleAttractionMatrix',
		];

		inputs.forEach(inputId => {
			formInputs[inputId] = document.getElementById(inputId);
		})

		formInputs[inputs[0]].value = simulationParams.n;
		formInputs[inputs[1]].value = simulationParams.nc;
		formInputs[inputs[2]].value = simulationParams.radius;
		formInputs[inputs[3]].value = simulationParams.forceRadius;
		formInputs[inputs[4]].value = simulationParams.forcePower;
		formInputs[inputs[5]].value = simulationParams.matrixEvolutionDelta;
		formInputs[inputs[6]].value = simulationParams.matrixEvolutionDuration;
		formInputs[inputs[8]].value = simulationParams.enableMatrixEvolution;

	updateInputValues(formInputs[inputs[0]], '#numberOfParticlesValue', 'n');
	updateInputValues(formInputs[inputs[1]], '#numberOfColorsValue', 'nc');
	updateInputValues(formInputs[inputs[2]], '#radiusValue', 'radius', 1, 1);
	updateInputValues(formInputs[inputs[3]], '#forceRadiusValue', 'forceRadius');
	updateInputValues(formInputs[inputs[4]], '#forcePowerValue', 'forcePower');
	updateInputValues(formInputs[inputs[5]], '#matrixEvolutionDeltaValue', 'matrixEvolutionDelta', 1, 2);
	updateInputValues(formInputs[inputs[6]], '#matrixEvolutionDurationValue', 'matrixEvolutionDuration', 0.001, 1);
	updateCheckboxValues(formInputs[inputs[8]], toggleEvolutionMatrix);
	updateCheckboxValues(formInputs[inputs[10]], () => { simulationParams.mouseRepulsion = formInputs[inputs[10]].checked; });
	}

	initFormInputs();

	document.addEventListener('click', (event) => {
	if (!form.contains(event.target)) {
		if (form.style.display === 'none') {
		showForm();
		} else {
		hideForm();
		}
	}
	});

	form.addEventListener('mousemove', resetInactivityTimeout);
	form.addEventListener('click', resetInactivityTimeout);
	form.addEventListener('keypress', resetInactivityTimeout);
}

if (!params.get('nointerrupt')) {
	setupForm();
}