-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
140 lines (108 loc) · 4.46 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<title>Turing Pattern in Three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:title" content="Turing patterns with Three.js" />
<meta property="og:description" content="Wrapping Turing patterns around various kinds of objects in the Three.js library! A project by Honesty Kim, Patricia Lan, Saurabh Datar, and Travis Shafer for CME 161 at Stanford University" />
<meta property="og:url" content="https://ssdatar.github.io/turing" />
<meta property="og:image" content="https://raw.githubusercontent.com/ssdatar/turing/master/img/turing.jpg" />
<meta name="keywords" content="Turing pattern, computer science, programming, Stanford, data visualization, Three.js, 3D, science">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<style>
body {
color: #000000;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
.main-title, .names, #text{
color: white;
text-align: left;
}
.equation1 {
-webkit-filter: invert(100%);
filter: invert(100%);
float: left;
z-index: 100;
}
.equation2 {
-webkit-filter: invert(100%);
filter: invert(100%);
float: left;
z-index: 100;
}
#text{
display:block;
text-align: left;
z-index: 1000;
margin-top: 11em;
}
.img-wrapper{
width: 300px;
/*float: left;*/
display: inline-block;
text-align: center;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 2em;
}
#three{
position: fixed;
top: 100px;
right: 150px;
}
</style>
</head>
<body>
<!-- Container for Visualization -->
<div class="container">
<h1 class="main-title">Visualizing Turing Patterns with Three.js</h1>
<h3 class="names">By Honesty Kim, Patricia Lan, Saurabh Datar, & Travis Shafer</h3>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="row">
<div class="col-md-4" id="text">
<p>These Turing patterns are generated by solving 2D Lengyel-Epstein model.</p>
<div class="img-wrapper">
<img class = "equation1" src="http://latex.codecogs.com/svg.latex?\frac{\partial u}{\partial t} = \nabla^2 u + a - u + 4 \frac{uv}{1+u^2}" border="0"/>
</div>
<div class = "img-wrapper">
<img class = "equation2" src="http://latex.codecogs.com/svg.latex?\frac{\partial v}{\partial t} =\sigma[ c \nabla^2 v + b (u - \frac{uv}{1+u^2})]" border="0"/>
</div>
<p>By varying the parameters a and b you can generate different patterns. Some examples: For spots, a=29.4, b=1.555. For stripes, a=12.6, b=0.355. For instability, a=27, b=0.1.</p>
<p>These patterns can take several minutes to reach equilibrium.</p>
</div>
<div class="col-md-8">
<div id="my-gui-container">
<canvas id="three"></canvas>
</div>
</div>
</div>
</div>
<!-- End Container -->
<!-- General JS Libraries (please don't modify these) -->
<!-- General Utilities (no dependencies) -->
<script src="assets/js/libs/ui/dat.gui.min.js"></script>
<script src="assets/js/libs/ui/stats.min.js"></script>
<script src="assets/js/libs/maths/math.js"></script>
<script src="assets/js/libs/maths/numeric.min.js"></script>
<!-- Renderer -->
<script src="assets/js/libs/maths/three.min.js"></script>
<!-- Renderer Plug-ins (depends on Three.js being loaded first) -->
<script src="assets/js/libs/renderers/three/plugins/AxesHelper2.js"></script>
<script src="assets/js/libs/renderers/three/plugins/OrbitControls.js"></script>
<script src="assets/js/libs/renderers/three/plugins/DeviceOrientationControls.js"></script>
<!-- Physics (boids) -->
<script src="assets/js/libs/maths/vector3.js"></script>
<script src="assets/js/threejs_turing/turing.js"></script>
<script src="assets/js/threejs_turing/threejs_turing.js"></script>
<!-- End Your JS Files -->
</body>
</html>