-
Notifications
You must be signed in to change notification settings - Fork 14
/
fluid.html
57 lines (48 loc) · 2.27 KB
/
fluid.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
<!doctype html>
<head>
<title>LIC - Line integral convolution</title>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="all" type="text/css" href='style.css' />
<link rel="stylesheet" media="all" type="text/css" href='fluid.css' />
</head>
<body>
<div id="log-panel" style="display:none;">
<span id="log-message"></span>
</div>
<div id="fallback" class="fallback"></div>
<div id="container">
<div id="title">
<h1>Fluid Simulation via Lagrangian-Eulerian Advection</h1>
</div>
<div class='controls'>
Move the cursor in the canvas to mix the fluid. See a video <a href='http://www.youtube.com/watch?v=v83CrHQHK70'>here</a>.
</div>
<div class='description'>
This visualization implements the techniques in <a target='_blank' href='http://www.cs.ucdavis.edu/~ma/ECS276/readings/Jobard_TVCG02.pdf'>Lagrangian-Eulerian Advection of Noise and Dye Textures
for Unsteady Flow Visualization</a> to create a fluid simulation. Click and drag the cursor in the black canvas to create a velocity field and mix the fluid.
</div>
<div class='title' style='display:none'>
<a href='#'>Click here</a> to restore.
</div>
<div class='canvas-container'>
<canvas id='canvas'></canvas>
</div>
<a href='#' class='fullscreen'>Go fullscreen!</a>
</div>
<div class="footer">
Copyright © <a href='http://twitter.com/'>Twitter, Inc.</a> - Author: <a href="http://philogb.github.com/">Nicolas Garcia
Belmonte</a>.
</div>
<script src='js/PhiloGL.js'></script>
<script>
if (!PhiloGL.hasWebGL() || !PhiloGL.hasExtension('OES_texture_float')) {
document.body.className = 'no-webgl';
document.getElementById('fallback').innerHTML = ''
+ '<div style="margin:10px;">'
+ 'Your browser (or hardware) does not support WebGL (or floating point textures). Go <a href="http://get.webgl.org">here</a> to find more information.'
+ '</div>'
+ '<iframe width="420" height="315" src="http://www.youtube.com/embed/v83CrHQHK70?rel=0" frameborder="0" allowfullscreen></iframe>';
}
</script>
<script src='js/fluid.js'></script>
</body>