Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 30.5 KB
Newer Older
amandaghassaei's avatar
starting app    
amandaghassaei committed
1
2
3
4
5
6
7
8
9 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Origami Simulator</title>

    <link href="dependencies/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="dependencies/jquery-ui.min.css"/>
amandaghassaei's avatar
nav    
amandaghassaei committed
10
11
12 
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
amandaghassaei's avatar
small change    
amandaghassaei committed
13
14
15
16
17
18
19
20
21
22
23 
    <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','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-86531114-8', 'auto');
      ga('send', 'pageview');

    </script>
amandaghassaei's avatar
starting app    
amandaghassaei committed
24
amandaghassaei's avatar
starting sim    
amandaghassaei committed
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 
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        void main() {
           gl_Position = vec4(a_position, 0, 1);
        }
    </script>

    <script id="packToBytesShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_floatTextureDim;
        uniform sampler2D u_floatTexture;
        uniform float u_vectorLength;
        float shift_right (float v, float amt) {
            v = floor(v) + 0.5;
            return floor(v / exp2(amt));
        }
        float shift_left (float v, float amt) {
            return floor(v * exp2(amt) + 0.5);
        }
        float mask_last (float v, float bits) {
            return mod(v, shift_left(1.0, bits));
        }
        float extract_bits (float num, float from, float to) {
            from = floor(from + 0.5); to = floor(to + 0.5);
            return mask_last(shift_right(num, from), to - from);
        }
        vec4 encode_float (float val) {
            if (val == 0.0) return vec4(0, 0, 0, 0);
            float sign = val > 0.0 ? 0.0 : 1.0;
            val = abs(val);
            float exponent = floor(log2(val));
            float biased_exponent = exponent + 127.0;
            float fraction = ((val / exp2(exponent)) - 1.0) * 8388608.0;
            float t = biased_exponent / 2.0;
            float last_bit_of_biased_exponent = fract(t) * 2.0;
            float remaining_bits_of_biased_exponent = floor(t);
            float byte4 = extract_bits(fraction, 0.0, 8.0) / 255.0;
            float byte3 = extract_bits(fraction, 8.0, 16.0) / 255.0;
            float byte2 = (last_bit_of_biased_exponent * 128.0 + extract_bits(fraction, 16.0, 23.0)) / 255.0;
            float byte1 = (sign * 128.0 + remaining_bits_of_biased_exponent) / 255.0;
            return vec4(byte4, byte3, byte2, byte1);
        }
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            float textureXcoord = floor((fragCoord.x - 0.5)/u_vectorLength+0.0001) + 0.5;
            vec4 data = texture2D(u_floatTexture, vec2(textureXcoord, fragCoord.y)/u_floatTextureDim);
            int textureIndex = int(floor(mod(fragCoord.x-0.5+0.0001, u_vectorLength)));
            if (textureIndex == 0) gl_FragColor = encode_float(data[0]);
            else if (textureIndex == 1) gl_FragColor = encode_float(data[1]);
            else if (textureIndex == 2) gl_FragColor = encode_float(data[2]);
            else if (textureIndex == 3) gl_FragColor = encode_float(data[3]);
        }
    </script>

    <script id="zeroTexture" type="x-shader/x-fragment">
        void main(){
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
81 
            gl_FragColor = vec4(0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96 
        }
    </script>

    <script id="positionCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform float u_dt;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_velocity;
        uniform sampler2D u_mass;

        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;
amandaghassaei's avatar
drag node    
amandaghassaei committed
97
98 
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
amandaghassaei's avatar
starting sim    
amandaghassaei committed
99
100 
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
drag node    
amandaghassaei committed
101 
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
102
103
104
105
106 
                return;
            }

            vec3 velocity = texture2D(u_velocity, scaledFragCoord).xyz;
            vec3 position = velocity*u_dt + lastPosition;
amandaghassaei's avatar
debugging    
amandaghassaei committed
107 
            gl_FragColor = vec4(position, 0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
108
109
110
111
112
113 
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
debugged shader    
amandaghassaei committed
114 
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
115
116
117 
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
eod    
amandaghassaei committed
118 
        uniform float u_creasePercent;
amandaghassaei's avatar
starting sim    
amandaghassaei committed
119
120
121
122
123
124 
        uniform float u_dt;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_lastVelocity;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_externalForces;
        uniform sampler2D u_mass;
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
125 
        uniform sampler2D u_meta;//[beamsIndex, numBeam, creaseMeta2Index, numCreases]
amandaghassaei's avatar
debugged shader    
amandaghassaei committed
126 
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
127
128
129
130 
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
        uniform sampler2D u_creaseMeta2;//[creaseIndex, momentArmLength, nodeIndex]
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
amandaghassaei's avatar
starting sim    
amandaghassaei committed
131
132
133
134
135
136 

        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
drag node    
amandaghassaei committed
137 
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
138 
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
139
140
141
142
143
144
145
146 
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
            vec3 lastVelocity = texture2D(u_lastVelocity, scaledFragCoord).xyz;
            vec3 originalPosition = texture2D(u_originalPosition, scaledFragCoord).xyz;

            vec4 neighborIndices = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
147 
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
148
amandaghassaei's avatar
ui    
amandaghassaei committed
149 
            for (int j=0;j<100;j++){//for all beams (up to 100, had to put a const int in here)
amandaghassaei's avatar
debugged shader    
amandaghassaei committed
150
151
152
153
154
155
156
157 
                if (j >= int(meta[1])) break;

                float beamIndex1D = meta[0]+float(j);
                vec2 beamIndex = vec2(mod(beamIndex1D, u_textureDimEdges.x)+0.5, floor(beamIndex1D/u_textureDimEdges.x)+0.5);
                vec2 scaledBeamIndex = beamIndex/u_textureDimEdges;
                vec4 beamMeta = texture2D(u_beamMeta, scaledBeamIndex);

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
starting sim    
amandaghassaei committed
158
159
160
161
162
163
164
165 
                vec2 neighborIndex = vec2(mod(neighborIndex1D, u_textureDim.x)+0.5, floor(neighborIndex1D/u_textureDim.x)+0.5);
                vec2 scaledNeighborIndex = neighborIndex/u_textureDim;
                vec3 neighborLastPosition = texture2D(u_lastPosition, scaledNeighborIndex).xyz;
                vec3 neighborLastVelocity = texture2D(u_lastVelocity, scaledNeighborIndex).xyz;
                vec3 neighborOriginalPosition = texture2D(u_originalPosition, scaledNeighborIndex).xyz;

                vec3 nominalDist = neighborOriginalPosition-originalPosition;
                vec3 deltaP = neighborLastPosition-lastPosition+nominalDist;
amandaghassaei's avatar
small changes    
amandaghassaei committed
166 
                deltaP -= normalize(deltaP)*beamMeta[2];
amandaghassaei's avatar
starting sim    
amandaghassaei committed
167
168 
                vec3 deltaV = neighborLastVelocity-lastVelocity;
amandaghassaei's avatar
debugging    
amandaghassaei committed
169 
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
starting sim    
amandaghassaei committed
170
171 
                force += _force;
            }
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
172
173
174
175
176
177
178 

            for (int j=0;j<100;j++){//for all creases (up to 100, had to put a const int in here)
                if (j >= int(meta[3])) break;

                float nodeCreaseIndex1D = meta[2]+float(j);
                vec2 nodeCreaseIndex = vec2(mod(nodeCreaseIndex1D, u_textureDimNodeCreases.x)+0.5, floor(nodeCreaseIndex1D/u_textureDimNodeCreases.x)+0.5);
                vec2 scaledNodeCreaseIndex = nodeCreaseIndex/u_textureDimNodeCreases;
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
179 
                vec4 creaseMeta2 = texture2D(u_creaseMeta2, scaledNodeCreaseIndex);//[creaseIndex, length to node, nodeType (1 or 2), isReaction]
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
180
181
182
183
184
185
186
187 

                float creaseIndex1D = creaseMeta2[0];
                vec2 creaseIndex = vec2(mod(creaseIndex1D, u_textureDimCreases.x)+0.5, floor(creaseIndex1D/u_textureDimCreases.x)+0.5);
                vec2 scaledCreaseIndex = creaseIndex/u_textureDimCreases;

                vec4 thetas = texture2D(u_theta, scaledCreaseIndex);
                vec3 creaseMeta = texture2D(u_creaseMeta, scaledCreaseIndex).xyz;//[k, d, targetTheta]
amandaghassaei's avatar
removed instability    
amandaghassaei committed
188
189
190 
                float targetTheta = creaseMeta[2] * u_creasePercent;
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
191
192
193 
                if (creaseMeta2[3] < 0.0){//crease reaction
                    float nodeNum = creaseMeta2[2];
amandaghassaei's avatar
dynamic model working again    
amandaghassaei committed
194 
                    //node #1
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
195
196
197
198
199
200
201
202
203
204
205 
                    float normalIndex1D = thetas[2];
                    vec2 normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    vec2 scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal1 = texture2D(u_normals, scaledNormalsIndex).xyz;

                    //node #2
                    normalIndex1D = thetas[3];
                    normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal2 = texture2D(u_normals, scaledNormalsIndex).xyz;
amandaghassaei's avatar
removed instability    
amandaghassaei committed
206
207 
                    float momentArm1 = creaseMeta2[1];
                    float momentArm2 = creaseMeta2[2];
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
208
amandaghassaei's avatar
removed instability    
amandaghassaei committed
209 
                    vec3 _force = -0.5*(angForce/momentArm1*normal1 + angForce/momentArm2*normal2);
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224 
                    force += _force;
                } else {
                    float nodeNum = creaseMeta2[2];
                    float normalIndex1D = thetas[2];//node #1
                    if (nodeNum > 1.1) {
                        normalIndex1D = thetas[3];//node #2
                    }
                    vec2 normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    vec2 scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal = texture2D(u_normals, scaledNormalsIndex).xyz;

                    float momentArm = creaseMeta2[1];

                    vec3 _force = angForce/momentArm*normal;
                    force += _force;
amandaghassaei's avatar
eod    
amandaghassaei committed
225 
                }
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
226
227
228 

            }
amandaghassaei's avatar
adding limits on theta    
amandaghassaei committed
229 
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
starting sim    
amandaghassaei committed
230
231
232
233 
            gl_FragColor = vec4(velocity,0.0);
        }
    </script>
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
234 
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
removed instability    
amandaghassaei committed
235 
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
236 
        precision mediump float;
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
237 
        uniform vec2 u_textureDim;
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
238
239
240
241
242 
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_normals;
        uniform sampler2D u_lastTheta;
        uniform sampler2D u_creaseVectors;
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
243
244 
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
index sync    
amandaghassaei committed
245 
        uniform float u_dt;
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
246
247
248
249
250
251
252
253
254 

        void main(){

            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;

            vec4 lastTheta = texture2D(u_lastTheta, scaledFragCoord);

            if (lastTheta[2]<0.0){
amandaghassaei's avatar
adding limits on theta    
amandaghassaei committed
255 
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
256
257
258
259
260
261
262
263
264
265
266 
                return;
            }

            vec2 normal1Index = vec2(mod(lastTheta[2], u_textureDimFaces.x)+0.5, floor(lastTheta[2]/u_textureDimFaces.x)+0.5);
            normal1Index /= u_textureDimFaces;
            vec2 normal2Index = vec2(mod(lastTheta[3], u_textureDimFaces.x)+0.5, floor(lastTheta[3]/u_textureDimFaces.x)+0.5);
            normal2Index /= u_textureDimFaces;

            vec3 normal1 = texture2D(u_normals, normal1Index).xyz;
            vec3 normal2 = texture2D(u_normals, normal2Index).xyz;
amandaghassaei's avatar
removed instability    
amandaghassaei committed
267 
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
index sync    
amandaghassaei committed
268
269 
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
270 
            //float theta = acos(dotNormals);
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
271
272
273
274
275
276
277
278
279 

            vec2 creaseVectorIndices = texture2D(u_creaseVectors, scaledFragCoord).xy;
            vec2 creaseNodeIndex = vec2(mod(creaseVectorIndices[0], u_textureDim.x)+0.5, floor(creaseVectorIndices[0]/u_textureDim.x)+0.5);
            vec2 scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node0 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
            creaseNodeIndex = vec2(mod(creaseVectorIndices[1], u_textureDim.x)+0.5, floor(creaseVectorIndices[1]/u_textureDim.x)+0.5);
            scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node1 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
280
281
282
283 
            //https://math.stackexchange.com/questions/47059/how-do-i-calculate-a-dihedral-angle-given-cartesian-coordinates
            vec3 creaseVector = normalize(node1-node0);
            float x = dotNormals;
            float y = dot(cross(normal1, creaseVector), normal2);
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
284
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
285
286
287
288 
            float theta = atan(y, x);

            //float sign = dot(cross(normal1, normal2), creaseVector);
            //if (sign < 0.0) theta *= -1.0;
amandaghassaei's avatar
index sync    
amandaghassaei committed
289
290 
            float diff = theta-lastTheta[0];
            float projectedTheta = lastTheta[0] + lastTheta[1]*u_dt;
amandaghassaei's avatar
debugging    
amandaghassaei committed
291 
            if (diff < -5.0) {
amandaghassaei's avatar
index sync    
amandaghassaei committed
292
293 
                diff += TWO_PI;
                theta = lastTheta[0] + diff;
amandaghassaei's avatar
debugging    
amandaghassaei committed
294
295 
            } else if (diff > 5.0) {
                diff  -= TWO_PI;
amandaghassaei's avatar
index sync    
amandaghassaei committed
296
297 
                theta = lastTheta[0] + diff;
            }
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
298 
            gl_FragColor = vec4(theta, creaseVectorIndices[1], lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
299
300 
        }
    </script>
amandaghassaei's avatar
debugging    
amandaghassaei committed
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333 

    <script id="normalCalc" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimFaces;
        uniform sampler2D u_faceVertexIndices;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;

        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimFaces;

            vec3 indices = texture2D(u_faceVertexIndices, scaledFragCoord).xyz;

            float nodeIndex1D = indices[0];
            vec2 nodeIndex = vec2(mod(nodeIndex1D, u_textureDim.x)+0.5, floor(nodeIndex1D/u_textureDim.x)+0.5);
            vec2 scaledNodeIndex = nodeIndex/u_textureDim;
            vec3 a = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;

            nodeIndex1D = indices[1];
            nodeIndex = vec2(mod(nodeIndex1D, u_textureDim.x)+0.5, floor(nodeIndex1D/u_textureDim.x)+0.5);
            scaledNodeIndex = nodeIndex/u_textureDim;
            vec3 b = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;

            nodeIndex1D = indices[2];
            nodeIndex = vec2(mod(nodeIndex1D, u_textureDim.x)+0.5, floor(nodeIndex1D/u_textureDim.x)+0.5);
            scaledNodeIndex = nodeIndex/u_textureDim;
            vec3 c = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;

            gl_FragColor = vec4(normalize(cross(b-a, c-a)), 0.0);
        }
    </script>
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
334
amandaghassaei's avatar
starting app    
amandaghassaei committed
335
336
337 
    <script type="text/javascript" src="dependencies/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="dependencies/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>
amandaghassaei's avatar
debugging    
amandaghassaei committed
338 
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
starting app    
amandaghassaei committed
339 
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
centered gep    
amandaghassaei committed
340 
    <script type="text/javascript" src="dependencies/OrthographicTrackballControls.js"></script>
amandaghassaei's avatar
starting app    
amandaghassaei committed
341
342 
    <script type="text/javascript" src="dependencies/underscore-min.js"></script>
    <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>
amandaghassaei's avatar
svg import    
amandaghassaei committed
343 
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
adding in svg    
amandaghassaei committed
344 
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
adding mesh    
amandaghassaei committed
345 
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
starting to add static solver    
amandaghassaei committed
346 
    <script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
amandaghassaei's avatar
starting app    
amandaghassaei committed
347
amandaghassaei's avatar
ambient occlusion    
amandaghassaei committed
348
349
350
351
352
353
354
355 
    <script type="text/javascript" src="dependencies/EffectComposer.js"></script>
    <script type="text/javascript" src="dependencies/MaskPass.js"></script>
    <script type="text/javascript" src="dependencies/ShaderPass.js"></script>
    <script type="text/javascript" src="dependencies/CopyShader.js"></script>
    <script type="text/javascript" src="dependencies/SSAOShader.js"></script>
    <script type="text/javascript" src="dependencies/Detector.js"></script>
    <script type="text/javascript" src="dependencies/RenderPass.js"></script>
amandaghassaei's avatar
small changes    
amandaghassaei committed
356
357 
    <script type="text/javascript" src="js/dynamic/GLBoilerplate.js"></script>
    <script type="text/javascript" src="js/dynamic/GPUMath.js"></script>
amandaghassaei's avatar
starting app    
amandaghassaei committed
358
359
360 
    <script type="text/javascript" src="js/controls.js"></script>
    <script type="text/javascript" src="js/threeView.js"></script>
    <script type="text/javascript" src="js/globals.js"></script>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
361
362 
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
363 
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
364 
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
starting to add static solver    
amandaghassaei committed
365 
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod    
amandaghassaei committed
366 
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
svg import    
amandaghassaei committed
367 
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
save stl    
amandaghassaei committed
368 
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
starting app    
amandaghassaei committed
369
370
371
372 

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
373
374
375
376
377
378
379
380
381
382
383
384
385 
<nav id="globalNav" class="navbar navbar-inverse navbar-embossed" role="navigation">
    <div class="navbar-header">
        <a id="logo" class="navbar-brand" target="_blank" href="http://cba.mit.edu/">
            <img id="inactiveLogo" src="logo.png"/>
            <img id="activeLogo" src="logo-active.png"/>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-01">
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">File <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
amandaghassaei's avatar
demo files dropdown    
amandaghassaei committed
386
387
388
389 
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Demo Files<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
amandaghassaei's avatar
tri tess    
amandaghassaei committed
390 
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb (six-crease base)</a></li>
amandaghassaei's avatar
waterbomb    
amandaghassaei committed
391 
                            <li><a href="#" class="demo" data-url="Tessellations/waterbombTwist.svg">Waterbomb (eight-crease base)</a></li>
amandaghassaei's avatar
square twist    
amandaghassaei committed
392 
                            <li><a href="#" class="demo" data-url="Tessellations/singlesquaretwist.svg">Square Twist (single)</a></li>
amandaghassaei's avatar
many square twists    
amandaghassaei committed
393 
                            <li><a href="#" class="demo" data-url="Tessellations/squaretwistManyAngles.svg">Square Twist (many angles)</a></li>
amandaghassaei's avatar
tri tess    
amandaghassaei committed
394 
                            <li><a href="#" class="demo" data-url="Tessellations/reschtritessellation.svg">Resch Triangle Tessellation</a></li>
amandaghassaei's avatar
hypar    
amandaghassaei committed
395 
                            <li><a href="#" class="demo" data-url="Origami/hypar.svg">Hypar (not fully working yet)</a></li>
amandaghassaei's avatar
curved txt    
amandaghassaei committed
396
397 
                            <li class="divider"></li>
                            <li><a href="#" class="demo" data-url="Curved/creaseMesh.txt">Curved Crease 1</a></li>
amandaghassaei's avatar
demo files dropdown    
amandaghassaei committed
398
399 
                        </ul>
                    </li>
amandaghassaei's avatar
nav    
amandaghassaei committed
400 
                    <li class="divider"></li>
amandaghassaei's avatar
errors    
amandaghassaei committed
401 
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD / txt)</a></li>
amandaghassaei's avatar
save stl    
amandaghassaei committed
402 
                    <!--<li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
403
404
405 
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
                </ul>
            </li>
amandaghassaei's avatar
small changes    
amandaghassaei committed
406
407 
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
408 
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
amandaghassaei's avatar
small changes    
amandaghassaei committed
409 
            <li><a id="tips" class="menuHoverControls" target="_blank" href="#">File Import Tips</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
410
411
412
413
414
415
416 
        </ul>

    </div><!-- /.navbar-collapse -->
    <input id="fileSelector" type="file">

</nav>
amandaghassaei's avatar
starting app    
amandaghassaei committed
417 
<div  id="threeContainer"></div>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
418 
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
starting app    
amandaghassaei committed
419 
<div id="controls">
amandaghassaei's avatar
waterbomb    
amandaghassaei committed
420 
    <b>Simulation Type:</b><br/>
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
421
422
423 
    <div class="indent">
        <label class="radio">
            <input name="simType" value="dynamic" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
waterbomb    
amandaghassaei committed
424 
            Compliant Dynamic Simulation
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
425
426
427 
        </label>
        <label class="radio">
            <input name="simType" value="static" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
waterbomb    
amandaghassaei committed
428 
            Compliant Static Simulation (not finished yet)
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
429
430 
        </label>
    </div><br/>
amandaghassaei's avatar
small changes    
amandaghassaei committed
431 
    <b>Fold Settings:</b><br/><br/>
amandaghassaei's avatar
small changes    
amandaghassaei committed
432 
    <div class="sliderInput" id="creasePercent">
amandaghassaei's avatar
small changes    
amandaghassaei committed
433 
        <span class="label-slider">Angle (-1 to 1) : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
434 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
435
436 
    </div>
    <br/><br/><br/>
amandaghassaei's avatar
small changes    
amandaghassaei committed
437 
    <b>Stiffness Settings:</b><br/><br/>
amandaghassaei's avatar
ui    
amandaghassaei committed
438
439 
    <div class="sliderInput" id="axialStiffness">
        <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
440 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
441
442 
    </div>
    <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
eod    
amandaghassaei committed
443 
        <span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
444 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
445
446 
    </div>
    <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
eod    
amandaghassaei committed
447 
        <span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
448 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
449 
    </div>
amandaghassaei's avatar
small changes    
amandaghassaei committed
450
451
452
453
454 
    <div class="sliderInput" id="percentDamping">
        <span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="form-control" type="text">
    </div>
amandaghassaei's avatar
svg import    
amandaghassaei committed
455 
    <div class="extraSpace"></div>
amandaghassaei's avatar
starting app    
amandaghassaei committed
456 
</div>
amandaghassaei's avatar
small changes    
amandaghassaei committed
457 
<div id="svgViewer"></div>
amandaghassaei's avatar
reorganizing    
amandaghassaei committed
458
459
460
461
462
463
464 

<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
            Mesh Material:
            <div class="indent">
amandaghassaei's avatar
toggle mesh vis    
amandaghassaei committed
465
466
467 
                <label class="checkbox" for="meshVisible">
                    <input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Mesh Visible
amandaghassaei's avatar
reorganizing    
amandaghassaei committed
468 
                </label>
amandaghassaei's avatar
toggle mesh vis    
amandaghassaei committed
469
470
471
472
473
474
475
476
477
478
479
480
481 
                <div id="meshMaterialOptions">
                    <label class="radio">
                        <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Colored Material
                    </label>
                    <div id="coloredMaterialOptions" class="indent">
                        <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                        <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                    </div>
                    <label class="radio">
                        <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Face Normals Material
                    </label>
amandaghassaei's avatar
reorganizing    
amandaghassaei committed
482
483 
                </div>
            </div><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
484
485
486
487
488
489 
            Edges:
            <div class="indent">
                <label class="checkbox" for="edgesVisible">
                    <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Edges Visible
                </label>
amandaghassaei's avatar
edge vis    
amandaghassaei committed
490
491
492
493
494
495
496
497
498
499
500 
                <div id="edgeVisOptions" class="indent">
                    <label class="checkbox" for="mtnsVisible">
                        <input id="mtnsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Mountains
                    </label>
                    <label class="checkbox" for="valleysVisible">
                        <input id="valleysVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Valleys
                    </label>
                    <label class="checkbox" for="panelsVisible">
                        <input id="panelsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
eod    
amandaghassaei committed
501 
                        Facet Creases
amandaghassaei's avatar
edge vis    
amandaghassaei committed
502
503
504
505
506
507 
                    </label>
                    <label class="checkbox" for="passiveEdgesVisible">
                        <input id="passiveEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Undriven Edges
                    </label>
                </div>
amandaghassaei's avatar
ui    
amandaghassaei committed
508
509
510
511
512
513
514 
            </div><br/>
            Rendering:
            <div class="indent">
                <label class="checkbox" for="ambientOcclusion">
                    <input id="ambientOcclusion" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Ambient Occlusion
                </label>
amandaghassaei's avatar
styling    
amandaghassaei committed
515 
            </div>
amandaghassaei's avatar
reorganizing    
amandaghassaei committed
516
517
518 
        </div>
    </div>
</div>
amandaghassaei's avatar
starting app    
amandaghassaei committed
519
520
521
522
523 
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p><b>Origami Simulator</b><br/><br/>
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
524
525
526 
                    <a target="_blank" href="http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf">Origami Folding; A Structural Engineering Approach</a><br/>
                    <a target="_blank" href="http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf">Rigid Origami Simulator</a><br/>
                    <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a><br/>
amandaghassaei's avatar
eod    
amandaghassaei committed
527
528 

                <br/><br/>
amandaghassaei's avatar
save stl    
amandaghassaei committed
529 
                Built by <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a> as a final project for <a href="http://courses.csail.mit.edu/6.849/spring17/" target="_blank">Geometric Folding Algorithms</a>.
amandaghassaei's avatar
starting app    
amandaghassaei committed
530
531
532
533
534
535 
                Code available on <a href="https://github.com/amandaghassaei/OrigamiSimulator" target="_blank">Github</a>.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
small changes    
amandaghassaei committed
536
537
538
539
540
541
542
543
544
545
546 
<div class="modal fade" id="tipsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p><b>File Import Tips</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
save stl    
amandaghassaei committed
547
548
549
550
551
552
553
554 
<div class="modal fade" id="exportSTLModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Export STL</b><br/><br/>
amandaghassaei's avatar
eod    
amandaghassaei committed
555
556
557 
                    settings:<br/>
                    single sided/double sided<br/>
                    scale
amandaghassaei's avatar
save stl    
amandaghassaei committed
558
559
560
561
562
563
564
565
566 
                </p>
            </div>
            <div class="modal-footer">
                <button id="doSTLsave" type="button" class="btn btn-success">Save</button>
                <button type="button" class="btn btn default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
errors    
amandaghassaei committed
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594 
<div class="modal fade" id="importFoldModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Import FOLD</b><br/><br/>
                use angles as targets
                </p>
            </div>
            <div class="modal-footer">
                <button id="doImportFold" type="button" class="btn btn-success">Import</button>
                <button type="button" class="btn btn default" data-dismiss="modal">Cancel</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog">
    <div class="modal-dialog sm">
        <div class="modal-content">
            <div class="modal-body">
                <p id="warningMessage">
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
starting app    
amandaghassaei committed
595
596 
</body>
</html>