Vector-Field-Simulation/index.html at main · kananb/Vector-Field-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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<script src="p5.js"></script>
	<script src="simplex.js"></script>
	<script src="function.js"></script>
	<script src="vector_field.js" defer></script>

	<link rel="stylesheet" type="text/css" href="vector_field.css" />
	<title>Vector Fields</title>
</head>
<body>
	<section id="wrapper">
		<section id="display">
		</section>
		<section id="settings">
			<h1>Vector Field Simulator</h1>

			<h2><span>Function</span></h2>
			<div id="field-function">
				<div class="function-component">
					<h3>F<sub>1</sub>(x,y) =</h3>
					<input id="function-f1" class="control-input" value="-y/(pow(x,2)+pow(y,2))">
				</div>
				<div class="function-component">
					<h3>F<sub>2</sub>(x,y) =</h3>
					<input id="function-f2" class="control-input" value="x/(pow(x,2)+pow(y,2))">
				</div>
			</div>

			<h2><span>Controls</span></h2>
			<div class="control-section">
				<h3>Particle Count</h3>
				<div id="particle-count-pair" class="slider-pair">
					<input id="count-slider" class="control-slider" type="range" min="0" max="3000" value="500">
					<input id="count-input" class="control-number" type="number" value="500">
				</div>

				<h3>Particle Size</h3>
				<div id="particle-size-pair" class="slider-pair">
					<input id="size-slider" class="control-slider" type="range" min="1" max="50" value="10">
					<input id="size-input" class="control-number" type="number" value="10">
				</div>

				<h3>Particle Mass</h3>
				<div id="particle-mass-pair" class="slider-pair">
					<input id="mass-slider" class="control-slider" type="range" min="0" max="10" value="3" step="0.1">
					<input id="mass-input" class="control-number" type="number" value="0" step="0.1">
				</div>

				<h3>Max Velocity</h3>
				<div id="particle-velocity-pair" class="slider-pair">
					<input id="velocity-slider" class="control-slider" type="range" min="0" max="10" value="5" step="0.1">
					<input id="velocity-input" class="control-number" type="number" value="5" step="0.1">
				</div>

				<h3>Zoom</h3>
				<div id="zoom-pair" class="slider-pair">
					<input id="zoom-slider" class="control-slider" type="range" min="0.1" max="20" value="10" step="0.1">
					<input id="zoom-input" class="control-number" type="number" value="5" step="0.1">
				</div>
			</div>

			<span id="hide-button" class="menu-button">hide</span>
			<span id="origin-button" class="menu-button">origin</span>
		</section>
	</section>
	<div id="show-button-wrapper" class="hidden">
		<div id="show-button">
			menu
		</div>
	</div>
</body>
</html>