index.html 74.7 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
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
145
        uniform float u_axialStiffness;
amandaghassaei's avatar
amandaghassaei committed
146
147
148
149
150
        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
151
        uniform sampler2D u_meta;//[beamsIndex, numBeam, nodeCreaseMetaIndex, numCreases]
amandaghassaei's avatar
amandaghassaei committed
152
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
amandaghassaei committed
153
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
amandaghassaei's avatar
amandaghassaei committed
154
        uniform sampler2D u_nodeCreaseMeta;//[creaseIndex, nodeIndex, -, -]
amandaghassaei's avatar
amandaghassaei committed
155
156
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
157
        uniform sampler2D u_creaseGeo;//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
158
159
160
        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
161

amandaghassaei's avatar
amandaghassaei committed
162
163
164
165
166
167
        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
168
169
170
171
172
173
        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
174
175
176
177
178
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;

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

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

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

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

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

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

            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
221
                vec4 nodeCreaseMeta = getFromArray(meta[2]+float(j), u_textureDimNodeCreases, u_nodeCreaseMeta);
amandaghassaei's avatar
amandaghassaei committed
222

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

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

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

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

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

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

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

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

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

amandaghassaei's avatar
amandaghassaei committed
256
                } else {
257

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

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

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

            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
276
277
278
279
280
                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
281
282

                //get node positions
amandaghassaei's avatar
amandaghassaei committed
283
284
285
                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
286
287

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

amandaghassaei's avatar
amandaghassaei committed
292
293
294
295
                float lengthAB = length(ab);
                float lengthAC = length(ac);
                float lengthBC = length(bc);

amandaghassaei's avatar
amandaghassaei committed
296
297
298
                float tol = 0.0000001;
                if (abs(lengthAB) < tol || abs(lengthBC) < tol || abs(lengthAC) < tol) continue;

amandaghassaei's avatar
amandaghassaei committed
299
300
301
302
303
304
305
                ab /= lengthAB;
                ac /= lengthAC;
                bc /= lengthBC;

                vec3 angles = vec3(acos(dot(ab, ac)),
                    acos(-1.0*dot(ab, bc)),
                    acos(dot(ac, bc)));
amandaghassaei's avatar
amandaghassaei committed
306
307
308
                vec3 anglesDiff = nominalAngles-angles;

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

amandaghassaei's avatar
amandaghassaei committed
310
                //calc forces
amandaghassaei's avatar
amandaghassaei committed
311
                anglesDiff *= u_axialStiffness/100.0;
amandaghassaei's avatar
amandaghassaei committed
312
                if (faceIndex == 0){//a
amandaghassaei's avatar
amandaghassaei committed
313
314
315
316
317
                    vec3 normalCrossAC = cross(normal, ac)/lengthAC;
                    vec3 normalCrossAB = cross(normal, ab)/lengthAB;
                    force -= anglesDiff[0]*(normalCrossAC - normalCrossAB);
                    force -= anglesDiff[1]*normalCrossAB;
                    force += anglesDiff[2]*normalCrossAC;
amandaghassaei's avatar
amandaghassaei committed
318
                } else if (faceIndex == 1){
amandaghassaei's avatar
amandaghassaei committed
319
320
321
322
323
                    vec3 normalCrossAB = cross(normal, ab)/lengthAB;
                    vec3 normalCrossBC = cross(normal, bc)/lengthBC;
                    force -= anglesDiff[0]*normalCrossAB;
                    force += anglesDiff[1]*(normalCrossAB + normalCrossBC);
                    force -= anglesDiff[2]*normalCrossBC;
amandaghassaei's avatar
amandaghassaei committed
324
                } else if (faceIndex == 2){
amandaghassaei's avatar
amandaghassaei committed
325
326
327
328
329
                    vec3 normalCrossAC = cross(normal, ac)/lengthAC;
                    vec3 normalCrossBC = cross(normal, bc)/lengthBC;
                    force += anglesDiff[0]*normalCrossAC;
                    force -= anglesDiff[1]*normalCrossBC;
                    force += anglesDiff[2]*(normalCrossBC - normalCrossAC);
amandaghassaei's avatar
amandaghassaei committed
330
                }
amandaghassaei's avatar
amandaghassaei committed
331
332
333

            }

amandaghassaei's avatar
amandaghassaei committed
334
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
amandaghassaei committed
335
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
amandaghassaei committed
336
337
338
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
339
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
340
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
341
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
342
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
343
344
345
346
347
        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
348
349
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
350
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
351

amandaghassaei's avatar
amandaghassaei committed
352
353
354
355
356
357
        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
358
359
360
361
362
363
364
365
        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
366
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
amandaghassaei committed
367
368
369
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
370
371
            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
372

amandaghassaei's avatar
amandaghassaei committed
373
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
amandaghassaei committed
374
375
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
amandaghassaei committed
376
377
378
379
380
381
382
383
384

            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
385
386
387
388
            //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
389

amandaghassaei's avatar
amandaghassaei committed
390
391
            float theta = atan(y, x);

amandaghassaei's avatar
amandaghassaei committed
392
            float diff = theta-lastTheta[0];
amandaghassaei's avatar
vive    
amandaghassaei committed
393
            float origDiff = diff;
amandaghassaei's avatar
amandaghassaei committed
394
            if (diff < -5.0) {
amandaghassaei's avatar
amandaghassaei committed
395
                diff += TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
396
            } else if (diff > 5.0) {
amandaghassaei's avatar
amandaghassaei committed
397
                diff -= TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
398
            }
amandaghassaei's avatar
vive    
amandaghassaei committed
399
            theta = lastTheta[0] + diff;
amandaghassaei's avatar
amandaghassaei committed
400
            gl_FragColor = vec4(theta, diff, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
401
402
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
403
404
405
406
407
408
409
410
411

    <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
412
413
414
415
416
417
        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
418
419
420
421
422
423
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimFaces;

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

amandaghassaei's avatar
amandaghassaei committed
424
425
426
            vec3 a = getPosition(indices[0]);
            vec3 b = getPosition(indices[1]);
            vec3 c = getPosition(indices[2]);
amandaghassaei's avatar
amandaghassaei committed
427

amandaghassaei's avatar
amandaghassaei committed
428
429
430
            vec3 normal = normalize(cross(b-a, c-a));

            gl_FragColor = vec4(normal, 0.0);
amandaghassaei's avatar
amandaghassaei committed
431
432
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
433

434
435
436
437
438
439
    <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
440
        uniform sampler2D u_creaseMeta2;
441

amandaghassaei's avatar
amandaghassaei committed
442
443
444
445
446
447
        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;
        }

448
449
450
451
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;

amandaghassaei's avatar
amandaghassaei committed
452
            vec4 creaseMeta = texture2D(u_creaseMeta2, scaledFragCoord);
453

amandaghassaei's avatar
amandaghassaei committed
454
455
456
457
            vec3 node1 = getPosition(creaseMeta[0]);
            vec3 node2 = getPosition(creaseMeta[1]);
            vec3 node3 = getPosition(creaseMeta[2]);
            vec3 node4 = getPosition(creaseMeta[3]);
458

amandaghassaei's avatar
amandaghassaei committed
459
            float tol = 0.000001;
amandaghassaei's avatar
amandaghassaei committed
460

461
462
            vec3 creaseVector = node4-node3;
            float creaseLength = length(creaseVector);
amandaghassaei's avatar
amandaghassaei committed
463

amandaghassaei's avatar
amandaghassaei committed
464
465
466
467
            if (abs(creaseLength)<tol) {
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
468
469
470
471
472
473
474
            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
475
476
477
478

            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
479
480
481
482
            if (dist1<tol || dist2<tol){
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
483

484
            gl_FragColor = vec4(dist1, dist2, proj1Length/creaseLength, proj2Length/creaseLength);
485
486
487
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
488
489
490
    <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
491
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
492
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
493
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
494
495
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
496
497
    <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
498
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
499
    <script type="text/javascript" src="dependencies/OBJExporter.js"></script>
amandaghassaei's avatar
amandaghassaei committed
500
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
501
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
fold    
amandaghassaei committed
502
503
    <script type="text/javascript" src="dependencies/fold.js"></script>
    <!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->
amandaghassaei's avatar
amandaghassaei committed
504

amandaghassaei's avatar
fold    
amandaghassaei committed
505
506
507
508
509
510
511
    <!--<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
512

amandaghassaei's avatar
amandaghassaei committed
513
514
515
516
517
    <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
518
519
    <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
520
521
522
    <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
523
524
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
525
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
526
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
3D ui    
amandaghassaei committed
527
    <script type="text/javascript" src="js/3dUI.js"></script>
amandaghassaei's avatar
amandaghassaei committed
528
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod    
amandaghassaei committed
529
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
530
    <script type="text/javascript" src="js/rigidSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
531
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
532
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
amandaghassaei committed
533
    <script type="text/javascript" src="js/saveFOLD.js"></script>
amandaghassaei's avatar
amandaghassaei committed
534
    <script type="text/javascript" src="js/importer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
535
    <script type="text/javascript" src="js/ViveInterface.js"></script>
amandaghassaei's avatar
amandaghassaei committed
536
537
538
539

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
540
541
542
543
544
545
546
547
548
549
550
551
552
<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
553
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD)</a></li>
amandaghassaei's avatar
amandaghassaei committed
554
                    <li><a id="importSettings" href="#">SVG Import Settings...</a></li>
amandaghassaei's avatar
amandaghassaei committed
555
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
556
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
557
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
558
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
559
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
amandaghassaei's avatar
amandaghassaei committed
560
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
561
562
                    <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
563
564
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
565
566
567
            <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
568
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
569
570
571
572
                    <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>
amandaghassaei's avatar
amandaghassaei committed
573
                            <li><a href="#" class="demo" data-url="Origami/hypar.svg">Hypar</a></li>
amandaghassaei's avatar
amandaghassaei committed
574
575
576
577
578
                            <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">
amandaghassaei's avatar
amandaghassaei committed
579
                        <a tabindex="-1">Tessellations<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
amandaghassaei committed
580
581
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
amandaghassaei's avatar
amandaghassaei committed
582
583
584
585
586
587
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb</a></li>
                            <li class="divider"></li>
                            <li><a href="#" class="demo" data-url="Tessellations/huffmanExtrudedBoxes.svg">Huffman Extruded Boxes</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/huffmanWaterbomb.svg">Huffman Waterbombs</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/huffmanRectangularWeave.svg">Huffman Rect Weave</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/huffmanStarsTriangles.svg">Huffman Stars-Triangles</a></li>
amandaghassaei's avatar
amandaghassaei committed
588
                            <li><a href="#" class="demo" data-url="Tessellations/huffmanExdentedBoxes.svg">Huffman Exdented Boxes</a></li>
amandaghassaei's avatar
amandaghassaei committed
589
590
                            <li class="divider"></li>
                            <li><a href="#" class="demo" data-url="Tessellations/reschTriTessellation.svg">Resch Triangle Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
591
                            <li><a href="#" class="demo" data-url="Tessellations/reschBarbell.svg">Resch Barbell Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
592
593
                            <li class="divider"></li>
                            <li><a href="#" class="demo" data-url="Tessellations/langHoneycomb.svg">Lang Honeycomb Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
594
595
                            <li><a href="#" class="demo" data-url="Tessellations/langOvalTessellation.svg">Lang Oval Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/langHyperbolicLimit.svg">Lang Hyperbolic Limit</a></li>
amandaghassaei's avatar
fold    
amandaghassaei committed
596
							<li><a href="#" class="demo" data-url="Tessellations/test.svg">test (REMOVE)</a></li>
amandaghassaei's avatar
amandaghassaei committed
597
598
599
600
601
                        </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
602
                            <li><a href="#" class="demo" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
amandaghassaei's avatar
amandaghassaei committed
603
604
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
605
606
607
608
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Simple Folds<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="SimpleFolds/simpleVertex.svg">Simple Vertex</a></li>
amandaghassaei's avatar
amandaghassaei committed
609
                            <li><a href="#" class="demo" data-url="SimpleFolds/russianTuck.svg">Russian Tuck</a></li>
amandaghassaei's avatar
case    
amandaghassaei committed
610
611
                            <li><a href="#" class="demo" data-url="SimpleFolds/mapfold.svg">Map Fold</a></li>
                            <li><a href="#" class="demo" data-url="SimpleFolds/brochurefold.svg">Brochure Fold</a></li>
amandaghassaei's avatar
amandaghassaei committed
612
613
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
614
615
616
617
                    <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">
amandaghassaei's avatar
amandaghassaei committed
618
619
620
621
622
623
624
625
626
627
628
629
                            <li class="dropdown-submenu">
                                <a tabindex="-1">Skinny Triangles<span class="pull-right fui-arrow-right"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" class="demo" data-url="Tessellations/langRattanWeave.svg">Lang Rattan Weave</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu">
                                <a tabindex="-1">Bad Files<span class="pull-right fui-arrow-right"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" class="demo" data-url="Tessellations/langWedgeDoubleFaced.svg">Lang Wedged Double Faced Tessellation</a></li>
                                </ul>
                            </li>
amandaghassaei's avatar
amandaghassaei committed
630
631
632
633
                        </ul>
                    </li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
634
635
636
637
638
            <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>
amandaghassaei's avatar
amandaghassaei committed
639
                    <li><a id="changeBackground" href="#">Change Background Color...</a></li>
amandaghassaei's avatar
amandaghassaei committed
640
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
641
                    <li><a id="stopRotation" href="#">Stop Rotation</a></li>
amandaghassaei's avatar
amandaghassaei committed
642
643
644
645
646
647
648
649
650
651
652
653
                    <li><a id="rotateX" href="#">Rotate Model X</a></li>
                    <li><a id="rotateY" href="#">Rotate Model Y</a></li>
                    <li><a id="rotateZ" href="#">Rotate Model Z</a></li>
                    <li><a id="changeRotationSpeed" href="#">Change Rotation Speed...</a></li>
                    <li class="divider"></li>
                    <li><a href="#" id="cameraZ">View Front</a></li>
                    <li><a href="#" id="cameraMinusZ">View Back</a></li>
                    <li><a href="#" id="cameraX">View Right</a></li>
                    <li><a href="#" id="cameraMinusX">View Left</a></li>
                    <li><a href="#" id="cameraY">View Top</a></li>
                    <li><a href="#" id="cameraMinusY">View Bottom</a></li>
                    <li><a href="#" id="cameraOrtho">View Ortho</a></li>
amandaghassaei's avatar
amandaghassaei committed
654
655
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
656
657
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
658
659
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
660
661
662
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
amandaghassaei's avatar
amandaghassaei committed
663
664
665
                <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
666
667
668
669
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
670
671
672
673
674
675

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
676
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
677
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
678
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
679
680
    <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>
amandaghassaei's avatar
amandaghassaei committed
681
        <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
682
    </div><br/><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
683
684
685
686
    <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
687
688
        <div id="stepForwardOptions" class="floatRight">
            <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
amandaghassaei committed
689
            <label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="int form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
690
            <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
691
        </div>
amandaghassaei's avatar
amandaghassaei committed
692
    </div>
amandaghassaei's avatar
amandaghassaei committed
693
694
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
amandaghassaei's avatar
amandaghassaei committed
695
        <!--<label class="radio">-->
amandaghassaei's avatar
amandaghassaei committed
696
697
            <!--<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
698
        <!--</label>-->
amandaghassaei's avatar
amandaghassaei committed
699
700
701
702
703
704
705
706
707
        <!--&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
708
709
710
711
712
713
714
715
716
717
718
719
720
    <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
721
                <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
722
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling    
amandaghassaei committed
723
            </div>
amandaghassaei's avatar
amandaghassaei committed
724
            <!--<div class="sliderInput paddingBottom" id="triStiffness">-->
amandaghassaei's avatar
amandaghassaei committed
725
                <!--<span class="label-slider">Triangle Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>-->
amandaghassaei's avatar
amandaghassaei committed
726
                <!--<input value="" placeholder="" class="float form-control" type="text">-->
amandaghassaei's avatar
amandaghassaei committed
727
            <!--</div>-->
amandaghassaei's avatar
styling    
amandaghassaei committed
728
            <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
amandaghassaei committed
729
                <span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
730
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling    
amandaghassaei committed
731
732
            </div>
            <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
amandaghassaei committed
733
                <span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
734
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling    
amandaghassaei committed
735
736
737
            </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>
amandaghassaei's avatar
amandaghassaei committed
738
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling    
amandaghassaei committed
739
740
            </div>
        </div><br/>
amandaghassaei's avatar
amandaghassaei committed
741
    </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
742
743
744
745
746
747
748
    <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
749
        </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
750
    </div><br/>
amandaghassaei's avatar
amandaghassaei committed
751

amandaghassaei's avatar
styling    
amandaghassaei committed
752
753
754
    <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
755
            <label>Average vertex error: <span id="globalError"></span></label>
amandaghassaei's avatar
styling    
amandaghassaei committed
756
        </div>
amandaghassaei's avatar
amandaghassaei committed
757
758
    </div><br/>

amandaghassaei's avatar
amandaghassaei committed
759
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
760
</div>
amandaghassaei's avatar
amandaghassaei committed
761
<div id="svgViewer"></div>
amandaghassaei's avatar
amandaghassaei committed
762
763
764
765
<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
amandaghassaei's avatar
styling    
amandaghassaei committed
766
767
768
769
            <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
770
771
772
                <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
773
                </label>
amandaghassaei's avatar
amandaghassaei committed
774
775
776
777
778
779
780
781
782
783
784
785
786
                <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
787
                    <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
788
                        <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
789
                        Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
790
                    </label>
amandaghassaei's avatar
amandaghassaei committed
791
792
793
794
                    <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
795
                </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
796
                <br/>
amandaghassaei's avatar
amandaghassaei committed
797
            </div><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
798
799
800
            <div>
                <a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
            </div>
amandaghassaei's avatar
amandaghassaei committed
801
            <div id="edgeVisiblity" class="hide indent">
amandaghassaei's avatar
styling    
amandaghassaei committed
802
803
804
805
                <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
806
807
808
                <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
809
                        Mountains <span id="numMtns"></span>
amandaghassaei's avatar
amandaghassaei committed
810
811
812
                    </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
813
                        Valleys <span id="numValleys"></span>
amandaghassaei's avatar
amandaghassaei committed
814
815
816
                    </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
817
                        Facet Creases <span id="numFacets"></span>
amandaghassaei's avatar
amandaghassaei committed
818
819
820
                    </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
821
                        Undriven Edges <span id="numPassive"></span>
amandaghassaei's avatar
amandaghassaei committed
822
823
                    </label>
                </div>
amandaghassaei's avatar
styling    
amandaghassaei committed
824
825
826
                <br/>
            </div>
            <br/>
amandaghassaei's avatar
amandaghassaei committed
827
828
829
830
831
832
833
            <!--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
834
835
836
            <div>
                <a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
            </div>
amandaghassaei's avatar
amandaghassaei committed
837
838
            <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
839
840
                <div id="VRoptions"><br/>
                    <a href="#" id="enterVR" class="displayBlock btn btn-lg btn-inverse"></a>
amandaghassaei's avatar
styling    
amandaghassaei committed
841
842
                </div><br/><br/>
            </div><br/>
amandaghassaei's avatar
amandaghassaei committed
843
            <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
844
845
846
        </div>
    </div>
</div>
amandaghassaei's avatar
fold    
amandaghassaei committed
847

amandaghassaei's avatar
amandaghassaei committed
848
849
850
851
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
amandaghassaei's avatar
fold    
amandaghassaei committed
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
                <b>Origami Simulator</b><br/><br/>
                <p>
                    This app allows you to upload any origami crease pattern and simulate how it will fold.  It uses a physics-based
                    approach to iteratively solve for small displacements in the geometry of an initially flat sheet due to forces
                    exerted by creases.  This physics solver extends work from the following sources: <br/><br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf">Origami Folding; A Structural Engineering Approach</a> by Mark Schenk and Simon D. Guest<br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf">Rigid Origami Simulator</a> by Tomohiro Tachi<br/>
                    <br/>
                    All simulation methods were written from scratch and are executed in parallel in several GPU fragment shaders for fast performance.
                </p><br/>
                    <b>Instructions:</b><br/><br/>
                    <ul>
                        <li>Slide the <b>Fold Angle</b> slider to control the degree of folding of the pattern (1 is fully folded, 0 is unfolded,
                            and -1 is fully folded with the opposite mountain/valley assignments).</li>
                        <li>Import other patterns under the <b>Examples</b> menu.</li>
                        <li>Upload your own crease patterns in SVG or FOLD formats, following <a href="#" class="goToImportInstructions">these instructions</a>.</li>
                        <li>Export FOLD files or 3D models ( STL or OBJ ) of the folded state of your design ( <b>File>Save Simulation as...</b> ).</li>
                        <li>Visualize the internal strain of the origami as it folds using the <b>Strain Visualization</b> in the left menu.</li>
                        <li>If you are working from a computer connected to a Vive, follow <a href="#" id="goToViveInstructions">these instructions</a>
                            to use this app in an interactive virtual reality mode.</li>
                    </ul>
amandaghassaei's avatar
docs    
amandaghassaei committed
873
                    <br/>
amandaghassaei's avatar
fold    
amandaghassaei committed
874
875
876
877
878
879
880
881
882
883

                    <b>External Libraries:</b><br/><br/>
                    <ul>
                        <li>All rendering and 3D interaction done with <a target="_blank" href="https://threejs.org/">three.js</a></li>
                        <li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG parsing</li>
                        <li>Arbitrary polygonal faces of imported geometry are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a></li>
                        <li><a target="_blank" href="https://jquery.com/">jQuery</a>, <a target="_blank" href="http://getbootstrap.com/">Bootstrap</a>, and the
                            <a target="_blank" href="http://designmodo.github.io/Flat-UI/">Flat UI theme</a> used to build the GUI</li>
                    </ul>
                <p>
amandaghassaei's avatar
docs    
amandaghassaei committed
884
885
886
                    <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
fold    
amandaghassaei committed
887
888
889
                    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!<br/>
                    <br/>
                    More documentation coming soon.
amandaghassaei's avatar
amandaghassaei committed
890
891
892
893
894
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
895
896
897
898
899
<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
900
901
                    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
902
903
904
905
906
907
908
909
910
911
912
913
914
                    <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
915
                    <ul>
amandaghassaei's avatar
eod    
amandaghassaei committed
916
                        <li>The SVG importer supports path, line, rect, polygon, and polyline objects</li>
amandaghassaei's avatar
amandaghassaei committed
917
918
                        <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
919
                        <li>Outline edges are <span style="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
amandaghassaei's avatar
amandaghassaei committed
920
                        <li>Hinges (undriven creases) are <span style="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
amandaghassaei's avatar
amandaghassaei committed
921
922
923
                    </ul>
                    <img src="assets/examplepattern.jpg"/>
                    <ul>
amandaghassaei's avatar
amandaghassaei committed
924
                        <li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
amandaghassaei's avatar
docs    
amandaghassaei committed
925
926
                        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
927
928
929
                    </ul>
                    <img src="assets/patternwithtriangulations.jpg"/>
                    <ul>
amandaghassaei's avatar
amandaghassaei committed
930
931
                        <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
932
                        (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
933
                        <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
amandaghassaei's avatar
amandaghassaei committed
934
                        duplicate lines, and extra vertices falling in the middle of an edge,
amandaghassaei's avatar
amandaghassaei committed
935
                        but it is recommended to remove these errors yourself in order to avoid problems.</li>
amandaghassaei's avatar
amandaghassaei committed
936
                        <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
937
938
939
940
941
                    </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
942
                        <li>If you are starting with a pre-made vector file, first ungroup any groups, release all compound paths
amandaghassaei's avatar
amandaghassaei committed
943
                        (<b>Select all + Object > Compound Path > Release</b>), and release all clipping masks (<b>Select all + Object > Clipping Mask > Release</b>).</li>
amandaghassaei's avatar
amandaghassaei committed
944
945
                        <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,
amandaghassaei's avatar
amandaghassaei committed
946
                        then go to <b>Select > Same > Appearance</b> to select all similar lines in the pattern.
amandaghassaei's avatar
amandaghassaei committed
947
                        <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
948
                    </ul>
amandaghassaei's avatar
amandaghassaei committed
949
950
951
952
953
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
954
<div class="modal fade" id="aboutVRmodal" tabindex="-1" role="dialog">
amandaghassaei's avatar
amandaghassaei committed
955
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
amandaghassaei committed
956
957
958
959
960
        <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
fold    
amandaghassaei committed
961
                <p><b>Virtual Reality</b><br/><br/>
amandaghassaei's avatar
doc    
amandaghassaei committed
962
963
964
965
                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
966
                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
967
                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
968
                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
969
970
                change the internal strains in the material.
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
971
                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
972
973
974
975
976
977
                </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
978
    <div class="modal-dialog modal-lg">
amandaghassaei's avatar
doc    
amandaghassaei committed
979
980
981
982
983
        <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
984
                <p><b>Animation Settings</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
985
986
987
                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
988
989
                require shorter time steps to solve and will slow down the simulation.<br/>
                <br/>
amandaghassaei's avatar
amandaghassaei committed
990
                <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
991
992
                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
993
                </p>
amandaghassaei's avatar
amandaghassaei committed
994
995
996
997
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
998
999
1000
1001
1002
1003
1004
<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
1005
1006
                <b>Export STL</b><br/><br/>
                Filename: &nbsp;&nbsp;<input id="stlFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1007
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text"><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1008
                Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
amandaghassaei's avatar
amandaghassaei committed
1009
                <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
1010
1011
1012
1013
                <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
1014
1015
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
1016
                <button id="doSTLsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
1017
1018
1019
1020
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
1021
1022
1023
1024
1025
1026
1027
1028
1029
<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/>
amandaghassaei's avatar
amandaghassaei committed
1030
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text"><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
                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
1044
1045
1046
1047
1048
1049
1050
<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
1051
                <b>Export FOLD</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1052
                Filename: &nbsp;&nbsp;<input id="foldFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .fold<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1053
                Author: &nbsp;&nbsp;<input id="foldAuthor" value="Amanda Ghassaei" placeholder="" class="bigInput text form-control" type="text"><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1054
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="float exportScale form-control" type="text">&nbsp;&nbsp;&nbsp;&nbsp;