index.html 67.2 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
    <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">
amandaghassaei's avatar
amandaghassaei committed
80
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
81
        void main(){
amandaghassaei's avatar
amandaghassaei committed
82
            gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
83
84
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
85
86
87
88
89
90
91
92
93
94
95
    <script id="zeroThetaTexture" type="x-shader/x-fragment">
        precision mediump float;
        uniform sampler2D u_theta;
        uniform vec2 u_textureDimCreases;
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;
            vec4 theta = texture2D(u_theta, scaledFragCoord);
            gl_FragColor = vec4(0.0, 0.0, theta[2], theta[3]);
        }
    </script>
96
97
98
99
100
101
102
103
104
105
106
107
    <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
108
109
110
111
112
113
114
115
116
117
118
119
120

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

amandaghassaei's avatar
amandaghassaei committed
123
124
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
amandaghassaei committed
125
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
amandaghassaei committed
126
127
128
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
129
130
131
            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
132
133
134
135
136
137
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
138
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
amandaghassaei committed
139
140
141
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
amandaghassaei committed
142
        uniform vec2 u_textureDimNodeFaces;
amandaghassaei's avatar
eod    
amandaghassaei committed
143
        uniform float u_creasePercent;
amandaghassaei's avatar
amandaghassaei committed
144
145
146
147
148
149
        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
150
        uniform sampler2D u_meta;//[beamsIndex, numBeam, nodeCreaseMetaIndex, numCreases]
amandaghassaei's avatar
amandaghassaei committed
151
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
amandaghassaei committed
152
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
amandaghassaei's avatar
amandaghassaei committed
153
        uniform sampler2D u_nodeCreaseMeta;//[creaseIndex, nodeIndex, -, -]
amandaghassaei's avatar
amandaghassaei committed
154
155
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
156
        uniform sampler2D u_creaseGeo;//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
157
158
159
        uniform sampler2D u_meta2;//[nodesFaceIndex, numFaces]
        uniform sampler2D u_nodeFaceMeta;//[faceIndex, a, b, c]
        uniform sampler2D u_nominalTriangles;//[angleA, angleB, angleC]
amandaghassaei's avatar
amandaghassaei committed
160

amandaghassaei's avatar
amandaghassaei committed
161
162
163
164
165
166
        vec4 getFromArray(float index1D, vec2 dimensions, sampler2D tex){
            vec2 index = vec2(mod(index1D, dimensions.x)+0.5, floor(index1D/dimensions.x)+0.5);
            vec2 scaledIndex = index/dimensions;
            return texture2D(tex, scaledIndex);
        }

amandaghassaei's avatar
amandaghassaei committed
167
168
169
170
171
172
        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

amandaghassaei's avatar
amandaghassaei committed
173
174
175
176
177
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
178
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
179
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
180
181
182
183
184
185
186
187
                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
188
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
189
            vec2 meta2 = texture2D(u_meta2, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
190

amandaghassaei's avatar
amandaghassaei committed
191
192
            float nodeError = 0.0;

amandaghassaei's avatar
ui    
amandaghassaei committed
193
            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
194
195
                if (j >= int(meta[1])) break;

amandaghassaei's avatar
amandaghassaei committed
196
                vec4 beamMeta = getFromArray(meta[0]+float(j), u_textureDimEdges, u_beamMeta);
amandaghassaei's avatar
amandaghassaei committed
197
198

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
amandaghassaei committed
199
200
201
202
203
204
205
206
                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
207
208
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
amandaghassaei's avatar
amandaghassaei committed
209
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
amandaghassaei's avatar
amandaghassaei committed
210
211
                vec3 deltaV = neighborLastVelocity-lastVelocity;

amandaghassaei's avatar
amandaghassaei committed
212
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
amandaghassaei committed
213
214
                force += _force;
            }
amandaghassaei's avatar
amandaghassaei committed
215
            nodeError /= meta[1];
amandaghassaei's avatar
amandaghassaei committed
216
217
218
219

            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;

amandaghassaei's avatar
amandaghassaei committed
220
                vec4 nodeCreaseMeta = getFromArray(meta[2]+float(j), u_textureDimNodeCreases, u_nodeCreaseMeta);
amandaghassaei's avatar
amandaghassaei committed
221

amandaghassaei's avatar
amandaghassaei committed
222
                float creaseIndex1D = nodeCreaseMeta[0];
amandaghassaei's avatar
amandaghassaei committed
223
224
225
226
227
                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]
228
                vec4 creaseGeo = texture2D(u_creaseGeo, scaledCreaseIndex);//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
229
                if (creaseGeo[0]< 0.0) continue;//crease disabled bc it has collapsed too much
amandaghassaei's avatar
amandaghassaei committed
230

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

amandaghassaei's avatar
amandaghassaei committed
234
                float nodeNum = nodeCreaseMeta[1];//1, 2, 3, 4
235

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

amandaghassaei's avatar
amandaghassaei committed
238
                    //node #1
amandaghassaei's avatar
amandaghassaei committed
239
                    vec3 normal1 = getFromArray(thetas[2], u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
240
241

                    //node #2
amandaghassaei's avatar
amandaghassaei committed
242
                    vec3 normal2 = getFromArray(thetas[3], u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
243

244
245
                    float coef1 = creaseGeo[2];
                    float coef2 = creaseGeo[3];
amandaghassaei's avatar
amandaghassaei committed
246

247
248
249
250
                    if (nodeNum == 3.0){
                        coef1 = 1.0-coef1;
                        coef2 = 1.0-coef2;
                    }
251
252

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

amandaghassaei's avatar
amandaghassaei committed
255
                } else {
256

amandaghassaei's avatar
amandaghassaei committed
257
                    float normalIndex1D = thetas[2];//node #1
258
259
                    float momentArm = creaseGeo[0];//node #1
                    if (nodeNum == 2.0) {
amandaghassaei's avatar
amandaghassaei committed
260
                        normalIndex1D = thetas[3];//node #2
261
                        momentArm = creaseGeo[1];//node #2
amandaghassaei's avatar
amandaghassaei committed
262
                    }
amandaghassaei's avatar
amandaghassaei committed
263
264

                    vec3 normal = getFromArray(normalIndex1D, u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
265
266
267

                    vec3 _force = angForce/momentArm*normal;
                    force += _force;
amandaghassaei's avatar
eod    
amandaghassaei committed
268
                }
amandaghassaei's avatar
amandaghassaei committed
269
270
271
272
273
274
            }

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

                vec4 faceMeta = getFromArray(meta2[0]+float(j), u_textureDimNodeFaces, u_nodeFaceMeta);//[face index, a, b, c]
amandaghassaei's avatar
amandaghassaei committed
275
276
277
278
279
                vec3 nominalAngles = getFromArray(faceMeta[0], u_textureDimFaces, u_nominalTriangles).xyz;//[angA, angB, angC]

                int faceIndex = 0;
                if (faceMeta[2] < 0.0) faceIndex = 1;
                if (faceMeta[3] < 0.0) faceIndex = 2;
amandaghassaei's avatar
amandaghassaei committed
280
281

                //get node positions
amandaghassaei's avatar
amandaghassaei committed
282
283
284
                vec3 a = faceIndex == 0 ? lastPosition+originalPosition : getPosition(faceMeta[1]);
                vec3 b = faceIndex == 1 ? lastPosition+originalPosition : getPosition(faceMeta[2]);
                vec3 c = faceIndex == 2 ? lastPosition+originalPosition : getPosition(faceMeta[3]);
amandaghassaei's avatar
amandaghassaei committed
285
286

                //calc angles
amandaghassaei's avatar
amandaghassaei committed
287
288
289
                vec3 ab = b-a;
                vec3 ac = c-a;
                vec3 bc = c-b;
amandaghassaei's avatar
amandaghassaei committed
290

amandaghassaei's avatar
amandaghassaei committed
291
292
293
294
295
296
                float lengthABsq = length(ab);
                float lengthACsq = length(ac);
                float lengthBCsq = length(bc);
                lengthABsq *= lengthABsq;
                lengthACsq *= lengthACsq;
                lengthBCsq *= lengthBCsq;
amandaghassaei's avatar
amandaghassaei committed
297

amandaghassaei's avatar
amandaghassaei committed
298
299
300
301
                vec3 angles = vec3(acos(dot(ab, ac)), acos(-1.0*dot(ab, bc)), acos(dot(ac, bc)));
                vec3 anglesDiff = nominalAngles-angles;

                vec3 normal = getFromArray(faceMeta[0], u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
302

amandaghassaei's avatar
amandaghassaei committed
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
                //calc forces
                float triangleStiffness = 0.1;
                anglesDiff *= triangleStiffness;
                if (faceIndex == 0){//a
                    force -= anglesDiff[0]*(cross(ac, normal)/lengthACsq - cross(ab, normal)/lengthABsq);
                    force += anglesDiff[1]*cross(-ab, normal)/lengthABsq;
                    force -= anglesDiff[2]*cross(-ac, normal)/lengthACsq;
                } else if (faceIndex == 1){
                    force -= anglesDiff[0]*cross(ab, normal)/lengthABsq;
                    force -= anglesDiff[1]*(cross(-ab, normal)/lengthABsq - cross(bc, normal)/lengthBCsq);
                    force += anglesDiff[2]*cross(-bc, normal)/lengthBCsq;
                } else if (faceIndex == 2){
                    force += anglesDiff[0]*cross(ac, normal)/lengthACsq;
                    force -= anglesDiff[1]*cross(bc, normal)/lengthBCsq;
                    force -= anglesDiff[2]*(cross(-bc, normal)/lengthBCsq - cross(-ac, normal)/lengthACsq);
                }
amandaghassaei's avatar
amandaghassaei committed
319
320
321

            }

amandaghassaei's avatar
amandaghassaei committed
322
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
amandaghassaei committed
323
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
amandaghassaei committed
324
325
326
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
327
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
328
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
329
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
330
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
331
332
333
334
335
        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
336
337
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
338
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
339

amandaghassaei's avatar
amandaghassaei committed
340
341
342
343
344
345
        vec4 getFromArray(float index1D, vec2 dimensions, sampler2D tex){
            vec2 index = vec2(mod(index1D, dimensions.x)+0.5, floor(index1D/dimensions.x)+0.5);
            vec2 scaledIndex = index/dimensions;
            return texture2D(tex, scaledIndex);
        }

amandaghassaei's avatar
amandaghassaei committed
346
347
348
349
350
351
352
353
        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
354
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
amandaghassaei committed
355
356
357
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
358
359
            vec3 normal1 = getFromArray(lastTheta[2], u_textureDimFaces, u_normals).xyz;
            vec3 normal2 = getFromArray(lastTheta[3], u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
360

amandaghassaei's avatar
amandaghassaei committed
361
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
amandaghassaei committed
362
363
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
amandaghassaei committed
364
365
366
367
368
369
370
371
372

            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
373
374
375
376
            //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
377

amandaghassaei's avatar
amandaghassaei committed
378
379
            float theta = atan(y, x);

amandaghassaei's avatar
amandaghassaei committed
380
            float diff = theta-lastTheta[0];
amandaghassaei's avatar
vive    
amandaghassaei committed
381
            float origDiff = diff;
amandaghassaei's avatar
amandaghassaei committed
382
            if (diff < -5.0) {
amandaghassaei's avatar
amandaghassaei committed
383
                diff += TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
384
            } else if (diff > 5.0) {
amandaghassaei's avatar
amandaghassaei committed
385
                diff -= TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
386
            }
amandaghassaei's avatar
vive    
amandaghassaei committed
387
            theta = lastTheta[0] + diff;
amandaghassaei's avatar
amandaghassaei committed
388
            gl_FragColor = vec4(theta, diff, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
389
390
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
391
392
393
394
395
396
397
398
399

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

amandaghassaei's avatar
amandaghassaei committed
400
401
402
403
404
405
        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

amandaghassaei's avatar
amandaghassaei committed
406
407
408
409
410
411
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimFaces;

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

amandaghassaei's avatar
amandaghassaei committed
412
413
414
            vec3 a = getPosition(indices[0]);
            vec3 b = getPosition(indices[1]);
            vec3 c = getPosition(indices[2]);
amandaghassaei's avatar
amandaghassaei committed
415

amandaghassaei's avatar
amandaghassaei committed
416
417
418
            vec3 normal = normalize(cross(b-a, c-a));

            gl_FragColor = vec4(normal, 0.0);
amandaghassaei's avatar
amandaghassaei committed
419
420
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
421

422
423
424
425
426
427
    <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;
amandaghassaei's avatar
amandaghassaei committed
428
        uniform sampler2D u_creaseMeta2;
429

amandaghassaei's avatar
amandaghassaei committed
430
431
432
433
434
435
        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

436
437
438
439
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;

amandaghassaei's avatar
amandaghassaei committed
440
            vec4 creaseMeta = texture2D(u_creaseMeta2, scaledFragCoord);
441

amandaghassaei's avatar
amandaghassaei committed
442
443
444
445
            vec3 node1 = getPosition(creaseMeta[0]);
            vec3 node2 = getPosition(creaseMeta[1]);
            vec3 node3 = getPosition(creaseMeta[2]);
            vec3 node4 = getPosition(creaseMeta[3]);
446

amandaghassaei's avatar
amandaghassaei committed
447
            float tol = 0.000001;
amandaghassaei's avatar
amandaghassaei committed
448

449
450
            vec3 creaseVector = node4-node3;
            float creaseLength = length(creaseVector);
amandaghassaei's avatar
amandaghassaei committed
451

amandaghassaei's avatar
amandaghassaei committed
452
453
454
455
            if (abs(creaseLength)<tol) {
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
456
457
458
459
460
461
462
            creaseVector /= creaseLength;

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

            float proj1Length = dot(creaseVector, vector1);
            float proj2Length = dot(creaseVector, vector2);
amandaghassaei's avatar
amandaghassaei committed
463
464
465
466

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

amandaghassaei's avatar
amandaghassaei committed
467
468
469
470
            if (dist1<tol || dist2<tol){
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
471

472
            gl_FragColor = vec4(dist1, dist2, proj1Length/creaseLength, proj2Length/creaseLength);
473
474
475
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
476
477
478
    <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
479
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
480
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
481
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
482
483
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
484
485
    <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
486
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
487
    <script type="text/javascript" src="dependencies/OBJExporter.js"></script>
amandaghassaei's avatar
amandaghassaei committed
488
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
489
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
amandaghassaei committed
490
    <script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
amandaghassaei's avatar
amandaghassaei committed
491

amandaghassaei's avatar
amandaghassaei committed
492
493
494
495
496
497
498
499
    <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
500
501
502
503
504
    <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
505
506
    <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
507
508
509
    <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
510
511
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
512
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
513
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
3D ui    
amandaghassaei committed
514
    <script type="text/javascript" src="js/3dUI.js"></script>
amandaghassaei's avatar
amandaghassaei committed
515
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod    
amandaghassaei committed
516
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
517
    <script type="text/javascript" src="js/rigidSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
518
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
519
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
amandaghassaei committed
520
    <script type="text/javascript" src="js/saveFOLD.js"></script>
amandaghassaei's avatar
amandaghassaei committed
521
    <script type="text/javascript" src="js/importer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
522
    <script type="text/javascript" src="js/ViveInterface.js"></script>
amandaghassaei's avatar
amandaghassaei committed
523
524
525
526

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
527
528
529
530
531
532
533
534
535
536
537
538
539
<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
540
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD)</a></li>
amandaghassaei's avatar
amandaghassaei committed
541
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
542
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
543
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
544
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
545
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
amandaghassaei's avatar
amandaghassaei committed
546
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
547
548
                    <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
549
550
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
551
552
553
            <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
554
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
                    <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
571
                            <li><a href="#" class="demo" data-url="Tessellations/honeycomb_333_cp.svg">Lang Honeycomb Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
572
                            <li><a href="#" class="demo" data-url="Tessellations/oval_tessellation_cp.svg">Lang Oval Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
573
                            <li><a href="#" class="demo" data-url="Tessellations/hyperbolic_limit_cp.svg">Lang Hyperbolic Limit</a></li>
amandaghassaei's avatar
amandaghassaei committed
574
575
576
577
578
                        </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
579
                            <li><a href="#" class="demo" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
amandaghassaei's avatar
amandaghassaei committed
580
581
582
583
584
585
586
587
588
589
590
591
592
                        </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
593
594
595
596
597
598
599
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
                    <li><a id="menuVis" href="#">Toggle Menu Visibility</a></li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
600
601
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
602
603
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
604
605
606
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
amandaghassaei's avatar
amandaghassaei committed
607
608
609
                <div class="sliderInput floatRight" id="creasePercentNav">
                    <span class="label-slider">Fold Angle : </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">-->
amandaghassaei's avatar
amandaghassaei committed
610
611
612
613
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
614
615
616
617
618
619

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
620
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
621
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
622
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
623
624
625
626
    <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><br/><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
627
628
629
630
    <div id="simButtons" class="alignRight">
        <a href="#" id="start" class="paddingBottom btn btn-lg btn-success">Start Simulation</a>
        <a href="#" id="pause" class="paddingBottom btn btn-lg btn-warning">Pause Simulation</a>
        <a href="#" id="reset" class="paddingBottom btn btn-lg btn-default">Reset</a>
amandaghassaei's avatar
amandaghassaei committed
631
632
        <div id="stepForwardOptions" class="floatRight">
            <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
styling    
amandaghassaei committed
633
            <label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
634
            <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
635
        </div>
amandaghassaei's avatar
amandaghassaei committed
636
    </div>
amandaghassaei's avatar
amandaghassaei committed
637
638
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
amandaghassaei's avatar
amandaghassaei committed
639
        <!--<label class="radio">-->
amandaghassaei's avatar
amandaghassaei committed
640
641
            <!--<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
642
        <!--</label>-->
amandaghassaei's avatar
amandaghassaei committed
643
644
645
646
647
648
649
650
651
        <!--&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
styling    
amandaghassaei committed
652
653
654
655
656
657
658
659
660
661
662
663
664
    <div class="inlineBlock fullWidth">
        <label class="checkbox floatRight" 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>
    </div><br/>
    <div class="fullWidth alignRight">
        <a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
    </div><br/>
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/>
        <div id="simulationSettings" class="hide">
            <div class="sliderInput paddingBottom" id="axialStiffness">
amandaghassaei's avatar
amandaghassaei committed
665
                <span class="label-slider">Axial Strength : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
styling    
amandaghassaei committed
666
667
                <input value="" placeholder="" class="form-control" type="text">
            </div>
amandaghassaei's avatar
amandaghassaei committed
668
669
670
671
            <div class="sliderInput paddingBottom" id="triStiffness">
                <span class="label-slider">Triangle Strength : </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
styling    
amandaghassaei committed
672
            <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
amandaghassaei committed
673
                <span class="label-slider">Fold Strength : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
styling    
amandaghassaei committed
674
675
676
                <input value="" placeholder="" class="form-control" type="text">
            </div>
            <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
amandaghassaei committed
677
                <span class="label-slider">Facet Strength : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
styling    
amandaghassaei committed
678
679
680
681
682
683
684
                <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>
        </div><br/>
amandaghassaei's avatar
amandaghassaei committed
685
    </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
686
687
688
689
690
691
692
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
        <div id="animationsSettings" class="fullWidth hide">
            <div class="doubleIndent">
                <span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
                <span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span>
            </div>
amandaghassaei's avatar
amandaghassaei committed
693
        </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
694
    </div><br/>
amandaghassaei's avatar
amandaghassaei committed
695

amandaghassaei's avatar
styling    
amandaghassaei committed
696
697
698
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="errorInfo"><span class="fui-triangle-down"></span><b>Error:</b></a><a class="about" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
        <div id="errorInfo" class="hide smallTxt doubleIndent">
amandaghassaei's avatar
amandaghassaei committed
699
            <label>Average vertex error: <span id="globalError"></span></label>
amandaghassaei's avatar
styling    
amandaghassaei committed
700
        </div>
amandaghassaei's avatar
amandaghassaei committed
701
702
    </div><br/>

amandaghassaei's avatar
amandaghassaei committed
703
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
704
</div>
amandaghassaei's avatar
amandaghassaei committed
705
<div id="svgViewer"></div>
amandaghassaei's avatar
amandaghassaei committed
706
707
708
709
710

<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
amandaghassaei's avatar
styling    
amandaghassaei committed
711
712
713
714
            <div>
                <a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a>
            </div>
            <div id="materialSettings" class="inlineBlock indent">
amandaghassaei's avatar
amandaghassaei committed
715
716
717
                <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
718
                </label>
amandaghassaei's avatar
amandaghassaei committed
719
720
721
722
723
724
725
726
727
728
729
730
731
                <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
732
                    <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
733
                        <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
734
                        Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
735
                    </label>
amandaghassaei's avatar
amandaghassaei committed
736
737
738
739
                    <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
740
                </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
741
                <br/>
amandaghassaei's avatar
amandaghassaei committed
742
            </div><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
743
744
745
            <div>
                <a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
            </div>
amandaghassaei's avatar
amandaghassaei committed
746
            <div id="edgeVisiblity" class="hide indent">
amandaghassaei's avatar
styling    
amandaghassaei committed
747
748
749
750
                <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
751
752
753
                <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
754
                        Mountains <span id="numMtns"></span>
amandaghassaei's avatar
amandaghassaei committed
755
756
757
                    </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
758
                        Valleys <span id="numValleys"></span>
amandaghassaei's avatar
amandaghassaei committed
759
760
761
                    </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
762
                        Facet Creases <span id="numFacets"></span>
amandaghassaei's avatar
amandaghassaei committed
763
764
765
                    </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
766
                        Undriven Edges <span id="numPassive"></span>
amandaghassaei's avatar
amandaghassaei committed
767
768
                    </label>
                </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
769
770
771
                <br/>
            </div>
            <br/>
amandaghassaei's avatar
amandaghassaei committed
772
773
774
775
776
777
778
            <!--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
styling    
amandaghassaei committed
779
780
781
            <div>
                <a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
            </div>
amandaghassaei's avatar
amandaghassaei committed
782
783
            <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
784
785
                <div id="VRoptions"><br/>
                    <a href="#" id="enterVR" class="displayBlock btn btn-lg btn-inverse"></a>
amandaghassaei's avatar
styling    
amandaghassaei committed
786
787
788
789
790
791
792
793
794
795
796
797
798
                </div><br/><br/>
            </div><br/>
            <div>
                <a href="#" class="seeMore closed" data-id="cameraAngle"><span class="fui-triangle-down"></span>View Angle:</a><br/>
            </div>
            <div id="cameraAngle" class="hide indent ">
                <a href="#" id="cameraZ" class="paddingBottom btn btn-sm btn-default">Front</a>
                <a href="#" id="cameraMinusZ" class="paddingBottom btn btn-sm btn-default">Back</a>
                <a href="#" id="cameraX" class="paddingBottom btn btn-sm btn-default">Right</a>
                <a href="#" id="cameraMinusX" class="paddingBottom btn btn-sm btn-default">Left</a><br/>
                <a href="#" id="cameraY" class="btn btn-sm btn-default">Top</a>
                <a href="#" id="cameraMinusY" class="btn btn-sm btn-default">Bottom</a>
                <a href="#" id="cameraOrtho" class="btn btn-sm btn-default">Ortho</a>
amandaghassaei's avatar
amandaghassaei committed
799
            </div>
amandaghassaei's avatar
amandaghassaei committed
800
            <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
801
802
803
        </div>
    </div>
</div>
amandaghassaei's avatar
amandaghassaei committed
804
805
806
807
808
<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
809
810
                    <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
811
812
813
814
                    <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
815
                    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
816
817
818
819
                    <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
820
                    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
821
822
823
824
825
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
826
827
828
829
830
<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
831
832
                    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
833
834
835
836
837
838
839
840
841
842
843
844
845
                    <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
846
847
                    <ul>
                        <li>The SVG importer supports path objects and line objects (coming).  Please convert polygons to paths before importing.</li>
amandaghassaei's avatar
amandaghassaei committed
848
849
                        <li>Mountain folds are <span style="color:red">red</span> - rgb(255, 0, 0), hex #ff0000</li>
                        <li>Valley folds are <span style="color:blue">blue</span> - rgb(0, 0, 255), hex #0000ff</li>
amandaghassaei's avatar
docs    
amandaghassaei committed
850
                        <li>Outline edges are <span style="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
amandaghassaei's avatar
amandaghassaei committed
851
852
853
                    </ul>
                    <img src="assets/examplepattern.jpg"/>
                    <ul>
amandaghassaei's avatar
amandaghassaei committed
854
                        <li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
amandaghassaei's avatar
docs    
amandaghassaei committed
855
856
                        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
857
858
859
                    </ul>
                    <img src="assets/patternwithtriangulations.jpg"/>
                    <ul>
amandaghassaei's avatar
amandaghassaei committed
860
861
                        <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
862
                        (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
863
                        <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
amandaghassaei's avatar
amandaghassaei committed
864
                        duplicate lines, and extra vertices falling in the middle of an edge,
amandaghassaei's avatar
amandaghassaei committed
865
                        but it is recommended to remove these errors yourself in order to avoid problems.</li>
amandaghassaei's avatar
amandaghassaei committed
866
                        <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
867
868
869
870
871
                    </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
872
                        <li>If you are starting with a pre-made vector file, first ungroup any groups, release all compound paths
amandaghassaei's avatar
amandaghassaei committed
873
874
875
876
877
                        (<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
878
                        <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
879
                    </ul>
amandaghassaei's avatar
amandaghassaei committed
880
881
882
883
884
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
885
<div class="modal fade" id="aboutVRmodal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
886
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
amandaghassaei committed
887
888
889
890
891
        <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
892
893
894
895
896
                <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
897
                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
898
                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
899
                This is especially interesting 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
900
901
                change the internal strains in the material.
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
902
                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
903
904
905
906
907
908
                </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
909
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
doc    
amandaghassaei committed
910
911
912
913
914
        <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
915
                <p><b>Animation Settings</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
916
917
918
                The dynamic simulation is calculated by solving for all the forces in the system, moving time forward in small <b>&Delta;t</b> steps,
                and updating the vertices of the origami incrementally.  The time step size for this animation is calculated automatically
                based on the material stiffnesses set in the <b>Simulation Settings</b> section: more stiff settings
amandaghassaei's avatar
doc    
amandaghassaei committed
919
920
                require shorter time steps to solve and will slow down the simulation.<br/>
                <br/>
amandaghassaei's avatar
amandaghassaei committed
921
                <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
922
923
                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
924
                </p>
amandaghassaei's avatar
amandaghassaei committed
925
926
927
928
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
929
930
931
932
933
934
935
<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
936
937
938
939
                <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
940
                <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
941
942
943
944
                <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
945
946
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
947
                <button id="doSTLsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
948
949
950
951
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
<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
975
976
977
978
979
980
981
<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
982
                <b>Export FOLD</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
983
                Filename: &nbsp;&nbsp;<input id="foldFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .fold<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
984
985
986
987
                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
988
                    <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
989
                    <ul id="unitsDropdown" role="menu" class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
990
991
992
993
994
995
996
997
                        <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
998
999
1000
                    </ul>
                </div>
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
                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
1011
1012
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
1013
                <button id="doFOLDsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
1014
1015
1016
1017
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
errors    
amandaghassaei committed
1018
1019
1020
1021
1022
1023
1024
<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
1025
                <b>Import FOLD</b><br/><br/>
1026
                <label class="bigLabel checkbox" for="foldUseAngles">
amandaghassaei's avatar
amandaghassaei committed
1027
1028
1029
                    <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
1030
1031
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
1032
                <button data-dismiss="modal" type="button" class="btn btn-success">OK</button>
amandaghassaei's avatar
errors    
amandaghassaei committed
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
            </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
1047
<div class="modal fade" id="aboutErrorModal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
1048
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
amandaghassaei committed
1049
1050
1051
1052
1053
1054
        <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
1055
1056
1057
                    <b>Average vertex error</b> gives a sense of how much the distance constraints in the
                    origami pattern are being violated (i.e. how much the sheet is being stretched).  The error at each vertex is evaluated by averaging the
                    percent deviation of all its distance constraints with adjacent vertices.  This error is
amandaghassaei's avatar
amandaghassaei committed
1058
                    reported as a percent of the total length of the distance constraint to remove scaling effects.
amandaghassaei's avatar
amandaghassaei committed
1059
1060
                    <br/><br/>
                    This measurement is equivalent to <a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
amandaghassaei's avatar
amandaghassaei committed
1061
                        Cauchy strain or engineering strain</a> of the distance constraints on this system.
amandaghassaei's avatar
doc    
amandaghassaei committed
1062
                    Increasing the <b>Axial Stiffness</b> will tighten these constraints and
amandaghassaei's avatar
amandaghassaei committed
1063
1064
                    lower the error in the simulation.<br/>
                    <br/>
amandaghassaei's avatar
amandaghassaei committed
1065
                    To visualize the error of each vertex graphically, select <b>Strain Visualization</b> under <b>Mesh Material</b>
amandaghassaei's avatar
amandaghassaei committed
1066
1067
1068
1069
1070
1071
                     in the left menu.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
1072
<div class="modal fade" id="aboutStiffnessModal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
1073
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
amandaghassaei committed
1074
1075
1076
1077
1078
        <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
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
                <p><b>Simulation Settings</b><br/><br/>
                    This app uses a compliant dynamic simulation method to solve for the geometry of an origami pattern
                    at a given fold angle.  The simulation sets up several types of constraints: distance constraints prevent the
                    sheet from stretching or compressing, and angular constraints fold or flatten the sheet.  Each of these constraints is weighted by a stiffness - the stiffer the constraint, the better it is enforced
                    in the simulation.  <br/>
                    <br/>
                    <b>Axial Stiffness</b> is the stiffness of the distance constraints.  Increasing axial
                    stiffness will decrease the strain in the simulation, but it will also slow down the solver.  <br/>
                    <br/>
                    Fold and facet stiffnesses correspond to two types of angular constraints.  <b>Fold Stiffness</b> is the stiffness of the mountain
                    and valley creases in the origami pattern.  <b>Facet Stiffness</b> is the stiffness of the triangulated faces between
                    creases in the pattern.  Increasing facet stiffness causes the faces between creases to stay very flat as the origami is folded.
                    As facet stiffness becomes very high, this simulation approaches a <a href="http://www.tsg.ne.jp/TT/cg/TachiFreeformOrigami2010.pdf" target="_blank">
                        rigid origami simulation</a>, and models the behavior of a rigid material (such as metal) when folded.<br/>
                    <br/>
                    Constraints <i>strengths</i> (units of N) are scaled by the length of a particular constraint to determine the <i>stiffness</i>.  Axial stiffness is calculated by dividing
                    axial strength by length; angular stiffness is calculated by multiplying fold or facet strength by length.<br/>
                    <br/>
                    Since this is a dynamic simulation, vertices of the origami move with some notion of acceleration and velocity.  In order to
                    keep the system stable and help it converge to a static solution, <a target="_blank" href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator">
                        damping</a> is added to the distance constraints.  The <b>Damping</b> slider allows you to control the amount of damping
                    present in the simulation, from 0 (no damping) to 1 (critical damping).  Decreasing damping makes the simulation more "springy".
                    It may be useful to temporarily turn down damping to help the simulation more quickly converge towards its static solution - especially
                    for patterns that take a long time to curl.
amandaghassaei's avatar
amandaghassaei committed
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
                </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">