-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (90 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D Fire Particle Animation using SPH</title>
<style>
#container {
display: flex;
}
#sidebar {
margin-left: 10px;
}
.slider-container {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="container">
<canvas id="canvas" width="600" height="600"></canvas>
<div id="sidebar">
<br>
<div class="slider-container">
<label for="numParticles">Number of Particles: </label>
<input type="range" id="numParticles" min="10" max="800" value="800" step="1"><span id="numParticlesValue"></span>
</div>
<div class="slider-container">
<label for="particleSize">Particle Size: </label>
<input type="range" id="particleSize" min="1" max="30" value="6" step="1"><span id="particleSizeValue"></span>
</div>
<div class="slider-container">
<label for="mass">Particle Mass: </label>
<input type="range" id="mass" min="0.1" max="3" value="1" step="0.1"><span id="massValue"></span>
</div>
<div class="slider-container">
<label for="smoothingRadius">Smoothing Radius: </label>
<input type="range" id="smoothingRadius" min="2" max="35" value="3" step="1"><span id="smoothingRadiusValue"></span>
</div>
<div class="slider-container">
<label for="gasConstant">Gas Constant: </label>
<input type="range" id="gasConstant" min="1" max="40000" value="8000" step="10"><span id="gasConstantValue"></span>
</div>
<div class="slider-container">
<label for="viscosity">Viscosity: </label>
<input type="range" id="viscosity" min="0" max="200" value="1" step="1"><span id="viscosityValue"></span>
</div>
<div class="slider-container">
<label for="gravity">Gravity: </label>
<input type="range" id="gravity" min="-20" max="0" value="-9.8" step="-0.1"><span id="gravityValue"></span>
</div>
<div class="slider-container">
<label for="buoyancyConstant">Buoyancy Constant: </label>
<input type="range" id="buoyancyConstant" min="-200" max="-10" value="-150" step="1"><span id="buoyancyConstantValue"></span>
</div>
<div class="slider-container">
<label for="maxLifetime">Max Lifetime: </label>
<input type="range" id="maxLifetime" min="1.1" max="5" value="2" step="0.1"><span id="maxLifetimeValue"></span>
</div>
<div class="slider-container">
<label for="emissionRate">Emission Rate: </label>
<input type="range" id="emissionRate" min="10" max="100" value="50" step="1"><span id="emissionRateValue"></span>
</div>
<div class="slider-container">
<label for="emitVelocity">Emit Velocity: </label>
<input type="range" id="emitVelocity" min="50" max="150" value="50" step="1"><span id="emitVelocityValue"></span>
</div>
<div class="slider-container">
<label for="fireSourceY">Fire Source Y: </label>
<input type="range" id="fireSourceY" min="0" max="600" value="0" step="10"><span id="fireSourceYValue"></span>
</div>
<div class="slider-container">
<label for="fireSourceRange">Fire Source Range: </label>
<input type="range" id="fireSourceRange" min="0" max="600" value="0" step="10"><span id="fireSourceRangeValue"></span>
</div>
<div>
<label for="maxTemperature">Max Temperature:</label>
<select id="maxTemperature">
<option value="5" selected>600℃</option>
<option value="4">1000℃</option>
<option value="3">3000℃</option>
<option value="2">6000℃</option>
<option value="1">12000℃</option>
</select>
</div>
</div>
</div>
<div id="fps"></div>
<script src="main.js"></script>
</body>
</html>