-
Notifications
You must be signed in to change notification settings - Fork 31
/
index.html
251 lines (229 loc) · 13.5 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
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/graph.js"></script>
<script type="text/javascript">
var structs = {
fulereno: '0 33\n33 1\n1 34\n34 2\n2 35\n35 3\n4 36\n36 5\n5 37\n37 6\n6 38\n38 7\n7 39\n39 8\n9 32\n32 0\n33 43\n34 44\n35 46\n36 47\n37 49\n38 50\n39 40\n32 41\n43 44\n44 45\n45 46\n46 47\n47 48\n48 49\n49 50\n50 51\n51 40\n40 41\n41 42\n42 43\n42 52\n45 53\n48 53\n51 52\n52 53\n0 11\n11 1\n1 12\n12 2\n2 13\n13 3\n4 14\n14 5\n5 15\n15 6\n6 16\n16 7\n7 17\n17 8\n9 10\n10 0\n11 21\n12 22\n13 24\n14 25\n15 27\n16 28\n17 18\n10 19\n21 22\n22 23\n23 24\n24 25\n25 26\n26 27\n27 28\n28 29\n29 18\n18 19\n19 20\n20 21\n20 30\n23 31\n26 31\n29 30\n30 31\n3 4\n8 9',
fulereno2: 'a1 a2\na2 a3\na3 a4\na4 a5\na5 a6\na6 a1\na5 a7\na7 a8\na8 a9\na9 a10\na10 a4\na10 a11\na11 a12\na12 a3\na7 a13\na13 a14\na14 a6\nb1 b2\nb2 b3\nb3 b4\nb4 b5\nb5 b6\nb6 b1\nb5 b7\nb7 b8\nb8 b9\nb9 b10\nb10 b4\nb10 a8\na9 b3\nb7 b13\nb13 b14\nb14 b6\nb14 c3\nc3 c4\nc4 c5\nc5 c6\nc6 b13\nc5 c7\nc7 c8\nc8 c9\nc9 c10\nc10 c4\nc10 c11\nc11 c12\nc12 c3\nc7 c13\nc13 c14\nc14 c6\nd1 d2\nd2 d3\nd3 d4\nd4 d5\nd5 d6\nd6 d1\nd5 d7\nd7 d8\nd8 d9\nd9 d10\nd10 d4\nd10 c8\nc9 d3\nd7 a1\na2 d6\na12 e3\ne3 e4\ne4 e5\ne5 e6\ne6 a11\ne5 e7\ne7 c12\nc11 e10\ne10 e4\ne10 d2\nd1 e3\ne7 b1\nb2 e6\nc13 f3\nf3 f4\nf4 f5\nf5 f6\nf6 c14\nf5 f7\nf7 a13\na14 f10\nf10 f4\nf10 d8\nd9 f3\nf7 b9\nb8 f6',
wheel: 'a1 a2\na2 a3\na3 a4\na4 a1\nb1 b2\nb2 b3\nb3 b4\nb4 b1\nc1 c2\nc2 c3\nc3 c4\nc4 c1\nd1 d2\nd2 d3\nd3 d4\nd4 d1\ne1 e2\ne2 e3\ne3 e4\ne4 e1\nf1 f2\nf2 f3\nf3 f4\nf4 f1\ng1 g2\ng2 g3\ng3 g4\ng4 g1\nh1 h2\nh2 h3\nh3 h4\nh4 h1\ni1 i2\ni2 i3\ni3 i4\ni4 i1\nj1 j2\nj2 j3\nj3 j4\nj4 j1\nk1 k2\nk2 k3\nk3 k4\nk4 k1\nl1 l2\nl2 l3\nl3 l4\nl4 l1\na1 b1\na2 b2\na3 b3\na4 b4\nb1 c1\nb2 c2\nb3 c3\nb4 c4\nc1 d1\nc2 d2\nc3 d3\nc4 d4\nd1 e1\nd2 e2\nd3 e3\nd4 e4\ne1 f1\ne2 f2\ne3 f3\ne4 f4\nf1 g1\nf2 g2\nf3 g3\nf4 g4\ng1 h1\ng2 h2\ng3 h3\ng4 h4\nh1 i1\nh2 i2\nh3 i3\nh4 i4\ni1 j1\ni2 j2\ni3 j3\ni4 j4\nj1 k1\nj2 k2\nj3 k3\nj4 k4\nk1 l1\nk2 l2\nk3 l3\nk4 l4\nl1 a1\nl2 a2\nl3 a3\nl4 a4',
bigwheel: 'a1 a2\na2 a3\na3 a4\na4 a5\na5 a6\na6 a7\na7 a8\na8 a9\na9 a10\na10 a1\na1 b1\na2 b2\na3 b3\na4 b4\na5 b5\na6 b6\na7 b7\na8 b8\na9 b9\na10 b10\nb1 b2\nb2 b3\nb3 b4\nb4 b5\nb5 b6\nb6 b7\nb7 b8\nb8 b9\nb9 b10\nb10 b1\nb1 c1\nb2 c2\nb3 c3\nb4 c4\nb5 c5\nb6 c6\nb7 c7\nb8 c8\nb9 c9\nb10 c10\nc1 c2\nc2 c3\nc3 c4\nc4 c5\nc5 c6\nc6 c7\nc7 c8\nc8 c9\nc9 c10\nc10 c1\nc1 d1\nc2 d2\nc3 d3\nc4 d4\nc5 d5\nc6 d6\nc7 d7\nc8 d8\nc9 d9\nc10 d10\nd1 d2\nd2 d3\nd3 d4\nd4 d5\nd5 d6\nd6 d7\nd7 d8\nd8 d9\nd9 d10\nd10 d1\nd1 e1\nd2 e2\nd3 e3\nd4 e4\nd5 e5\nd6 e6\nd7 e7\nd8 e8\nd9 e9\nd10 e10\ne1 e2\ne2 e3\ne3 e4\ne4 e5\ne5 e6\ne6 e7\ne7 e8\ne8 e9\ne9 e10\ne10 e1\ne1 f1\ne2 f2\ne3 f3\ne4 f4\ne5 f5\ne6 f6\ne7 f7\ne8 f8\ne9 f9\ne10 f10\nf1 f2\nf2 f3\nf3 f4\nf4 f5\nf5 f6\nf6 f7\nf7 f8\nf8 f9\nf9 f10\nf10 f1\nf1 g1\nf2 g2\nf3 g3\nf4 g4\nf5 g5\nf6 g6\nf7 g7\nf8 g8\nf9 g9\nf10 g10\ng1 g2\ng2 g3\ng3 g4\ng4 g5\ng5 g6\ng6 g7\ng7 g8\ng8 g9\ng9 g10\ng10 g1\ng1 h1\ng2 h2\ng3 h3\ng4 h4\ng5 h5\ng6 h6\ng7 h7\ng8 h8\ng9 h9\ng10 h10\nh1 h2\nh2 h3\nh3 h4\nh4 h5\nh5 h6\nh6 h7\nh7 h8\nh8 h9\nh9 h10\nh10 h1\nh1 i1\nh2 i2\nh3 i3\nh4 i4\nh5 i5\nh6 i6\nh7 i7\nh8 i8\nh9 i9\nh10 i10\ni1 i2\ni2 i3\ni3 i4\ni4 i5\ni5 i6\ni6 i7\ni7 i8\ni8 i9\ni9 i10\ni10 i1\ni1 j1\ni2 j2\ni3 j3\ni4 j4\ni5 j5\ni6 j6\ni7 j7\ni8 j8\ni9 j9\ni10 j10\nj1 j2\nj2 j3\nj3 j4\nj4 j5\nj5 j6\nj6 j7\nj7 j8\nj8 j9\nj9 j10\nj10 j1\nj1 k1\nj2 k2\nj3 k3\nj4 k4\nj5 k5\nj6 k6\nj7 k7\nj8 k8\nj9 k9\nj10 k10\nk1 k2\nk2 k3\nk3 k4\nk4 k5\nk5 k6\nk6 k7\nk7 k8\nk8 k9\nk9 k10\nk10 k1\nk1 l1\nk2 l2\nk3 l3\nk4 l4\nk5 l5\nk6 l6\nk7 l7\nk8 l8\nk9 l9\nk10 l10\nl1 l2\nl2 l3\nl3 l4\nl4 l5\nl5 l6\nl6 l7\nl7 l8\nl8 l9\nl9 l10\nl10 l1\nl1 m1\nl2 m2\nl3 m3\nl4 m4\nl5 m5\nl6 m6\nl7 m7\nl8 m8\nl9 m9\nl10 m10\nm1 m2\nm2 m3\nm3 m4\nm4 m5\nm5 m6\nm6 m7\nm7 m8\nm8 m9\nm9 m10\nm10 m1\nm1 n1\nm2 n2\nm3 n3\nm4 n4\nm5 n5\nm6 n6\nm7 n7\nm8 n8\nm9 n9\nm10 n10\nn1 n2\nn2 n3\nn3 n4\nn4 n5\nn5 n6\nn6 n7\nn7 n8\nn8 n9\nn9 n10\nn10 n1\nn1 o1\nn2 o2\nn3 o3\nn4 o4\nn5 o5\nn6 o6\nn7 o7\nn8 o8\nn9 o9\nn10 o10\no1 o2\no2 o3\no3 o4\no4 o5\no5 o6\no6 o7\no7 o8\no8 o9\no9 o10\no10 o1\no1 p1\no2 p2\no3 p3\no4 p4\no5 p5\no6 p6\no7 p7\no8 p8\no9 p9\no10 p10\np1 p2\np2 p3\np3 p4\np4 p5\np5 p6\np6 p7\np7 p8\np8 p9\np9 p10\np10 p1\np1 q1\np2 q2\np3 q3\np4 q4\np5 q5\np6 q6\np7 q7\np8 q8\np9 q9\np10 q10\nq1 q2\nq2 q3\nq3 q4\nq4 q5\nq5 q6\nq6 q7\nq7 q8\nq8 q9\nq9 q10\nq10 q1\nq1 r1\nq2 r2\nq3 r3\nq4 r4\nq5 r5\nq6 r6\nq7 r7\nq8 r8\nq9 r9\nq10 r10\nr1 r2\nr2 r3\nr3 r4\nr4 r5\nr5 r6\nr6 r7\nr7 r8\nr8 r9\nr9 r10\nr10 r1\nr1 s1\nr2 s2\nr3 s3\nr4 s4\nr5 s5\nr6 s6\nr7 s7\nr8 s8\nr9 s9\nr10 s10\ns1 s2\ns2 s3\ns3 s4\ns4 s5\ns5 s6\ns6 s7\ns7 s8\ns8 s9\ns9 s10\ns10 s1\ns1 t1\ns2 t2\ns3 t3\ns4 t4\ns5 t5\ns6 t6\ns7 t7\ns8 t8\ns9 t9\ns10 t10\nt1 t2\nt2 t3\nt3 t4\nt4 t5\nt5 t6\nt6 t7\nt7 t8\nt8 t9\nt9 t10\nt10 t1\nt1 a1\nt2 a2\nt3 a3\nt4 a4\nt5 a5\nt6 a6\nt7 a7\nt8 a8\nt9 a9\nt10 a10',
c2h6: 'c1 h1\nc1 h2\nc1 h3\nc1 c2\nc2 h4\nc2 h5\nc2 h6',
cube: 'a1 a2\na2 a3\na3 a4\na4 a1\nb1 b2\nb2 b3\nb3 b4\nb4 b1\na1 b1\na2 b2\na3 b3\na4 b4',
nanotube: 'a00 a01\na00 a0\na0 a1\na1 a2\na2 a3\na3 a01\na1 a4\na4 a5\na5 a6\na6 a7\na7 a2\na5 a8\na8 a9\na9 a10\na10 a11\na11 a6\na9 a12\na12 a13\na13 a14\na14 a15\na15 a10\na13 a16\na16 a17\na17 a18\na18 a19\na19 a14\na17 a20\na20 a00\na00 a01\na01 a23\na23 a18\na20 b00\nb00 b0\nb0 b1\nb1 a0\nb1 b2\nb2 b3\nb3 a4\nb3 b4\nb4 b5\nb5 a8\nb5 b6\nb6 b7\nb7 a12\nb7 b8\nb8 b9\nb9 a16\nb9 b10\nb10 b00\nb10 c00\nc00 c0\nc0 c1\nc1 c2\nc2 c3\nc3 c4\nc4 c5\nc5 c6\nc6 c7\nc7 c8\nc8 c9\nc9 c10\nc10 c00\nc1 b0\nc3 b2\nc5 b4\nc7 b6\nc9 b8\nc10 d00\nd00 d0\nd0 d1\nd1 d2\nd2 d3\nd3 d4\nd4 d5\nd5 d6\nd6 d7\nd7 d8\nd8 d9\nd9 d10\nd10 d00\nd1 c0\nd3 c2\nd5 c4\nd7 c6\nd9 c8\nd10 e00\ne00 e0\ne0 e1\ne1 e2\ne2 e3\ne3 e4\ne4 e5\ne5 e6\ne6 e7\ne7 e8\ne8 e9\ne9 e10\ne10 e00\ne1 d0\ne3 d2\ne5 d4\ne7 d6\ne9 d8\ne10 f00\nf00 f0\nf0 f1\nf1 f2\nf2 f3\nf3 f4\nf4 f5\nf5 f6\nf6 f7\nf7 f8\nf8 f9\nf9 f10\nf10 f00\nf1 e0\nf3 e2\nf5 e4\nf7 e6\nf9 e8\nf10 g00\ng00 g0\ng0 g1\ng1 g2\ng2 g3\ng3 g4\ng4 g5\ng5 g6\ng6 g7\ng7 g8\ng8 g9\ng9 g10\ng10 g00\ng1 f0\ng3 f2\ng5 f4\ng7 f6\ng9 f8\ng10 h00\nh00 h0\nh0 h1\nh1 h2\nh2 h3\nh3 h4\nh4 h5\nh5 h6\nh6 h7\nh7 h8\nh8 h9\nh9 h10\nh10 h00\nh1 g0\nh3 g2\nh5 g4\nh7 g6\nh9 g8\nh10 i00\ni00 i0\ni0 i1\ni1 i2\ni2 i3\ni3 i4\ni4 i5\ni5 i6\ni6 i7\ni7 i8\ni8 i9\ni9 i10\ni10 i00\ni1 h0\ni3 h2\ni5 h4\ni7 h6\ni9 h8\ni10 j00\nj00 j0\nj0 j1\nj1 j2\nj2 j3\nj3 j4\nj4 j5\nj5 j6\nj6 j7\nj7 j8\nj8 j9\nj9 j10\nj10 j00\nj1 i0\nj3 i2\nj5 i4\nj7 i6\nj9 i8'
};
function wheel(l, n){
var alphabet = "abcdefghijklmnopqrstuvwxyz"
for(var i=0; i<n-1; i++){
var letter = alphabet[i]
var nextletter = alphabet[i+1]
for(var j=0; j<l-1; j++){
console.log(letter+(j+1)+" "+letter+(j+2))
}
console.log(letter+l+" "+letter+1)
for(var j=0; j<l; j++){
console.log(letter+(j+1)+" "+nextletter+(j+1))
}
}
var lastletter = alphabet[n-1];
for(var j=0; j<l-1; j++){
console.log(lastletter+(j+1)+" "+lastletter+(j+2))
}
console.log(lastletter+l+" "+lastletter+1)
for(var j=0; j<l; j++){
console.log(lastletter+(j+1)+" a"+(j+1))
}
}
function hex5(a00, a01, letter, zero){
var l0 = letter+zero;
var l1 = letter+(zero+1);
var l2 = letter+(zero+2);
var l3 = letter+(zero+3);
console.log(a00+" "+l0);
console.log(l0+" "+l1);
console.log(l1+" "+l2);
console.log(l2+" "+l3);
console.log(l3+" "+a01);
}
function nanotubo(h, l){
var alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var letter = 'a';
var a00 = 'a00';
var a01 = 'a01';
console.log(a00+" "+a01);
hex5(a00, a01, letter, 0)
for(var j=1; j<h-1; j++){
a00 = letter + (1+(j-1)*4);
a01 = letter + (2+(j-1)*4);
hex5(a00, a01, letter, 4*j);
}
a00 = letter + (1+(h-2)*4);
a01 = letter + (2+(h-2)*4);
var zero = 4*(h-1);
var l0 = letter+zero;
var l1 = 'a00';
var l2 = 'a01';
var l3 = letter+(zero+3);
console.log(a00+" "+l0);
console.log(l0+" "+l1);
console.log(l1+" "+l2);
console.log(l2+" "+l3);
console.log(l3+" "+a01);
var b = 'b';
var a = 'a';
var b00 = b+'00';
var lastcorner_a = a+(4*(h-1))
var zero = 0;
var b0 = b+(zero);
var b1 = b+(zero+1);
var corner_a = a+0;
console.log(lastcorner_a+" "+b00);
console.log(b00+" "+b0);
console.log(b0+" "+b1);
console.log(b1+" "+corner_a);
for (var j=1; j<h-1; j++){
var corner_a = a+(j*4);
var b00 = b+((j*2)-1);
var zero = j*2;
var b0 = b+(zero);
var b1 = b+(zero+1);
console.log(b00+" "+b0);
console.log(b0+" "+b1);
console.log(b1+" "+corner_a);
}
var b00 = b+(((h-1)*2)-1);
var zero = (h-1)*2;
var b0 = b+(zero);
var b1 = b+'00';
console.log(b00+" "+b0);
console.log(b0+" "+b1);
for(var i=2; i<l; i++){
var c = alphabet[i];
var b = alphabet[i-1];
var b_last = b+(2*(h-1));
var c00 = c+'00';
console.log(b_last+" "+c00)
console.log(c00+" "+c+'0')
for(var j=0; j<2*(h-1); j++){
console.log((c+j)+" "+(c+(j+1)));
}
console.log((c+2*(h-1))+" "+c00);
for(var j=1; j<2*(h-1); j+=2){
console.log(c+j+" "+b+(j-1));
}
}
}
function get_bonds(s){
var lines = s.split("\n");
var bonds = [];
var vertmap = {};
var index = 0;
function _getindex(v){
if(!(v in vertmap)){
vertmap[v] = index++;
}
return vertmap[v];
}
for(var i in lines){
var line = lines[i].trim();
if(line){
var nodes = line.split(" ");
var v1 = nodes[0];
var v2 = nodes[1];
var i1 = _getindex(v1);
var i2 = _getindex(v2);
bonds.push([i1, i2]);
}
}
return bonds;
}
function select_struct(e){
document.getElementById('ta').value = structs[e.selectedOptions[0].value];
}
var bonds;
function go(){
bonds = get_bonds(document.getElementById('ta').value);
window.animh = _3dgraph();
}
function zoomin(){
window.animh.camera.position.z -= 50;
}
function zoomout(){
window.animh.camera.position.z += 50;
}
function faster(){
window.animh.speed *= 1.1;
}
function slower(){
window.animh.speed /= 1.1;
}
function save(){
var s = document.getElementById('ta').value
var h = btoa(s);
document.location.hash = "#"+h;
window.alert("Structure saved in the URL")
}
</script>
</head>
<body>
<div class="container-fluid" style="margin: 30px;">
<div class="row-fluid">
<div class="span3">
<div class="alert alert-info">
<h3>3D Graph renderer</h3>
<p>Nodes repel each other (1/distance^2) and connections behave like springs (K * delta_length)</p>
<p>Select a structure, modify if you want, and click Go.</p>
<p><a href="https://github.com/tonylampada/webgl_graphs/tree/gh-pages">Fork me on Github</a> (maybe add some structures?)</p>
</div>
<div>
Select structure
<select id="e" onchange="select_struct(this)">
<option value="fulereno2">Fulereno (agora sim!)</option>
<option value="fulereno">Fulereno (sqn)</option>
<option value="wheel">wheel</option>
<option value="bigwheel">big wheel</option>
<option value="c2h6">c2h6</option>
<option value="cube">cube</option>
<option value="nanotube">Carbon Nanotube</option>
</select>
</div>
<div>
Bonds
<textarea id="ta" style="height: 150px"></textarea>
</div>
<div>
<button onclick="go()">Go</button>
</div>
<div>
Zoom
<button onclick="zoomin()">++++</button>
<button onclick="zoomout()">------</button>
</div>
<div>
Speed
<button onclick="faster()">++++</button>
<button onclick="slower()">------</button>
</div>
<div>
<button onclick="save()">Save</button>
</div>
</div><!--/span-->
<div class="span9" id="renderHere" style="border: solid 1px; height: 80%">
</div><!--/span-->
</div><!--/row-->
</div>
</body>
<script type="text/javascript">
var e = document.getElementById('e');
var h = document.location.hash;
if(h){
h = h.substr(1);
document.getElementById('ta').value = atob(h);
} else {
document.getElementById('ta').value = structs[e.selectedOptions[0].value];
}
go();
</script>
</html>