-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfalling-sand.html
128 lines (125 loc) · 6.41 KB
/
falling-sand.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
<link rel="stylesheet" type="text/css" href="./falling-sand-sandbox/styles.css">
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Falling Sand Simulator</title>
</head>
<body>
<div id="app">
<div id="container">
<canvas id="canvas" width="800" height="800"></canvas>
</div>
<div id="external">
<div id="menu">
<div id="btns">
<div id="elementButtons">
<button id="sand">Sand</button>
<button id="water">Water</button>
<button id="wood">Wood</button>
<button id="stone">Stone</button>
<button id="smoke">Smoke</button>
<button id="fire">Fire</button>
<button id="custom">Custom</button>
<button id="eraser">Eraser</button>
</div>
<div id="toolbuttons">
<button id="plusbrush">+ Brush Size</button>
<button id="minusbrush">- Brush Size</button>
<button id="reset">Reset Grid</button>
<button id="plusgrid">+ Grid</button>
<button id="minusgrid">- Grid</button>
<button id="fillgrid">Fill Grid</button>
<button id="pause">Pause</button>
</div>
</div>
<div id="editWindow">
<div id="editWindowContent">
<div id="editTitleWindow">
<h2>Settings</h2>
<!--<button id="closeEditWindow">Close</button>-->
</div>
<div id="editValueWindow">
<div>
<label for="elementName">Name:</label>
<input type="text" id="elementName" name="elementName" maxlength="20">
<br>
<label for="elementColor">Color:</label>
<input type="color" id="elementColor" name="elementColor">
<br>
<label for="elementLife">Life:</label>
<input type="number" id="elementLife" name="elementLife" min="0" max="10000">
<br>
<label for="elementReduction">Reduction Rate:</label>
<input type="number" id="elementReduction" name="elementReduction" min="0" max="1000">
<br>
<label for="elementFireSpread">Fire Spread:</label>
<input type="number" id="elementFireSpread" name="elementFireSpread" min="0" max="1">
</div>
<div>
<label for="elementAcceleration">Acceleration:</label>
<input type="number" id="elementAcceleration" name="elementAcceleration" min="0"
max="1000">
<br>
<label for="elementMaxSpeed">Max Speed:</label>
<input type="number" id="elementMaxSpeed" name="elementMaxSpeed" min="0" max="1000">
<br>
<label for="elementDispersion">Dispersion:</label>
<input type="number" id="elementDispersion" name="elementDispersion" min="0" max="1000">
<br>
<label for="elementBrushProbability">Brush Probability:</label>
<input type="number" id="elementBrushProbability" name="elementBrushProbability" min="0"
max="100">
<br>
<button id="resetSettings">Reset</button>
</div>
</div>
</div>
</div>
</div>
<div id="info">
<div id="debugInfo">
<p id="selected">Selected: Sand</p>
<p id="brush">Brush Size: 5</p>
<p id="mousePosition">Mouse position: 0, 0</p>
<p id="frameRate">Avg Frame Rate: 0 fps</p>
<p id="frameRateMax">Max Frame Rate: 0 fps</p>
<p id="frameRateMin">Min Frame Rate: 0 fps</p>
</div>
<div id="debugOptions">
<label for="debugOptionsSelect">Behaviour View: </label>
<select id="debugOptionsSelect">
<option value="">None</option>
<option value="debugVelocity">View Velocity</option>
<option value="debugMovement">View Movement</option>
<option value="debugLife">View Life</option>
</select>
<br><br>
<label for="renderDelay">Render Delay: </label>
<input type="range" id="renderDelay" name="renderDelay" min="0" max="50" value="0">
<br><br>
<label for="backgroundColor">Background Color:</label>
<input type="color" id="backgroundColor" name="backgroundColor">
<br><br>
<button id="resetAll">Reset All Settings</button>
<br><br>
<label for="replacement">Brush Replacement:</label>
<input type="checkbox" id="replacement" name="replacement">
<br><br>
</div>
</div>
<div id="titleCard">
<h1>Tileo</h1>
<br>
<a href="https://github.com/quaidsage/Falling-Sand-Sandbox" target="_blank">
<button id="githubrepo">Github Repo</button>
</a>
<a href="https://quaidsage.com">
<button id="home">Return to portfolio</button>
</a>
<p></p>
</div>
</div>
</div>
<script type='module' src="./falling-sand-sandbox/main.js"></script>
</body>
</html>