/
datasurface.html
184 lines (168 loc) · 6.52 KB
/
datasurface.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<!--
This is a very early version of what will become WebGLot - a WebGL-
based plotting library for mathematical primitives.
-->
<title>WebGLot Alpha</title>
<!--
This is a matrix library I have been using for the time being, though
I may move to something more standard. I originally got this code from
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/
-->
<script src="CanvasMatrix.js"> </script>
<!-- This is for the jQuery slider I use -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.slider { margin: 10px;
width : 180px; }
</style>
<!-- finish -->
<!--
These are the class files used in WebGLot. I'm not really an expert
in JavaScript, and would prefer an analog to the #include macro in
C++ for this task so that only one script must be included. For the
time being, just copy-and-paste this.
-->
<script src="emptytexture.js"> </script>
<script src="texture.js"> </script>
<script src="ray.js"> </script>
<script src="primitive.js"> </script>
<script src="datasurface.js"> </script>
<script src="box.js"> </script>
<script src="pde3d.js"> </script>
<script src="pde.js"> </script>
<script src="ftexture.js"> </script>
<script src="nurbs.js"> </script>
<script src="noisetexture.js"> </script>
<script src="flow.js"> </script>
<script src="sphere.js"> </script>
<script src="stopwatch.js"> </script>
<script src="screen.js"> </script>
<script src="surface.js"> </script>
<script src="p_surface.js"> </script>
<script src="isosurface.js"> </script>
<script src="grapher.js"> </script>
<script>
var mySurface = null;
var glot = null;
var data = new Array();
data["orange" ] = ["volumes/orange.png", 256, 256, 8, 8 , 64 , 0.2];
data["foot" ] = ["volumes/foot.png", 256, 256, 16, 16, 256, 0.4];
data["bruce" ] = ["volumes/bruce.png", 256, 256, 13, 12, 156, 0.2];
data["cadaver"] = ["volumes/cadaver-small.png", 256, 256, 11, 10, 110, 0.2];
data["bucky" ] = ["volumes/bucky.png", 32, 32, 6, 6 , 32 , 0.4];
data["daisy" ] = ["volumes/daisy.png", 192, 180, 14, 12, 168, 0.06];
data["neghip" ] = ["volumes/neghip.png", 64, 64, 8, 8 , 64 , 0.27];
data["piggy" ] = ["volumes/pig-small.png", 256, 256, 14, 10, 134, 0.33];
data["sheep" ] = ["volumes/sheep-small.png", 176, 176, 16, 16, 256, 0.37];
data["teddy" ] = ["volumes/teddy.png", 512, 512, 8, 8 , 64 , 0.17];
data["tomato" ] = ["volumes/tomato.png", 256, 256, 8, 8 , 64 , 0.07];
data["engine" ] = ["volumes/engine.png", 256, 256, 16, 16, 256, 0.2];
//data["tyler" ] = ["volumes/thorax-small.png", 256, 256, 28, 20, 0.2];
function keyboard(key_event) {
var key = Number(key_event.keyCode);
if (key == 65) {
glot.set("isovalue", glot.get("isovalue") + 0.01);
glot.display();
} else if (key == 90) {
glot.set("isovalue", glot.get("isovalue") - 0.01);
glot.display();
}
}
function gen_isosurface(string) {
if (mySurface) {
glot.primitives.pop();
}
name = string || document.forms["dataform"].elements.data.value;
try {
datum = data[name];
glot.set("isovalue", datum[6]);
glot.set("depth" , datum[5]);
glot.set("width" , datum[1]);
glot.set("height" , datum[2]);
glot.set("b_width" , datum[3]);
glot.set("b_height", datum[4]);
$("#slider").slider({min: 0 , max: 1 , step: 0.01 , value: datum[6], slide: function(event, ui) { glot.set("isovalue", ui.value); glot.display(); document.getElementById("iso-value").innerHTML = ui.value; } });
document.getElementById("iso-value").innerHTML = datum[5];
mySurface = new datasurface(datum[0], datum[1], datum[2], datum[3], datum[4]);
glot.add(mySurface);
glot.draw();
} catch (e) {
glot.gl.console.log("Could not load data " + name);
}
return false;
}
function start() {
/* Instantiate a grapher
*
* In the C++ version, it's a singleton, and so it's possible that
* this interface will change, so use with caution.
*/
glot = new grapher();
glot.setKeyboardFunction(keyboard);
glot.setDomain(-2, 2, -2, 2);
glot.add(new box());
gen_isosurface("engine");
glot.draw();
/* If you've got a function that's time-dependent and thus you'd like
* for it to animate, then call glot.run. It makes sure it constantly
* refreshes, otherwise the plot will be interactive, but static. Well,
* that is to say, it will only refresh when the perpective changes,
* like with zooming in and out, or rotating it.
*/
}
</script>
<style type="text/css">
canvas {
border: 1px solid black;
width:100%;
height:91%;
}
div {
font-size: small;
}
</style>
</head>
<body onload="start()">
<!--
WebGLot currently requires there to be a canvas with id="glot" to work.
This will likely remain the default behavior, but there may be a new
interface added so that drawing on multiple canvases can take place.
Though, it's a long way down on the roadmap.
-->
<canvas id="glot">It seems you do not have support for WebGL.</canvas>
<div id="function_form" style="float:left">
<form name="dataform" onsubmit="gen_isosurface(); return false">
Choose your dataset: <select name="data" onclick="gen_isosurface(); return false">
<option value="orange">An orange</option>
<option value="foot" >A foot</option>
<option value="bruce" >Head scan</option>
<option value="bucky" >A bucky ball</option>
<option value="daisy" >Scan of daisy pollen</option>
<option value="neghip">Electron cloud of high-potential protein</option>
<option value="piggy" >A piggy bank</option>
<option value="sheep" >A sheep's heart</option>
<option value="teddy" >Teddy Bear</option>
<option value="tomato">A tomato</option>
<option value="engine">Engine Block</option>
<!--<option value="tyler" >Tyler's Chest</option>-->
</select>
</form>
</div>
<div id="sliders" style="float:right">
<div style="float:left">
<table>
<tr>
<td>isovalue = </td>
<td id="iso-value"></td>
<td><div class="slider" id="slider" style="float:right"></div></td>
</tr>
</table>
</div>
</div>
</body>
</html>