-
Notifications
You must be signed in to change notification settings - Fork 13
/
example.html
101 lines (93 loc) · 3.49 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Floom - MPM Fluid Simulation</title>
<style>
#help {
position: absolute;
top: -15px;
left: 100px;
}
#help-icon {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
border: 2px solid #dddddd;
padding: 0 10px;
width: 15px;
color: white;
}
#help-display {
display: none;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
border: 2px solid #dddddd;
padding: 0 15px;
margin: 2px;
color: white;
}
#help-icon:hover ~ #help-display {
display: block;
}
</style>
<script src="src/external/jquery.js"></script>
<script src="src/external/d3.js"></script>
<script src="src/external/stats.js"></script>
<script src="src/external/dat.gui.js"></script>
<script src="src/external/libraryextensions.js"></script>
</head>
<body>
<canvas id="floom" width=1366 height=768 resize style="width:1366px; height:768px; background-color:black"></canvas>
<script src="src/bootstrap.js" type="module"></script>
<div id="help">
<h1 id="help-icon">?</h1>
<div id="help-display">
<h2>Floom - A Fluid Simulation using the Material Point Method</h2>
<h3>Controls</h3>
<ul>
<li>Mouse Wheel - Zoom in/out</li>
<li>Right Mouse Button - Hold to pan</li>
<li>Left Mouse Button - Use current tool</li>
<li>Switch to a specific tool by pressing the respective button</li>
</ul>
Available tools:
<ul>
<li>[D] Drag - Particles follow the movement of your pointer</li>
<li>[A] Attract - Draws nearby particles to mouse pointer</li>
<li>[R] Repel - Repels nearly particles from mouse pointer</li>
<li>[S] Spawn - Creates new particles under mouse position</li>
<li>[C] Consume - Removes particle near pointer<br />
(Caveat: Springs of elastic Material are not removed currently)
</li>
</ul>
<h3>Options</h3>
<ul>
<li>Gravity - Affect gravity of the simulation</li>
<li>Surface Tension - Toggle between a simple fast and a more sophisticated implementation</li>
<ul>
<li>Simple - All particles share the same common characteristics</li>
<li>Surface Tension - Different Materials may have different properties and 'blob' together</li>
</ul>
<li>Draw Grid - Render the grid extent and active nodes of the simulation</li>
<li>Obstacles - Render and calculate simple circular objects</li>
<li>Compute Springs - Use experimental to simulate elastic materials</li>
<li>Draw Springs - Render springs with colors representing the spring's tension</li>
<li>Materials - Configure various properties of the used materials<br />
(E.g. changing a material's mass affects the buoyancy of the corresponding particles)
</li>
</ul>
<h3>Performance</h3>
<p>Toggle performance monitoring using the button in the lower left corner</p>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54779372-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>