-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (101 loc) · 4.24 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Particles</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script nomodule src="js/nomodule.js"></script>
</head>
<body>
<div id="browser-not-supported">
<h1>Oh dear!</h1>
<p>This browser is too old-fashioned to view this page properly! Try Firefox 60+, Chrome 61+, Edge 16+, Opera 48+ or Safari 11+.</p>
</div>
<canvas id="view"
width="800"
height="450"
>
</canvas>
<div id="constant-force-panel" class="panel panel-closed hide">
<div class="panel-header">
<h2>Constant force</h2>
<button type="button" class="delete">Delete</button>
</div>
<div class="panel-settings">
<label>
<span class="label-text">Strength <span id="constant-force-strength-value">0</span></span>
<input id="constant-force-strength" type="range" min="0" max="10000" step="100" value="0">
</label>
<label>
<span class="label-text">Angle <span id="constant-force-angle-value">0</span></span>
<input id="constant-force-angle" type="range" min="0" max="6.283" step="0.01" value="0">
</label>
</div>
<button class="close" type="button">Close</button>
</div>
<div id="radial-force-panel" class="panel panel-closed hide">
<div class="panel-header">
<h2>Radial force</h2>
<button type="button" class="delete">Delete</button>
</div>
<div class="panel-settings">
<label>
<span class="label-text">Mass <span id="radial-force-mass-value">0</span></span>
<input id="radial-force-mass" type="range" min="-500" max="500" step="1" value="0">
</label>
</div>
<button class="close" type="button">Close</button>
</div>
<div id="emitter-panel" class="panel panel-closed hide">
<div class="panel-header">
<h2>Emitter</h2>
<button type="button" class="delete">Delete</button>
</div>
<div class="panel-settings">
<label>
<span class="label-text">Frequency <span id="emitter-frequency-value">60</span></span>
<input id="emitter-frequency" type="range" min="0" max="500" step="1" value="60">
</label>
<label>
<span class="label-text">Speed <span id="emitter-speed-value">100</span></span>
<input id="emitter-speed" type="range" min="0" max="500" step="1" value="100">
</label>
<label>
<span class="label-text">Angle <span id="emitter-angle-value">0</span></span>
<input id="emitter-angle" type="range" min="0" max="6.283" step="0.01" value="0">
</label>
<label>
<span class="label-text">Spread <span id="emitter-spread-value">1</span></span>
<input id="emitter-spread" type="range" min="0" max="6.283" step="0.01" value="1">
</label>
</div>
<button class="close" type="button">Close</button>
</div>
<div class="help">
<h2>What is this?</h2>
<p>A fun little particle emitter demo, with radial and constant forces.</p>
<p>
Click on emitters, radial or constant forces to select them, and have
a play with their properties. Move them around by clicking and dragging.
</p>
<h2>Keyboard controls</h2>
<dl>
<dt><kbd>?</kbd> or <kbd>h</kbd></dt>
<dd>Toggle this help</dd>
<dt><kbd>e</kbd></dt>
<dd>Add an emitter</dd>
<dt><kbd>r</kbd></dt>
<dd>Add a radial force</dd>
<dt><kbd>c</kbd></dt>
<dd>Add a constant force</dd>
<dt><kbd>d</kbd> / <kbd>Delete</kbd></dt>
<dd>Delete selected emitter or force</dd>
<dt><kbd>-</kbd> / <kbd>+</kbd> (or <kbd>=</kbd>)</dt>
<dd>Decrease/increase simulation speed</dd>
<dt><kbd>↑</kbd>, <kbd>↓</kbd>, <kbd>←</kbd>, <kbd>→</kbd></dt>
<dd>Move selected item</dd>
</dl>
</div>
<script src="js/main.js" type="module"></script>
</body>
</html>