index.html 36.5 KB
Newer Older
amandaghassaei's avatar
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
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
amandaghassaei committed
24

amandaghassaei's avatar
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
amandaghassaei committed
81
            gl_FragColor = vec4(0.0);
amandaghassaei's avatar
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
amandaghassaei committed
97
98
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;

amandaghassaei's avatar
amandaghassaei committed
99
100
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
amandaghassaei committed
101
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
amandaghassaei committed
102
103
104
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
105
106
107
            vec4 velocityData = texture2D(u_velocity, scaledFragCoord);
            vec3 position = velocityData.xyz*u_dt + lastPosition;
            gl_FragColor = vec4(position, velocityData.a);//velocity.a has error info
amandaghassaei's avatar
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
amandaghassaei committed
114
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
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
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
amandaghassaei committed
125
        uniform sampler2D u_meta;//[beamsIndex, numBeam, creaseMeta2Index, numCreases]
amandaghassaei's avatar
amandaghassaei committed
126
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
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
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
amandaghassaei committed
137
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
138
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
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
amandaghassaei committed
147
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
148

amandaghassaei's avatar
amandaghassaei committed
149
150
            float nodeError = 0.0;

amandaghassaei's avatar
ui    
amandaghassaei committed
151
            for (int j=0;j<100;j++){//for all beams (up to 100, had to put a const int in here)
amandaghassaei's avatar
amandaghassaei committed
152
153
154
155
156
157
158
159
                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
amandaghassaei committed
160
161
162
163
164
165
166
167
                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
amandaghassaei committed
168
169
170
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
                nodeError += deltaPLength/length(nominalDist);
amandaghassaei's avatar
amandaghassaei committed
171
172
                vec3 deltaV = neighborLastVelocity-lastVelocity;

amandaghassaei's avatar
amandaghassaei committed
173
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
amandaghassaei committed
174
175
                force += _force;
            }
amandaghassaei's avatar
amandaghassaei committed
176
            nodeError /= meta[1];
amandaghassaei's avatar
amandaghassaei committed
177
178
179
180
181
182
183

            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
amandaghassaei committed
184
                vec4 creaseMeta2 = texture2D(u_creaseMeta2, scaledNodeCreaseIndex);//[creaseIndex, length to node, nodeType (1 or 2), isReaction]
amandaghassaei's avatar
amandaghassaei committed
185
186
187
188
189
190
191
192

                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
amandaghassaei committed
193
194
195
                float targetTheta = creaseMeta[2] * u_creasePercent;
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];

amandaghassaei's avatar
amandaghassaei committed
196
197
198
                if (creaseMeta2[3] < 0.0){//crease reaction
                    float nodeNum = creaseMeta2[2];

amandaghassaei's avatar
amandaghassaei committed
199
                    //node #1
amandaghassaei's avatar
amandaghassaei committed
200
201
202
203
204
205
206
207
208
209
210
                    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
amandaghassaei committed
211
212
                    float momentArm1 = creaseMeta2[1];
                    float momentArm2 = creaseMeta2[2];
amandaghassaei's avatar
amandaghassaei committed
213

amandaghassaei's avatar
amandaghassaei committed
214
                    vec3 _force = -0.5*(angForce/momentArm1*normal1 + angForce/momentArm2*normal2);
amandaghassaei's avatar
amandaghassaei committed
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
                    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
230
                }
amandaghassaei's avatar
amandaghassaei committed
231
232
233

            }

amandaghassaei's avatar
amandaghassaei committed
234
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
amandaghassaei committed
235
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
amandaghassaei committed
236
237
238
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
239
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
240
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
241
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
242
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
243
244
245
246
247
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_normals;
        uniform sampler2D u_lastTheta;
        uniform sampler2D u_creaseVectors;
amandaghassaei's avatar
amandaghassaei committed
248
249
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
250
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
251
252
253
254
255
256
257
258
259

        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
amandaghassaei committed
260
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
amandaghassaei committed
261
262
263
264
265
266
267
268
269
270
271
                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
amandaghassaei committed
272
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
amandaghassaei committed
273
274
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
amandaghassaei committed
275
            //float theta = acos(dotNormals);
amandaghassaei's avatar
amandaghassaei committed
276
277
278
279
280
281
282
283
284

            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
amandaghassaei committed
285
286
287
288
            //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
amandaghassaei committed
289

amandaghassaei's avatar
amandaghassaei committed
290
291
292
293
            float theta = atan(y, x);

            //float sign = dot(cross(normal1, normal2), creaseVector);
            //if (sign < 0.0) theta *= -1.0;
amandaghassaei's avatar
amandaghassaei committed
294
295
            float diff = theta-lastTheta[0];
            float projectedTheta = lastTheta[0] + lastTheta[1]*u_dt;
amandaghassaei's avatar
amandaghassaei committed
296
            if (diff < -5.0) {
amandaghassaei's avatar
amandaghassaei committed
297
298
                diff += TWO_PI;
                theta = lastTheta[0] + diff;
amandaghassaei's avatar
amandaghassaei committed
299
300
            } else if (diff > 5.0) {
                diff  -= TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
301
302
                theta = lastTheta[0] + diff;
            }
amandaghassaei's avatar
amandaghassaei committed
303
            gl_FragColor = vec4(theta, creaseVectorIndices[1], lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
304
305
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
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
334
335
336
337
338

    <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
amandaghassaei committed
339

amandaghassaei's avatar
amandaghassaei committed
340
341
342
    <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
amandaghassaei committed
343
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
344
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
345
    <script type="text/javascript" src="dependencies/OrthographicTrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
346
347
    <script type="text/javascript" src="dependencies/underscore-min.js"></script>
    <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>
amandaghassaei's avatar
amandaghassaei committed
348
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
349
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
350
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
amandaghassaei committed
351
    <script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
amandaghassaei's avatar
amandaghassaei committed
352

amandaghassaei's avatar
amandaghassaei committed
353
354
355
356
357
358
359
360
    <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
amandaghassaei committed
361
362
    <script type="text/javascript" src="js/dynamic/GLBoilerplate.js"></script>
    <script type="text/javascript" src="js/dynamic/GPUMath.js"></script>
amandaghassaei's avatar
amandaghassaei committed
363
364
365
    <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
amandaghassaei committed
366
367
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
368
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
369
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
amandaghassaei committed
370
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod    
amandaghassaei committed
371
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
372
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
373
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
amandaghassaei committed
374
375
376
377

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
378
379
380
381
382
383
384
385
386
387
388
389
390
<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
amandaghassaei committed
391
392
393
394
                    <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
amandaghassaei committed
395
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb (six-crease base)</a></li>
amandaghassaei's avatar
amandaghassaei committed
396
                            <li><a href="#" class="demo" data-url="Tessellations/waterbombTwist.svg">Waterbomb (eight-crease base)</a></li>
amandaghassaei's avatar
amandaghassaei committed
397
                            <li><a href="#" class="demo" data-url="Tessellations/singlesquaretwist.svg">Square Twist (single)</a></li>
amandaghassaei's avatar
amandaghassaei committed
398
                            <li><a href="#" class="demo" data-url="Tessellations/squaretwistManyAngles.svg">Square Twist (many angles)</a></li>
amandaghassaei's avatar
amandaghassaei committed
399
                            <li><a href="#" class="demo" data-url="Tessellations/reschtritessellation.svg">Resch Triangle Tessellation</a></li>
amandaghassaei's avatar
hypar    
amandaghassaei committed
400
                            <li><a href="#" class="demo" data-url="Origami/hypar.svg">Hypar (not fully working yet)</a></li>
amandaghassaei's avatar
amandaghassaei committed
401
402
                            <li class="divider"></li>
                            <li><a href="#" class="demo" data-url="Curved/creaseMesh.txt">Curved Crease 1</a></li>
amandaghassaei's avatar
amandaghassaei committed
403
404
                        </ul>
                    </li>
amandaghassaei's avatar
nav    
amandaghassaei committed
405
                    <li class="divider"></li>
amandaghassaei's avatar
errors    
amandaghassaei committed
406
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD / txt)</a></li>
amandaghassaei's avatar
amandaghassaei committed
407
                    <!--<li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
408
409
410
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
411
412
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
413
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
amandaghassaei's avatar
amandaghassaei committed
414
            <li><a id="tips" class="menuHoverControls" target="_blank" href="#">File Import Tips</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
415
416
417
418
419
420
421
        </ul>

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
422
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
423
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
424
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
425
    <b>Simulation Type:</b><br/>
amandaghassaei's avatar
amandaghassaei committed
426
427
428
    <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
amandaghassaei committed
429
            Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
430
431
432
        </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
amandaghassaei committed
433
            Compliant Static Simulation (not finished yet) <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
434
435
        </label>
    </div><br/>
amandaghassaei's avatar
amandaghassaei committed
436
    <b>Fold Settings:</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
437
    <div class="sliderInput" id="creasePercent">
amandaghassaei's avatar
amandaghassaei committed
438
        <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
amandaghassaei committed
439
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
440
441
    </div>
    <br/><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
442
    <b>Stiffness Settings:</b><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/>
amandaghassaei's avatar
ui    
amandaghassaei committed
443
444
    <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
amandaghassaei committed
445
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
446
447
    </div>
    <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
eod    
amandaghassaei committed
448
        <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
amandaghassaei committed
449
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
450
451
    </div>
    <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
eod    
amandaghassaei committed
452
        <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
amandaghassaei committed
453
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
454
    </div>
amandaghassaei's avatar
amandaghassaei committed
455
456
457
458
    <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
amandaghassaei committed
459
460
    <br/><br/>
    <b>Error:</b><br/>
amandaghassaei's avatar
amandaghassaei committed
461
    <div class="indent">
amandaghassaei's avatar
amandaghassaei committed
462
        <label>Average node error: <span id="globalError"></span></label>
amandaghassaei's avatar
amandaghassaei committed
463
        <a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
464
465
466
467
468
469
470
471
472
473
    </div><br/>
    <b>Animation Settings:</b><br/>
    <span class="floatRight">&Delta; t = <span id="deltaT"></span> seconds</span><br/><br/>
    <a href="#" id="reset" class="btn btn-lg btn-default">Reset</a>
    <a href="#" id="start" class="btn btn-lg btn-success">Start Simulation</a>
    <a href="#" id="pause" class="btn btn-lg btn-warning">Pause Simulation</a>
    <br/><br/>
    <div id="stepForwardOptions" class="floatRight">
        Num Steps: &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text">
        <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
amandaghassaei committed
474
    </div>
amandaghassaei's avatar
amandaghassaei committed
475
    <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
476
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
477
</div>
amandaghassaei's avatar
amandaghassaei committed
478
<div id="svgViewer"></div>
amandaghassaei's avatar
amandaghassaei committed
479
480
481
482
483
484
485

<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
            Mesh Material:
            <div class="indent">
amandaghassaei's avatar
amandaghassaei committed
486
487
488
                <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
amandaghassaei committed
489
                </label>
amandaghassaei's avatar
amandaghassaei committed
490
491
492
493
494
495
496
497
498
499
500
501
502
                <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
amandaghassaei committed
503
                    <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
504
                        <input name="colorMode" value="axialStrain" 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
amandaghassaei committed
505
                        Axial Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
506
                    </label>
amandaghassaei's avatar
amandaghassaei committed
507
508
509
510
                    <div id="axialStrainMaterialOptions" class="indent">
                        <label>Max Strain: &nbsp;&nbsp;</label>
                        <input id="strainClip" value="" placeholder="" class="float form-control" type="text"> %<br/>
                    </div>
amandaghassaei's avatar
amandaghassaei committed
511
512
                </div>
            </div><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
513
514
515
516
517
518
            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
amandaghassaei committed
519
520
521
522
523
524
525
526
527
528
529
                <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
530
                        Facet Creases
amandaghassaei's avatar
amandaghassaei committed
531
532
533
534
535
536
                    </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
537
538
539
540
541
542
543
            </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
544
            </div>
amandaghassaei's avatar
amandaghassaei committed
545
546
547
        </div>
    </div>
</div>
amandaghassaei's avatar
amandaghassaei committed
548
549
550
551
552
<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
amandaghassaei committed
553
554
555
                    <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
556
557

                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
558
                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
amandaghassaei committed
559
560
561
562
563
564
                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
amandaghassaei committed
565
566
567
568
569
570
571
572
573
574
575
<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
amandaghassaei committed
576
577
578
579
580
581
582
583
<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
584
585
586
                    settings:<br/>
                    single sided/double sided<br/>
                    scale
amandaghassaei's avatar
amandaghassaei committed
587
588
589
590
591
592
593
594
595
                </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
596
597
598
599
600
601
602
603
<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/>
amandaghassaei's avatar
amandaghassaei committed
604
                use angles as target thetas
amandaghassaei's avatar
errors    
amandaghassaei committed
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
                </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
amandaghassaei committed
624
625
626
627
628
629
630
631
<div class="modal fade" id="aboutErrorModal" 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>Simulation Error</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
632
                    "Average node error" gives a sense of how much the distance constraints in the
amandaghassaei's avatar
amandaghassaei committed
633
634
635
                    origami pattern are being violated.  The error at each node is evaluated by averaging the
                    percent deviation of all its distance constraints with adjacent nodes.  This error is
                    reported as a percent of the total length of the distance constraint to remove scaling effects.
amandaghassaei's avatar
amandaghassaei committed
636
637
638
                    <br/><br/>
                    This measurement is equivalent to <a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
                        Cauchy strain or engineering strain</a> of the axial constraints on this system.
amandaghassaei's avatar
amandaghassaei committed
639
                    Increasing the "Axial Stiffness" will tighten these constraints and
amandaghassaei's avatar
amandaghassaei committed
640
641
                    lower the error in the simulation.<br/>
                    <br/>
amandaghassaei's avatar
amandaghassaei committed
642
                    To visualize the error of each node graphically, select "Axial Strain Visualization" under "Mesh Material"
amandaghassaei's avatar
amandaghassaei committed
643
644
645
646
647
648
                     in the left menu.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
<div class="modal fade" id="aboutStiffnessModal" 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>Stiffness Settings</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutDynamicSimModal" 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>Compliant Dynamic Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutStaticSimModal" 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>Compliant Static Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
691
692
693
694
695
696
697
698
699
700
701
702
703
704
<div class="modal fade" id="aboutAxialStrainModal" 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>Axial Strain</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
705
706
</body>
</html>