index.html 60.4 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
        }
    </script>
84
85
86
87
88
89
90
91
92
93
94
95
    <script id="centerTexture" type="x-shader/x-fragment">
        precision mediump float;
        uniform sampler2D u_lastPosition;
        uniform vec2 u_textureDim;
        uniform vec3 u_center;
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;
            vec3 position = texture2D(u_lastPosition, scaledFragCoord).xyz;
            gl_FragColor = vec4(position-u_center, 0.0);
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
96
97
98
99
100
101
102
103
104
105
106
107
108

    <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
109
110
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;

amandaghassaei's avatar
amandaghassaei committed
111
112
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
amandaghassaei committed
113
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
amandaghassaei committed
114
115
116
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
117
118
119
            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
120
121
122
123
124
125
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
126
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
amandaghassaei committed
127
128
129
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
eod    
amandaghassaei committed
130
        uniform float u_creasePercent;
amandaghassaei's avatar
amandaghassaei committed
131
132
133
134
135
136
        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
137
        uniform sampler2D u_meta;//[beamsIndex, numBeam, creaseMeta2Index, numCreases]
amandaghassaei's avatar
amandaghassaei committed
138
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
amandaghassaei committed
139
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
140
        uniform sampler2D u_creaseMeta2;//[creaseIndex, nodeIndex, -, -]
amandaghassaei's avatar
amandaghassaei committed
141
142
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
143
        uniform sampler2D u_creaseGeo;//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
144
145
146
147
148
149

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

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
150
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
151
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
152
153
154
155
156
157
158
159
                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
160
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
161

amandaghassaei's avatar
amandaghassaei committed
162
163
            float nodeError = 0.0;

amandaghassaei's avatar
ui    
amandaghassaei committed
164
            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
165
166
167
168
169
170
171
172
                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
173
174
175
176
177
178
179
180
                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
181
182
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
amandaghassaei's avatar
amandaghassaei committed
183
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
amandaghassaei's avatar
amandaghassaei committed
184
185
                vec3 deltaV = neighborLastVelocity-lastVelocity;

amandaghassaei's avatar
amandaghassaei committed
186
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
amandaghassaei committed
187
188
                force += _force;
            }
amandaghassaei's avatar
amandaghassaei committed
189
            nodeError /= meta[1];
amandaghassaei's avatar
amandaghassaei committed
190
191
192
193
194
195
196

            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
197
                vec4 creaseMeta2 = texture2D(u_creaseMeta2, scaledNodeCreaseIndex);//[creaseIndex, length to node, nodeType (1 or 2), isReaction]
amandaghassaei's avatar
amandaghassaei committed
198
199
200
201
202
203
204

                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]
205
                vec4 creaseGeo = texture2D(u_creaseGeo, scaledCreaseIndex);//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
206

amandaghassaei's avatar
amandaghassaei committed
207
208
209
                float targetTheta = creaseMeta[2] * u_creasePercent;
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];

210
                float nodeNum = creaseMeta2[1];//1, 2, 3, 4
211

212
                if (nodeNum > 2.0){//crease reaction, node is on a crease
amandaghassaei's avatar
amandaghassaei committed
213

amandaghassaei's avatar
amandaghassaei committed
214
                    //node #1
amandaghassaei's avatar
amandaghassaei committed
215
216
217
218
219
220
221
222
223
224
225
                    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;

226
227
                    float coef1 = creaseGeo[2];
                    float coef2 = creaseGeo[3];
amandaghassaei's avatar
amandaghassaei committed
228

229
230
231
232
                    if (nodeNum == 3.0){
                        coef1 = 1.0-coef1;
                        coef2 = 1.0-coef2;
                    }
233
234

                    vec3 _force = -angForce*(coef1/creaseGeo[0]*normal1 + coef2/creaseGeo[1]*normal2);
amandaghassaei's avatar
amandaghassaei committed
235
                    force += _force;
236

amandaghassaei's avatar
amandaghassaei committed
237
                } else {
238

amandaghassaei's avatar
amandaghassaei committed
239
                    float normalIndex1D = thetas[2];//node #1
240
241
                    float momentArm = creaseGeo[0];//node #1
                    if (nodeNum == 2.0) {
amandaghassaei's avatar
amandaghassaei committed
242
                        normalIndex1D = thetas[3];//node #2
243
                        momentArm = creaseGeo[1];//node #2
amandaghassaei's avatar
amandaghassaei committed
244
245
246
247
248
249
250
                    }
                    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;

                    vec3 _force = angForce/momentArm*normal;
                    force += _force;
amandaghassaei's avatar
eod    
amandaghassaei committed
251
                }
amandaghassaei's avatar
amandaghassaei committed
252
253
254

            }

amandaghassaei's avatar
amandaghassaei committed
255
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
amandaghassaei committed
256
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
amandaghassaei committed
257
258
259
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
260
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
261
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
262
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
263
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
264
265
266
267
268
        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
269
270
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
271
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
272
273
274
275
276
277
278
279
280

        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
281
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
amandaghassaei committed
282
283
284
285
286
287
288
289
290
291
292
                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
293
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
amandaghassaei committed
294
295
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
amandaghassaei committed
296
297
298
299
300
301
302
303
304

            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
305
306
307
308
            //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
309

amandaghassaei's avatar
amandaghassaei committed
310
311
            float theta = atan(y, x);

amandaghassaei's avatar
amandaghassaei committed
312
            float diff = theta-lastTheta[0];
amandaghassaei's avatar
vive    
amandaghassaei committed
313
            float origDiff = diff;
amandaghassaei's avatar
amandaghassaei committed
314
            if (diff < -5.0) {
amandaghassaei's avatar
amandaghassaei committed
315
                diff += TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
316
            } else if (diff > 5.0) {
amandaghassaei's avatar
amandaghassaei committed
317
                diff -= TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
318
            }
amandaghassaei's avatar
vive    
amandaghassaei committed
319
            theta = lastTheta[0] + diff;
amandaghassaei's avatar
amandaghassaei committed
320
            gl_FragColor = vec4(theta, diff, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
321
322
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352

    <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;

amandaghassaei's avatar
amandaghassaei committed
353
354
355
            vec3 normal = normalize(cross(b-a, c-a));

            gl_FragColor = vec4(normal, 0.0);
amandaghassaei's avatar
amandaghassaei committed
356
357
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
358

359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
    <script id="updateCreaseGeo" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_creaseMeta3;

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

            vec4 creaseMeta = texture2D(u_creaseMeta3, scaledFragCoord);

            vec2 node1Index = vec2(mod(creaseMeta[0], u_textureDim.x)+0.5, floor(creaseMeta[0]/u_textureDim.x)+0.5)/u_textureDim;
            vec2 node2Index = vec2(mod(creaseMeta[1], u_textureDim.x)+0.5, floor(creaseMeta[1]/u_textureDim.x)+0.5)/u_textureDim;
            vec2 node3Index = vec2(mod(creaseMeta[2], u_textureDim.x)+0.5, floor(creaseMeta[2]/u_textureDim.x)+0.5)/u_textureDim;
            vec2 node4Index = vec2(mod(creaseMeta[3], u_textureDim.x)+0.5, floor(creaseMeta[3]/u_textureDim.x)+0.5)/u_textureDim;

378
379
380
381
            vec3 node1 = texture2D(u_originalPosition, node1Index).xyz + texture2D(u_lastPosition, node1Index).xyz;
            vec3 node2 = texture2D(u_originalPosition, node2Index).xyz + texture2D(u_lastPosition, node2Index).xyz;
            vec3 node3 = texture2D(u_originalPosition, node3Index).xyz + texture2D(u_lastPosition, node3Index).xyz;
            vec3 node4 = texture2D(u_originalPosition, node4Index).xyz + texture2D(u_lastPosition, node4Index).xyz;
382
383
384
385
386
387
388
389
390
391
392
393
394

            vec3 creaseVector = node4-node3;
            float creaseLength = length(creaseVector);
            creaseVector /= creaseLength;

            vec3 vector1 = node1-node3;
            vec3 vector2 = node2-node3;

            float proj1Length = dot(creaseVector, vector1);
            float proj2Length = dot(creaseVector, vector2);
            float dist1 = sqrt(vector1.x*vector1.x+vector1.y*vector1.y+vector1.z*vector1.z-proj1Length*proj1Length);
            float dist2 = sqrt(vector2.x*vector2.x+vector2.y*vector2.y+vector2.z*vector2.z-proj2Length*proj2Length);

395
            gl_FragColor = vec4(dist1, dist2, proj1Length/creaseLength, proj2Length/creaseLength);
396
397
398
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
399
400
401
    <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
402
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
403
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
404
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
405
406
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
407
408
    <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
409
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
410
    <script type="text/javascript" src="dependencies/OBJExporter.js"></script>
amandaghassaei's avatar
amandaghassaei committed
411
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
412
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
amandaghassaei committed
413
    <script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
amandaghassaei's avatar
amandaghassaei committed
414

amandaghassaei's avatar
amandaghassaei committed
415
416
417
418
419
420
421
422
    <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
423
424
425
426
427
    <script type="text/javascript" src="dependencies/WebVR.js"></script>
    <script type="text/javascript" src="dependencies/VREffect.js"></script>
    <script type="text/javascript" src="dependencies/ViveController.js"></script>
    <script type="text/javascript" src="dependencies/VRControls.js"></script>

amandaghassaei's avatar
amandaghassaei committed
428
429
    <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
430
431
432
    <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
433
434
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
435
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
436
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
3D ui    
amandaghassaei committed
437
    <script type="text/javascript" src="js/3dUI.js"></script>
amandaghassaei's avatar
amandaghassaei committed
438
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod    
amandaghassaei committed
439
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
440
    <script type="text/javascript" src="js/rigidSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
441
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
442
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
amandaghassaei committed
443
    <script type="text/javascript" src="js/saveFOLD.js"></script>
amandaghassaei's avatar
amandaghassaei committed
444
    <script type="text/javascript" src="js/importer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
445
    <script type="text/javascript" src="js/ViveInterface.js"></script>
amandaghassaei's avatar
amandaghassaei committed
446
447
448
449

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
450
451
452
453
454
455
456
457
458
459
460
461
462
<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
errors    
amandaghassaei committed
463
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD / txt)</a></li>
amandaghassaei's avatar
amandaghassaei committed
464
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
465
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
466
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
467
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
468
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
amandaghassaei's avatar
amandaghassaei committed
469
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
470
471
                    <li><a id="saveSVG" href="#">Save Pattern as SVG...</a></li>
                    <!--<li><a id="saveSVGScreenshot" href="#">Save SVG screenshot</a></li>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
472
473
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
474
475
476
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Examples <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
amandaghassaei's avatar
amandaghassaei committed
477
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Origami<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Origami/randlettflappingbird.svg">Randlett Flapping Bird</a></li>
                            <li><a href="#" class="demo" data-url="Origami/singlesquaretwist.svg">Square Twist (single)</a></li>
                            <li><a href="#" class="demo" data-url="Origami/squaretwistManyAngles.svg">Square Twist (many angles)</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Tesselations<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>
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb (six-crease base)</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/waterbombTwist.svg">Waterbomb (eight-crease base)</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/reschtritessellation.svg">Resch Triangle Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/reschbarbell.svg">Resch Barbell Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
494
                            <li><a href="#" class="demo" data-url="Tessellations/honeycomb_333_cp.svg">Lang Honeycomb Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
495
                            <li><a href="#" class="demo" data-url="Tessellations/oval_tessellation_cp.svg">Lang Oval Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
496
                            <li><a href="#" class="demo" data-url="Tessellations/hyperbolic_limit_cp.svg">Lang Hyperbolic Limit</a></li>
amandaghassaei's avatar
amandaghassaei committed
497
498
499
500
501
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Curved Creases<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
502
                            <li><a href="#" class="demo" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
amandaghassaei's avatar
amandaghassaei committed
503
504
505
506
507
508
509
510
511
512
513
514
515
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Problematic Patterns<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Origami/hypar.svg">Hypar</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/wedged_double_faced.svg">Lang Wedged Double Faced Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/rattanweaveLang.svg">Lang Rattan Weave</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
516
517
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
518
519
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
520
521
522
523
524
525
526
527
528
529
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
                <div class="sliderInput floatRight" id="creasePercent">
                    <span class="label-slider">Fold Angle (-1 to 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>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
530
531
532
533
534
535

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
536
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
537
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
538
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
539
540
541
542
543
544
545
546
547
    <div>
        <a href="#" id="reset" class="btn floatRight btn-lg btn-default">Reset</a>
        <a href="#" id="start" class="btn floatRight btn-lg btn-success">Start Simulation</a>
        <a href="#" id="pause" class="btn floatRight 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>
            <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
548
549
        </div>
        <a href="#" id="shouldCenterGeo" class="floatRight btn btn-lg btn-default">Re-center geometry</a>
amandaghassaei's avatar
amandaghassaei committed
550
    </div>
amandaghassaei's avatar
amandaghassaei committed
551
552
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
amandaghassaei's avatar
amandaghassaei committed
553
        <!--<label class="radio">-->
amandaghassaei's avatar
amandaghassaei committed
554
555
            <!--<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>-->
            <!--Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>-->
amandaghassaei's avatar
amandaghassaei committed
556
        <!--</label>-->
amandaghassaei's avatar
amandaghassaei committed
557
558
559
560
561
562
563
564
565
        <!--&lt;!&ndash;<label class="radio">&ndash;&gt;-->
            <!--&lt;!&ndash;<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>&ndash;&gt;-->
            <!--&lt;!&ndash;Compliant Static Simulation <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
        <!--&lt;!&ndash;</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="radio">&ndash;&gt;-->
            <!--&lt;!&ndash;<input name="simType" value="rigid" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>&ndash;&gt;-->
            <!--&lt;!&ndash;Rigid Static Simulation <a class="about floatRight" href="#" id="aboutRigidSim"><span class="fui-question-circle"></span></a>&ndash;&gt;-->
        <!--&lt;!&ndash;</label>&ndash;&gt;-->
    <!--</div><br/>-->
amandaghassaei's avatar
amandaghassaei committed
566
567
568
569
    <label class="checkbox" for="userInteractionEnabled">
        <input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
        Allow User Interaction
    </label><br/>
amandaghassaei's avatar
amandaghassaei committed
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
    <a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/>
    <div id="simulationSettings" class="hide">
        <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>
            <input value="" placeholder="" class="form-control" type="text">
        </div>
        <div class="sliderInput" id="creaseStiffness">
            <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>
            <input value="" placeholder="" class="form-control" type="text">
        </div>
        <div class="sliderInput" id="panelStiffness">
            <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>
            <input value="" placeholder="" class="form-control" type="text">
        </div>
        <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>
        <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
589
    </div>
amandaghassaei's avatar
amandaghassaei committed
590
591
    <a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about floatRight" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
    <div id="animationsSettings" class="hide">
amandaghassaei's avatar
amandaghassaei committed
592
        <div class="indent">
amandaghassaei's avatar
amandaghassaei committed
593
            <span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
amandaghassaei's avatar
amandaghassaei committed
594
            <span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
595
        </div>
amandaghassaei's avatar
amandaghassaei committed
596
597
598
599
600
601
602
    </div><br/><br/>

    <b>Error:</b><a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
    <div class="indent">
        <label>Average node error: <span id="globalError"></span></label>
    </div><br/>

amandaghassaei's avatar
amandaghassaei committed
603
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
604
</div>
amandaghassaei's avatar
amandaghassaei committed
605
<div id="svgViewer"></div>
amandaghassaei's avatar
amandaghassaei committed
606
607
608
609
610

<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
amandaghassaei's avatar
amandaghassaei committed
611
612
            <a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a><br/>
            <div id="materialSettings" class="indent">
amandaghassaei's avatar
amandaghassaei committed
613
614
615
                <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
616
                </label>
amandaghassaei's avatar
amandaghassaei committed
617
618
619
620
621
622
623
624
625
626
627
628
629
                <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
630
                    <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
631
                        <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
632
                        Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
633
                    </label>
amandaghassaei's avatar
amandaghassaei committed
634
635
636
637
                    <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
638
639
                </div>
            </div><br/>
amandaghassaei's avatar
amandaghassaei committed
640
641
642

            <a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
            <div id="edgeVisiblity" class="hide indent">
amandaghassaei's avatar
styling    
amandaghassaei committed
643
644
645
646
                <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
647
648
649
                <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>
amandaghassaei's avatar
amandaghassaei committed
650
                        Mountains <span id="numMtns"></span>
amandaghassaei's avatar
amandaghassaei committed
651
652
653
                    </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>
amandaghassaei's avatar
amandaghassaei committed
654
                        Valleys <span id="numValleys"></span>
amandaghassaei's avatar
amandaghassaei committed
655
656
657
                    </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
amandaghassaei committed
658
                        Facet Creases <span id="numFacets"></span>
amandaghassaei's avatar
amandaghassaei committed
659
660
661
                    </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>
amandaghassaei's avatar
amandaghassaei committed
662
                        Undriven Edges <span id="numPassive"></span>
amandaghassaei's avatar
amandaghassaei committed
663
664
                    </label>
                </div>
amandaghassaei's avatar
amandaghassaei committed
665
            </div><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
666
667
668
669
670
671
672
            <!--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>-->
            <!--</div>-->
amandaghassaei's avatar
amandaghassaei committed
673
674
675
            <a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
            <div id="virtualReality" class="hide indent smallTxt">
                Status: &nbsp;<span id="VRstatus"></span><a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
676
677
                <div id="VRoptions">
                </div>
amandaghassaei's avatar
amandaghassaei committed
678
679
680
            </div><br/><br/>
            <a href="#" class="seeMore closed" data-id="cameraAngle"><span class="fui-triangle-down"></span>View Angle:</a><br/><br/>
            <div id="cameraAngle" class="hide indent">
amandaghassaei's avatar
amandaghassaei committed
681
682
683
684
685
686
                <a href="#" id="cameraZ" class="paddingBottom btn btn-lg btn-default">Front</a>
                <a href="#" id="cameraMinusZ" class="paddingBottom btn btn-lg btn-default">Back</a>
                <a href="#" id="cameraX" class="paddingBottom btn btn-lg btn-default">Right</a>
                <a href="#" id="cameraMinusX" class="paddingBottom btn btn-lg btn-default">Left</a><br/>
                <a href="#" id="cameraY" class="btn btn-lg btn-default">Top</a>
                <a href="#" id="cameraMinusY" class="btn btn-lg btn-default">Bottom</a>
amandaghassaei's avatar
amandaghassaei committed
687
                <a href="#" id="cameraOrtho" class="btn btn-lg btn-default">Ortho</a>
amandaghassaei's avatar
amandaghassaei committed
688
            </div>
amandaghassaei's avatar
amandaghassaei committed
689
690
691
        </div>
    </div>
</div>
amandaghassaei's avatar
amandaghassaei committed
692
693
694
695
696
<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
697
698
                    <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/>
amandaghassaei's avatar
docs    
amandaghassaei committed
699
700
701
702
                    <br/>
                    This app uses <a target="_blank" href="https://threejs.org/">three.js</a> to visualize and interact with the 3D geometry of the folding.<br/>
                    Triangulation of quad faces in origami patterns is achieved by adding the shortest edge across the quad (this helps to preserve symmetry, which
                    makes the simulation work better). Arbitrary polygonal faces are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a>.<br/>
amandaghassaei's avatar
amandaghassaei committed
703
                    Additionally, I used <a target="_blank" href="https://jquery.com/">jQuery</a>, <a target="_blank" href="http://getbootstrap.com/">Bootstrap</a>, and the
amandaghassaei's avatar
docs    
amandaghassaei committed
704
705
706
707
                    <a target="_blank" href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> to build the GUI.<br/>
                    <br/>
                    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>.
                    Code available on <a href="https://github.com/amandaghassaei/OrigamiSimulator" target="_blank">Github</a>.  If you have interesting crease patterns that would
amandaghassaei's avatar
eod    
amandaghassaei committed
708
                    make good demo files, please send them to me (Amanda) so I can add them to the <b>Examples</b> menu.  My email address is on my website.  Thanks!
amandaghassaei's avatar
amandaghassaei committed
709
710
711
712
713
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
714
715
716
717
718
<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/>
amandaghassaei's avatar
amandaghassaei committed
719
720
                    Bad design files will throw errors and create models that explode or cannot be solved, here are some tips for
                    importing FOLD or svg files that work.<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
721
722
723
724
725
726
727
728
729
730
731
732
733
                    <b>Importing FOLD:</b><br/><br/>
                    The FOLD file format is specified in <a target="_blank" href="https://github.com/edemaine/fold">these docs</a>.
                    This tool imports FOLD v1.0 files with <b>all</b> of the following fields populated:
                    <ul>
                        <li>vertices_coords</li>
                        <li>edges_vertices</li>
                        <li>edges_assignment</li>
                        <li>faces_vertices</li>
                    </ul>
                    If you are unsure whether your FOLD file is valid, you can inspect it using the
                    <a target="_blank" href="https://edemaine.github.io/fold/examples/foldviewer.html">FOLD Viewer</a>.<br/>
                    <br/>
                    <b>Importing SVG:</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
734
735
                    <ul>
                        <li>The SVG importer supports path objects and line objects (coming).  Please convert polygons to paths before importing.</li>
amandaghassaei's avatar
docs    
amandaghassaei committed
736
737
738
                        <li>Valley folds are <span style="color:red">red</span> - rgb(255, 0, 0), hex #ff0000</li>
                        <li>Mountain folds are <span style="color:blue">blue</span> - rgb(0, 0, 255), hex #0000ff</li>
                        <li>Outline edges are <span style="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
amandaghassaei's avatar
amandaghassaei committed
739
740
                        <img src="assets/examplepattern.jpg"/>
                        <li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
amandaghassaei's avatar
docs    
amandaghassaei committed
741
742
                        To control the triangulations draw lines in <span style="color:#cccc00">yellow</span> - rgb(255, 255, 0), hex #ffff00<br/>
                        In general, patterns move better when their triangulation is symmetric and minimizes long, skinny triangles.</li>
amandaghassaei's avatar
amandaghassaei committed
743
744
745
                        <img src="assets/patternwithtriangulations.jpg"/>
                        <li>Stroke and line style do not matter.</li>
                        <li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180&deg;
amandaghassaei's avatar
docs    
amandaghassaei committed
746
                        (fully folded), 0.5 = 90&deg;, 0 = 0&deg; (flat).  Any fold angle between  0&deg; and 180&deg; may be used.</li>
amandaghassaei's avatar
amandaghassaei committed
747
748
749
                        <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
                        duplicate lines (coming), and extra vertices falling in the middle of an edge (coming),
                        but it is recommended to remove these errors yourself in order to avoid problems.</li>
amandaghassaei's avatar
amandaghassaei committed
750
                        <li>If your simulation is not working, check that the pattern looks correct by clicking on the "Pattern" view in the top nav bar.</li>
amandaghassaei's avatar
amandaghassaei committed
751
752
753
754
755
                    </ul><br/>

                <b>For Adobe Illustrator users:</b><br/><br/>
                I use Illustrator to create SVGs (though any vector editing program should be fine), here are some tips I've found for making svgs to import into this tool.<br/><br/>
                    <ul>
amandaghassaei's avatar
amandaghassaei committed
756
                        <li>If you are starting with a pre-made vector file, first ungroup any groups, release all compound paths
amandaghassaei's avatar
amandaghassaei committed
757
758
759
760
761
                        (<b>Select all + Object>Compound Path>Release</b>), and release all clipping masks (<b>Select all + Object>Clipping Mask>Release</b>).</li>
                        <li>Create geometry using the <b>Line Segment Tool</b>.</li>
                        <li>Illustrator can help you select all lines of a particular type so that you can edit their color or opacity together.  Click the line,
                        then go to <b>Select>Same>Appearance</b> to select all similar lines in the pattern.
                        <li>To turn lines and polygons into path objects, select the geometry then right click and select <b>Make Compound Path</b>.</li>
amandaghassaei's avatar
amandaghassaei committed
762
                        <li>Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG 1.1 settings, but version 1.0 will work as well.</li>
amandaghassaei's avatar
amandaghassaei committed
763
                    </ul>
amandaghassaei's avatar
amandaghassaei committed
764
765
766
767
768
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
769
<div class="modal fade" id="aboutVRmodal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
770
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
amandaghassaei committed
771
772
773
774
775
        <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>
amandaghassaei's avatar
doc    
amandaghassaei committed
776
777
778
779
780
                <p><b>VR</b><br/><br/>
                This tool currently supports an interactive Virtual Reality mode using the Vive headset and controllers.
                For this to work, you must first use a <a href="https://webvr.info/" target="_blank">WebVR enabled browser</a>:
                currently only <a href="https://webvr.rocks/firefox" target="_blank">Firefox Nightly</a> is supported by this app.
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
781
                When you open this page with the appropriate browser and a Vive connected through Steam VR, you will see a button that says "Enter VR".  Clicking this will
amandaghassaei's avatar
doc    
amandaghassaei committed
782
                put the app in an interactive VR mode.  The hand controllers will allow you to grab the origami mesh and pull on it.
amandaghassaei's avatar
amandaghassaei committed
783
                This is especially cool if you set the <b>Mesh Material</b> to <b>Strain Visualization</b> so you can see how your interactions
amandaghassaei's avatar
doc    
amandaghassaei committed
784
785
                change the internal strains in the material.
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
786
                If the simulation looks choppy, consider lowering the <b>Num simulation steps per render</b> setting under <b>Animation Settings</b> in the right hand menu.
amandaghassaei's avatar
doc    
amandaghassaei committed
787
788
789
790
791
792
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutAnimationModal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
793
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
doc    
amandaghassaei committed
794
795
796
797
798
        <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>
amandaghassaei's avatar
amandaghassaei committed
799
                <p><b>Animation Settings</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
800
                The dynamic simulation is calculated by moving time forward in small <b>&Delta;t</b> steps, solving the system, and moving the
amandaghassaei's avatar
doc    
amandaghassaei committed
801
802
803
804
                vertices of the origami incrementally.  The time step size for this animation is calculated automatically
                based on the material stiffnesses set in the <b>Stiffness Settings</b> section: more stiff settings
                require shorter time steps to solve and will slow down the simulation.<br/>
                <br/>
amandaghassaei's avatar
amandaghassaei committed
805
                <b>Num simulation steps per render</b> allows you to control the number of tiny time steps forward to take on each
amandaghassaei's avatar
doc    
amandaghassaei committed
806
807
                render cycle.  If the simulation looks choppy to you, you might consider lowering this setting.
                Lowering the number of steps per render will slow down the simulation, but will result in a more smooth animation.
amandaghassaei's avatar
amandaghassaei committed
808
                </p>
amandaghassaei's avatar
amandaghassaei committed
809
810
811
812
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
813
814
815
816
817
818
819
<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>
amandaghassaei's avatar
amandaghassaei committed
820
821
822
823
                <b>Export STL</b><br/><br/>
                Filename: &nbsp;&nbsp;<input id="stlFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="exportScale form-control" type="text"><br/><br/>
                Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
amandaghassaei's avatar
amandaghassaei committed
824
                <span class="smallTxt">(the STL file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
amandaghassaei's avatar
amandaghassaei committed
825
826
827
828
                <label class="bigLabel checkbox" for="doublesidedSTL">
                    <input id="doublesidedSTL" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Double Sided
                </label>
amandaghassaei's avatar
amandaghassaei committed
829
830
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
831
                <button id="doSTLsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
832
833
834
835
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
<div class="modal fade" id="exportOBJModal" 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>
                <b>Export OBJ</b><br/><br/>
                Filename: &nbsp;&nbsp;<input id="objFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="exportScale form-control" type="text"><br/><br/>
                Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
                <span class="smallTxt">(the OBJ file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
                <label class="bigLabel checkbox" for="doublesidedOBJ">
                    <input id="doublesidedOBJ" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Double Sided
                </label>
            </div>
            <div class="modal-footer">
                <button id="doOBJsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
859
860
861
862
863
864
865
<div class="modal fade" id="exportFOLDModal" 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>
amandaghassaei's avatar
amandaghassaei committed
866
                <b>Export FOLD</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
867
                Filename: &nbsp;&nbsp;<input id="foldFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .fold<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
868
869
870
871
                Author: &nbsp;&nbsp;<input id="foldAuthor" value="Amanda Ghassaei" placeholder="" class="bigInput text form-control" type="text"><br/><br/>
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="exportScale form-control" type="text">&nbsp;&nbsp;&nbsp;&nbsp;
                Units: &nbsp;&nbsp;
                <div class="btn-group">
amandaghassaei's avatar
amandaghassaei committed
872
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="unitsDisplay"></span> <span class="caret"></span></button>
amandaghassaei's avatar
amandaghassaei committed
873
                    <ul id="unitsDropdown" role="menu" class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
874
875
876
877
878
879
880
881
                        <li><a class="units" data-id="unit" href="#">unitless</a></li>
                        <li><a class="units" data-id="in" href="#">in</a></li>
                        <li><a class="units" data-id="pt" href="#">pt</a></li>
                        <li><a class="units" data-id="m" href="#">m</a></li>
                        <li><a class="units" data-id="cm" href="#">cm</a></li>
                        <li><a class="units" data-id="mm" href="#">mm</a></li>
                        <li><a class="units" data-id="um" href="#">um</a></li>
                        <li><a class="units" data-id="nm" href="#">nm</a></li>
amandaghassaei's avatar
amandaghassaei committed
882
883
884
                    </ul>
                </div>
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
885
886
887
888
889
890
891
892
893
894
                Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span> <span class="unitsDisplay"></span></b><br/>
                <label class="bigLabel checkbox" for="triangulateFOLDexport">
                    <input id="triangulateFOLDexport" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Save with triangulated faces
                </label>
                <label class="bigLabel checkbox" for="exportFoldAngle">
                    <input id="exportFoldAngle" data-toggle="checkbox" disabled class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Save with vertices_foldAngles (coming soon)
                </label>
                <span class="smallTxt">For more information about the FOLD file format, see the <a target="_blank" href="https://github.com/edemaine/fold">offical docs</a></span>.
amandaghassaei's avatar
amandaghassaei committed
895
896
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
897
                <button id="doFOLDsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
898
899
900
901
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
errors    
amandaghassaei committed
902
903
904
905
906
907
908
<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>
amandaghassaei's avatar
amandaghassaei committed
909
                <b>Import FOLD</b><br/><br/>
910
                <label class="bigLabel checkbox" for="foldUseAngles">
amandaghassaei's avatar
amandaghassaei committed
911
912
913
                    <input id="foldUseAngles" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Use current angles as target fold angles
                </label>
amandaghassaei's avatar
errors    
amandaghassaei committed
914
915
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
916
                <button data-dismiss="modal" type="button" class="btn btn-success">OK</button>
amandaghassaei's avatar
errors    
amandaghassaei committed
917
918
919
920
921
922
923
924
925
926
927
928
929
930
            </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
931
<div class="modal fade" id="aboutErrorModal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
932
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
amandaghassaei committed
933
934
935
936
937
938
        <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
doc    
amandaghassaei committed
939
                    <b>Average node error</b> gives a sense of how much the distance constraints in the
amandaghassaei's avatar
amandaghassaei committed
940
941
942
                    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
943
944
945
                    <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
doc    
amandaghassaei committed
946
                    Increasing the <b>Axial Stiffness</b> will tighten these constraints and
amandaghassaei's avatar
amandaghassaei committed
947
948
                    lower the error in the simulation.<br/>
                    <br/>
amandaghassaei's avatar
amandaghassaei committed
949
                    To visualize the error of each node graphically, select <b>Strain Visualization</b> under <b>Mesh Material</b>
amandaghassaei's avatar
amandaghassaei committed
950
951
952
953
954
955
                     in the left menu.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
<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
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
<div class="modal fade" id="aboutRigidSimModal" 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>Rigid Static Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
1012
1013
1014
1015
1016
1017
1018
<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>
amandaghassaei's avatar
amandaghassaei committed
1019
                <p><b>Strain Visualization</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1020
1021
1022
1023
1024
1025
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
1026
1027
</body>
</html>