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

    <link href="dependencies/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="dependencies/jquery-ui.min.css"/>
amandaghassaei's avatar
nav    
amandaghassaei committed
10
11
12 
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
amandaghassaei's avatar
small change    
amandaghassaei committed
13
14
15
16
17
18
19
20
21
22
23 
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

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

    </script>
amandaghassaei's avatar
starting app  
amandaghassaei committed
24
amandaghassaei's avatar
starting sim    
amandaghassaei committed
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80 
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        void main() {
           gl_Position = vec4(a_position, 0, 1);
        }
    </script>

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

    <script id="zeroTexture" type="x-shader/x-fragment">
        void main(){
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
81 
            gl_FragColor = vec4(0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
82
83 
        }
    </script>
amandaghassaei's avatar
recenter geo after user interaction    
amandaghassaei committed
84
85
86
87
88
89
90
91
92
93
94
95 
    <script id="centerTexture" type="x-shader/x-fragment">
        precision mediump float;
        uniform sampler2D u_lastPosition;
        uniform vec2 u_textureDim;
        uniform vec3 u_center;
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;
            vec3 position = texture2D(u_lastPosition, scaledFragCoord).xyz;
            gl_FragColor = vec4(position-u_center, 0.0);
        }
    </script>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
96
97
98
99
100
101
102
103
104
105
106
107
108 

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

        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;
amandaghassaei's avatar
drag node    
amandaghassaei committed
109
110 
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
amandaghassaei's avatar
starting sim    
amandaghassaei committed
111
112 
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
drag node    
amandaghassaei committed
113 
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
114
115
116 
                return;
            }
amandaghassaei's avatar
global error    
amandaghassaei committed
117
118
119 
            vec4 velocityData = texture2D(u_velocity, scaledFragCoord);
            vec3 position = velocityData.xyz*u_dt + lastPosition;
            gl_FragColor = vec4(position, velocityData.a);//velocity.a has error info
amandaghassaei's avatar
starting sim    
amandaghassaei committed
120
121
122
123
124
125 
        }
    </script>

    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
debugged shader    
amandaghassaei committed
126 
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
127
128
129 
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
eod    
amandaghassaei committed
130 
        uniform float u_creasePercent;
amandaghassaei's avatar
starting sim    
amandaghassaei committed
131
132
133
134
135
136 
        uniform float u_dt;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_lastVelocity;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_externalForces;
        uniform sampler2D u_mass;
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
137 
        uniform sampler2D u_meta;//[beamsIndex, numBeam, creaseMeta2Index, numCreases]
amandaghassaei's avatar
debugged shader    
amandaghassaei committed
138 
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
139
140
141
142 
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
        uniform sampler2D u_creaseMeta2;//[creaseIndex, momentArmLength, nodeIndex]
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
amandaghassaei's avatar
starting sim    
amandaghassaei committed
143
144
145
146
147
148 

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

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
drag node    
amandaghassaei committed
149 
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
150 
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
151
152
153
154
155
156
157
158 
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
            vec3 lastVelocity = texture2D(u_lastVelocity, scaledFragCoord).xyz;
            vec3 originalPosition = texture2D(u_originalPosition, scaledFragCoord).xyz;

            vec4 neighborIndices = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
159 
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
160
amandaghassaei's avatar
global error    
amandaghassaei committed
161
162 
            float nodeError = 0.0;
amandaghassaei's avatar
ui    
amandaghassaei committed
163 
            for (int j=0;j<100;j++){//for all beams (up to 100, had to put a const int in here)
amandaghassaei's avatar
debugged shader    
amandaghassaei committed
164
165
166
167
168
169
170
171 
                if (j >= int(meta[1])) break;

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

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
starting sim    
amandaghassaei committed
172
173
174
175
176
177
178
179 
                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
better triangulation of quads    
amandaghassaei committed
180
181 
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
amandaghassaei's avatar
scale fix    
amandaghassaei committed
182 
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
183
184 
                vec3 deltaV = neighborLastVelocity-lastVelocity;
amandaghassaei's avatar
debugging    
amandaghassaei committed
185 
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
starting sim    
amandaghassaei committed
186
187 
                force += _force;
            }
amandaghassaei's avatar
global error    
amandaghassaei committed
188 
            nodeError /= meta[1];
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
189
190
191
192
193
194
195 

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

                float nodeCreaseIndex1D = meta[2]+float(j);
                vec2 nodeCreaseIndex = vec2(mod(nodeCreaseIndex1D, u_textureDimNodeCreases.x)+0.5, floor(nodeCreaseIndex1D/u_textureDimNodeCreases.x)+0.5);
                vec2 scaledNodeCreaseIndex = nodeCreaseIndex/u_textureDimNodeCreases;
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
196 
                vec4 creaseMeta2 = texture2D(u_creaseMeta2, scaledNodeCreaseIndex);//[creaseIndex, length to node, nodeType (1 or 2), isReaction]
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
197
198
199
200
201
202
203
204 

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

                vec4 thetas = texture2D(u_theta, scaledCreaseIndex);
                vec3 creaseMeta = texture2D(u_creaseMeta, scaledCreaseIndex).xyz;//[k, d, targetTheta]
amandaghassaei's avatar
removed instability    
amandaghassaei committed
205
206
207 
                float targetTheta = creaseMeta[2] * u_creasePercent;
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
208
209
210 
                if (creaseMeta2[3] < 0.0){//crease reaction
                    float nodeNum = creaseMeta2[2];
amandaghassaei's avatar
dynamic model working again    
amandaghassaei committed
211 
                    //node #1
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
212
213
214
215
216
217
218
219
220
221
222 
                    float normalIndex1D = thetas[2];
                    vec2 normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    vec2 scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal1 = texture2D(u_normals, scaledNormalsIndex).xyz;

                    //node #2
                    normalIndex1D = thetas[3];
                    normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal2 = texture2D(u_normals, scaledNormalsIndex).xyz;
amandaghassaei's avatar
removed instability    
amandaghassaei committed
223
224 
                    float momentArm1 = creaseMeta2[1];
                    float momentArm2 = creaseMeta2[2];
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
225
amandaghassaei's avatar
removed instability    
amandaghassaei committed
226 
                    vec3 _force = -0.5*(angForce/momentArm1*normal1 + angForce/momentArm2*normal2);
amandaghassaei's avatar
added in crease reaction    
amandaghassaei committed
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241 
                    force += _force;
                } else {
                    float nodeNum = creaseMeta2[2];
                    float normalIndex1D = thetas[2];//node #1
                    if (nodeNum > 1.1) {
                        normalIndex1D = thetas[3];//node #2
                    }
                    vec2 normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    vec2 scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal = texture2D(u_normals, scaledNormalsIndex).xyz;

                    float momentArm = creaseMeta2[1];

                    vec3 _force = angForce/momentArm*normal;
                    force += _force;
amandaghassaei's avatar
eod    
amandaghassaei committed
242 
                }
amandaghassaei's avatar
panel stiffness    
amandaghassaei committed
243
244
245 

            }
amandaghassaei's avatar
adding limits on theta    
amandaghassaei committed
246 
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
global error    
amandaghassaei committed
247 
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
starting sim    
amandaghassaei committed
248
249
250 
        }
    </script>
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
251 
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
removed instability    
amandaghassaei committed
252 
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
253 
        precision mediump float;
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
254 
        uniform vec2 u_textureDim;
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
255
256
257
258
259 
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_normals;
        uniform sampler2D u_lastTheta;
        uniform sampler2D u_creaseVectors;
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
260
261 
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
index sync    
amandaghassaei committed
262 
        uniform float u_dt;
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
263
264
265
266
267
268
269
270
271 

        void main(){

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

            vec4 lastTheta = texture2D(u_lastTheta, scaledFragCoord);

            if (lastTheta[2]<0.0){
amandaghassaei's avatar
adding limits on theta    
amandaghassaei committed
272 
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
273
274
275
276
277
278
279
280
281
282
283 
                return;
            }

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

            vec3 normal1 = texture2D(u_normals, normal1Index).xyz;
            vec3 normal2 = texture2D(u_normals, normal2Index).xyz;
amandaghassaei's avatar
removed instability    
amandaghassaei committed
284 
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
index sync    
amandaghassaei committed
285
286 
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
287 
            //float theta = acos(dotNormals);
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
288
289
290
291
292
293
294
295
296 

            vec2 creaseVectorIndices = texture2D(u_creaseVectors, scaledFragCoord).xy;
            vec2 creaseNodeIndex = vec2(mod(creaseVectorIndices[0], u_textureDim.x)+0.5, floor(creaseVectorIndices[0]/u_textureDim.x)+0.5);
            vec2 scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node0 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
            creaseNodeIndex = vec2(mod(creaseVectorIndices[1], u_textureDim.x)+0.5, floor(creaseVectorIndices[1]/u_textureDim.x)+0.5);
            scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node1 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
297
298
299
300 
            //https://math.stackexchange.com/questions/47059/how-do-i-calculate-a-dihedral-angle-given-cartesian-coordinates
            vec3 creaseVector = normalize(node1-node0);
            float x = dotNormals;
            float y = dot(cross(normal1, creaseVector), normal2);
amandaghassaei's avatar
update crease vectors    
amandaghassaei committed
301
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
302
303
304
305 
            float theta = atan(y, x);

            //float sign = dot(cross(normal1, normal2), creaseVector);
            //if (sign < 0.0) theta *= -1.0;
amandaghassaei's avatar
index sync    
amandaghassaei committed
306
307 
            float diff = theta-lastTheta[0];
            float projectedTheta = lastTheta[0] + lastTheta[1]*u_dt;
amandaghassaei's avatar
debugging    
amandaghassaei committed
308 
            if (diff < -5.0) {
amandaghassaei's avatar
index sync    
amandaghassaei committed
309
310 
                diff += TWO_PI;
                theta = lastTheta[0] + diff;
amandaghassaei's avatar
debugging    
amandaghassaei committed
311
312 
            } else if (diff > 5.0) {
                diff  -= TWO_PI;
amandaghassaei's avatar
index sync    
amandaghassaei committed
313
314 
                theta = lastTheta[0] + diff;
            }
amandaghassaei's avatar
update crease vector    
amandaghassaei committed
315 
            gl_FragColor = vec4(theta, creaseVectorIndices[1], lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
316
317 
        }
    </script>
amandaghassaei's avatar
debugging    
amandaghassaei committed
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350 

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

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

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

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

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

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

            gl_FragColor = vec4(normalize(cross(b-a, c-a)), 0.0);
        }
    </script>
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
351
amandaghassaei's avatar
starting app  
amandaghassaei committed
352
353
354 
    <script type="text/javascript" src="dependencies/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="dependencies/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>
amandaghassaei's avatar
debugging    
amandaghassaei committed
355 
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
starting app  
amandaghassaei committed
356 
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
centered gep    
amandaghassaei committed
357 
    <script type="text/javascript" src="dependencies/OrthographicTrackballControls.js"></script>
amandaghassaei's avatar
starting svg export    
amandaghassaei committed
358
359 
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
starting app  
amandaghassaei committed
360
361 
    <script type="text/javascript" src="dependencies/underscore-min.js"></script>
    <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>
amandaghassaei's avatar
svg import    
amandaghassaei committed
362 
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
adding in svg    
amandaghassaei committed
363 
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
adding mesh    
amandaghassaei committed
364 
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
starting to add static solver    
amandaghassaei committed
365 
    <script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
amandaghassaei's avatar
starting app  
amandaghassaei committed
366
amandaghassaei's avatar
ambient occlusion    
amandaghassaei committed
367
368
369
370
371
372
373
374 
    <script type="text/javascript" src="dependencies/EffectComposer.js"></script>
    <script type="text/javascript" src="dependencies/MaskPass.js"></script>
    <script type="text/javascript" src="dependencies/ShaderPass.js"></script>
    <script type="text/javascript" src="dependencies/CopyShader.js"></script>
    <script type="text/javascript" src="dependencies/SSAOShader.js"></script>
    <script type="text/javascript" src="dependencies/Detector.js"></script>
    <script type="text/javascript" src="dependencies/RenderPass.js"></script>
amandaghassaei's avatar
small changes    
amandaghassaei committed
375
376 
    <script type="text/javascript" src="js/dynamic/GLBoilerplate.js"></script>
    <script type="text/javascript" src="js/dynamic/GPUMath.js"></script>
amandaghassaei's avatar
starting app  
amandaghassaei committed
377
378
379 
    <script type="text/javascript" src="js/controls.js"></script>
    <script type="text/javascript" src="js/threeView.js"></script>
    <script type="text/javascript" src="js/globals.js"></script>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
380
381 
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
adding in crease stiffness    
amandaghassaei committed
382 
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
383 
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
3D ui    
amandaghassaei committed
384 
    <script type="text/javascript" src="js/3dUI.js"></script>
amandaghassaei's avatar
starting to add static solver    
amandaghassaei committed
385 
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod    
amandaghassaei committed
386 
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
svg import    
amandaghassaei committed
387 
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
save stl    
amandaghassaei committed
388 
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
save fold options    
amandaghassaei committed
389 
    <script type="text/javascript" src="js/saveFOLD.js"></script>
amandaghassaei's avatar
starting svg export    
amandaghassaei committed
390
391 
    <script type="text/javascript" src="js/importer.js"></script>
amandaghassaei's avatar
starting app  
amandaghassaei committed
392
393
394
395 

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav    
amandaghassaei committed
396
397
398
399
400
401
402
403
404
405
406
407
408 
<nav id="globalNav" class="navbar navbar-inverse navbar-embossed" role="navigation">
    <div class="navbar-header">
        <a id="logo" class="navbar-brand" target="_blank" href="http://cba.mit.edu/">
            <img id="inactiveLogo" src="logo.png"/>
            <img id="activeLogo" src="logo-active.png"/>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-01">
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown navDropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">File <b class="caret"></b></a>
                <span class="dropdown-arrow"></span>
                <ul class="dropdown-menu">
amandaghassaei's avatar
demo files dropdown    
amandaghassaei committed
409
410
411 
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Demo Files<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
amandaghassaei's avatar
fixing svg import    
amandaghassaei committed
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426 
                            <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>
amandaghassaei's avatar
more patterns    
amandaghassaei committed
427
428
429
430
431
432
433
434
435
436
437
438
439
440 
                                    <li><a href="#" class="demo" data-url="Tessellations/oval_tessellation_cp.svg">Lang Oval Tessellation</a></li>
                                </ul>
                            </li>
                            <li class="dropdown-submenu">
                                <a tabindex="-1">Curved Creases<span class="pull-right fui-arrow-right"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" class="demo" data-url="Curved/creaseMesh.txt">Curved Crease 1</a></li>
                                </ul>
                            </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/hyperbolic_limit_cp.svg">Lang Hyperbolic Limit</a></li>
amandaghassaei's avatar
patterns    
amandaghassaei committed
441 
                                    <li><a href="#" class="demo" data-url="Tessellations/honeycomb_333_cp.svg">Lang Honeycomb Tessellation</a></li>
amandaghassaei's avatar
more files and doc    
amandaghassaei committed
442
443 
                                    <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>
amandaghassaei's avatar
fixing svg import    
amandaghassaei committed
444
445 
                                </ul>
                            </li>
amandaghassaei's avatar
demo files dropdown    
amandaghassaei committed
446
447 
                        </ul>
                    </li>
amandaghassaei's avatar
nav    
amandaghassaei committed
448 
                    <li class="divider"></li>
amandaghassaei's avatar
errors    
amandaghassaei committed
449 
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD / txt)</a></li>
amandaghassaei's avatar
starting svg export    
amandaghassaei committed
450
451 

                    <li class="divider"></li>
amandaghassaei's avatar
save fold options    
amandaghassaei committed
452 
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
453 
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
svg renederer    
amandaghassaei committed
454
455 
                    <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
456
457 
                </ul>
            </li>
amandaghassaei's avatar
small changes    
amandaghassaei committed
458
459 
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
460 
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
amandaghassaei's avatar
small changes    
amandaghassaei committed
461 
            <li><a id="tips" class="menuHoverControls" target="_blank" href="#">File Import Tips</a></li>
amandaghassaei's avatar
nav    
amandaghassaei committed
462 
        </ul>
amandaghassaei's avatar
small changes    
amandaghassaei committed
463
464
465
466
467
468
469
470
471
472 
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
                <div class="sliderInput floatRight" id="creasePercent">
                    <span class="label-slider">Fold Angle (-1 to 1) : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
                    <input value="" placeholder="" class="form-control" type="text">
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav    
amandaghassaei committed
473
474
475
476
477
478 

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

</nav>
amandaghassaei's avatar
starting app  
amandaghassaei committed
479 
<div  id="threeContainer"></div>
amandaghassaei's avatar
starting sim    
amandaghassaei committed
480 
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
starting app  
amandaghassaei committed
481 
<div id="controls">
amandaghassaei's avatar
waterbomb    
amandaghassaei committed
482 
    <b>Simulation Type:</b><br/>
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
483
484
485 
    <div class="indent">
        <label class="radio">
            <input name="simType" value="dynamic" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
about modals    
amandaghassaei committed
486 
            Compliant Dynamic Simulation <a class="about floatRight" href="#" id="aboutDynamicSim"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
487
488
489 
        </label>
        <label class="radio">
            <input name="simType" value="static" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
about modals    
amandaghassaei committed
490 
            Compliant Static Simulation (not finished yet) <a class="about floatRight" href="#" id="aboutStaticSim"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
491
492 
        </label>
    </div><br/>
amandaghassaei's avatar
toggle user interaction    
amandaghassaei committed
493
494
495
496 
    <label class="checkbox" for="userInteractionEnabled">
        <input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
        Allow User Interaction
    </label><br/>
amandaghassaei's avatar
about modals    
amandaghassaei committed
497 
    <b>Stiffness Settings:</b><a class="floatRight about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/><br/>
amandaghassaei's avatar
ui    
amandaghassaei committed
498
499 
    <div class="sliderInput" id="axialStiffness">
        <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
500 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
501
502 
    </div>
    <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
eod    
amandaghassaei committed
503 
        <span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
504 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
505
506 
    </div>
    <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
eod    
amandaghassaei committed
507 
        <span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
debugging    
amandaghassaei committed
508 
        <input value="" placeholder="" class="form-control" type="text">
amandaghassaei's avatar
ui    
amandaghassaei committed
509 
    </div>
amandaghassaei's avatar
small changes    
amandaghassaei committed
510
511
512
513 
    <div class="sliderInput" id="percentDamping">
        <span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
        <input value="" placeholder="" class="form-control" type="text">
    </div>
amandaghassaei's avatar
global error    
amandaghassaei committed
514
515 
    <br/><br/>
    <b>Error:</b><br/>
amandaghassaei's avatar
about modals    
amandaghassaei committed
516 
    <div class="indent">
amandaghassaei's avatar
small changes    
amandaghassaei committed
517 
        <label>Average node error: <span id="globalError"></span></label>
amandaghassaei's avatar
about modals    
amandaghassaei committed
518 
        <a class="about floatRight" href="#" id="aboutError"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
start stop reset    
amandaghassaei committed
519
520
521 
    </div><br/>
    <b>Animation Settings:</b><br/>
    <span class="floatRight">&Delta; t = <span id="deltaT"></span> seconds</span><br/><br/>
amandaghassaei's avatar
recenter geo after user interaction    
amandaghassaei committed
522 
    <a href="#" id="shouldCenterGeo" class="btn btn-lg btn-default">Re-center geometry</a><br/><br/>
amandaghassaei's avatar
start stop reset    
amandaghassaei committed
523
524
525
526
527
528
529 
    <a href="#" id="reset" class="btn btn-lg btn-default">Reset</a>
    <a href="#" id="start" class="btn btn-lg btn-success">Start Simulation</a>
    <a href="#" id="pause" class="btn btn-lg btn-warning">Pause Simulation</a>
    <br/><br/>
    <div id="stepForwardOptions" class="floatRight">
        Num Steps: &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="form-control" type="text">
        <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
about modals    
amandaghassaei committed
530 
    </div>
amandaghassaei's avatar
start stop reset    
amandaghassaei committed
531 
    <br/><br/>
amandaghassaei's avatar
svg import    
amandaghassaei committed
532 
    <div class="extraSpace"></div>
amandaghassaei's avatar
starting app  
amandaghassaei committed
533 
</div>
amandaghassaei's avatar
small changes    
amandaghassaei committed
534 
<div id="svgViewer"></div>
amandaghassaei's avatar
reorganizing    
amandaghassaei committed
535
536
537
538
539
540
541 

<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
            Mesh Material:
            <div class="indent">
amandaghassaei's avatar
toggle mesh vis    
amandaghassaei committed
542
543
544 
                <label class="checkbox" for="meshVisible">
                    <input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Mesh Visible
amandaghassaei's avatar
reorganizing    
amandaghassaei committed
545 
                </label>
amandaghassaei's avatar
toggle mesh vis    
amandaghassaei committed
546
547
548
549
550
551
552
553
554
555
556
557
558 
                <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
global error    
amandaghassaei committed
559 
                    <label class="radio">
amandaghassaei's avatar
axial strain    
amandaghassaei committed
560 
                        <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
small changes    
amandaghassaei committed
561 
                        Axial Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
global error    
amandaghassaei committed
562 
                    </label>
amandaghassaei's avatar
max strain clip    
amandaghassaei committed
563
564
565
566 
                    <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
reorganizing    
amandaghassaei committed
567
568 
                </div>
            </div><br/>
amandaghassaei's avatar
styling    
amandaghassaei committed
569
570
571
572
573
574 
            Edges:
            <div class="indent">
                <label class="checkbox" for="edgesVisible">
                    <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Edges Visible
                </label>
amandaghassaei's avatar
edge vis    
amandaghassaei committed
575
576
577
578
579
580
581
582
583
584
585 
                <div id="edgeVisOptions" class="indent">
                    <label class="checkbox" for="mtnsVisible">
                        <input id="mtnsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Mountains
                    </label>
                    <label class="checkbox" for="valleysVisible">
                        <input id="valleysVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Valleys
                    </label>
                    <label class="checkbox" for="panelsVisible">
                        <input id="panelsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
eod    
amandaghassaei committed
586 
                        Facet Creases
amandaghassaei's avatar
edge vis    
amandaghassaei committed
587
588
589
590
591
592 
                    </label>
                    <label class="checkbox" for="passiveEdgesVisible">
                        <input id="passiveEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Undriven Edges
                    </label>
                </div>
amandaghassaei's avatar
ui    
amandaghassaei committed
593 
            </div><br/>
amandaghassaei's avatar
patterns    
amandaghassaei committed
594
595
596
597
598
599
600 
            <!--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
reorganizing    
amandaghassaei committed
601
602
603 
        </div>
    </div>
</div>
amandaghassaei's avatar
starting app  
amandaghassaei committed
604
605
606
607
608 
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p><b>Origami Simulator</b><br/><br/>
amandaghassaei's avatar
cleaning up    
amandaghassaei committed
609
610
611 
                    <a target="_blank" href="http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf">Origami Folding; A Structural Engineering Approach</a><br/>
                    <a target="_blank" href="http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf">Rigid Origami Simulator</a><br/>
                    <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a><br/>
amandaghassaei's avatar
eod    
amandaghassaei committed
612
613 

                <br/><br/>
amandaghassaei's avatar
save stl    
amandaghassaei committed
614 
                Built by <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a> as a final project for <a href="http://courses.csail.mit.edu/6.849/spring17/" target="_blank">Geometric Folding Algorithms</a>.
amandaghassaei's avatar
starting app  
amandaghassaei committed
615
616
617
618
619
620 
                Code available on <a href="https://github.com/amandaghassaei/OrigamiSimulator" target="_blank">Github</a>.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
small changes    
amandaghassaei committed
621
622
623
624
625 
<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
more files and doc    
amandaghassaei committed
626
627 
                    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
more documentation    
amandaghassaei committed
628
629
630
631
632
633
634
635
636
637
638
639
640 
                    <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
documentation    
amandaghassaei committed
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655 
                    <ul>
                        <li>The SVG importer supports path objects and line objects (coming).  Please convert polygons to paths before importing.</li>
                        <li>Valley folds are red - <span style="color:red">rgb(255, 0, 0), hex #ff0000</span></li>
                        <li>Mountain folds are blue - <span style="color:blue">rgb(0, 0, 255), hex #0000ff</span></li>
                        <li>Outline edges are black - <span style="color:black">rgb(0, 0, 0), hex #000000</span></li>
                        <img src="assets/examplepattern.jpg"/>
                        <li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
                        To control the triangulations draw lines in yellow - <span style="color:#999900">rgb(255, 255, 0), hex #ffff00</span></li>
                        <img src="assets/patternwithtriangulations.jpg"/>
                        <li>Stroke and line style do not matter.</li>
                        <li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180&deg;
                        (fully folded), 0.5 = 90&deg;, 0 = 0&deg; (flat).</li>
                        <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
                        duplicate lines (coming), and extra vertices falling in the middle of an edge (coming),
                        but it is recommended to remove these errors yourself in order to avoid problems.</li>
amandaghassaei's avatar
small changes    
amandaghassaei committed
656 
                        <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
documentation    
amandaghassaei committed
657
658
659
660
661 
                    </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
small changes    
amandaghassaei committed
662 
                        <li>If you are starting with a pre-made vector file, first ungroup any groups, release all compound paths
amandaghassaei's avatar
documentation    
amandaghassaei committed
663
664
665
666
667
668
669 
                        (<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>
                        <li>Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG Tiny 1.1 settings, but I believe versions 1.0 and 1.1 will work.</li>
                    </ul>
amandaghassaei's avatar
small changes    
amandaghassaei committed
670
671
672
673
674 
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
save stl    
amandaghassaei committed
675
676
677
678
679
680
681 
<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
save fold options    
amandaghassaei committed
682
683
684
685 
                <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
save fold working    
amandaghassaei committed
686 
                <span class="smallTxt">(the STL file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
amandaghassaei's avatar
save fold options    
amandaghassaei committed
687
688
689
690 
                <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
save stl    
amandaghassaei committed
691
692 
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
save fold options    
amandaghassaei committed
693 
                <button id="doSTLsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
save stl    
amandaghassaei committed
694
695
696
697 
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
save fold options    
amandaghassaei committed
698
699
700
701
702
703
704 
<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
save fold options    
amandaghassaei committed
705 
                <b>Export FOLD</b><br/><br/>
amandaghassaei's avatar
save fold working    
amandaghassaei committed
706 
                Filename: &nbsp;&nbsp;<input id="foldFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .fold<br/><br/>
amandaghassaei's avatar
save fold options    
amandaghassaei committed
707
708
709
710 
                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
save fold working    
amandaghassaei committed
711 
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="unitsDisplay"></span> <span class="caret"></span></button>
amandaghassaei's avatar
save fold options    
amandaghassaei committed
712 
                    <ul id="unitsDropdown" role="menu" class="dropdown-menu">
amandaghassaei's avatar
save fold working    
amandaghassaei committed
713
714
715
716
717
718
719
720 
                        <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
save fold options    
amandaghassaei committed
721
722
723 
                    </ul>
                </div>
                <br/><br/>
amandaghassaei's avatar
save fold working    
amandaghassaei committed
724
725
726
727
728
729
730
731
732
733 
                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
save fold options    
amandaghassaei committed
734
735 
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
save fold options    
amandaghassaei committed
736 
                <button id="doFOLDsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
save fold options    
amandaghassaei committed
737
738
739
740 
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
errors    
amandaghassaei committed
741
742
743
744
745
746
747 
<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
save fold options    
amandaghassaei committed
748 
                <b>Import FOLD</b><br/><br/>
amandaghassaei's avatar
recenter geo after user interaction    
amandaghassaei committed
749 
                <label class="bigLabel checkbox" for="foldUseAngles">
amandaghassaei's avatar
small changes    
amandaghassaei committed
750
751
752 
                    <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
753
754 
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
small changes    
amandaghassaei committed
755 
                <button data-dismiss="modal" type="button" class="btn btn-success">OK</button>
amandaghassaei's avatar
errors    
amandaghassaei committed
756
757
758
759
760
761
762
763
764
765
766
767
768
769 
            </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
global error    
amandaghassaei committed
770
771
772
773
774
775
776
777 
<div class="modal fade" id="aboutErrorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Simulation Error</b><br/><br/>
amandaghassaei's avatar
small changes    
amandaghassaei committed
778 
                    "Average node error" gives a sense of how much the distance constraints in the
amandaghassaei's avatar
global error    
amandaghassaei committed
779
780
781 
                    origami pattern are being violated.  The error at each node is evaluated by averaging the
                    percent deviation of all its distance constraints with adjacent nodes.  This error is
                    reported as a percent of the total length of the distance constraint to remove scaling effects.
amandaghassaei's avatar
axial strain    
amandaghassaei committed
782
783
784 
                    <br/><br/>
                    This measurement is equivalent to <a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
                        Cauchy strain or engineering strain</a> of the axial constraints on this system.
amandaghassaei's avatar
small changes    
amandaghassaei committed
785 
                    Increasing the "Axial Stiffness" will tighten these constraints and
amandaghassaei's avatar
global error    
amandaghassaei committed
786
787 
                    lower the error in the simulation.<br/>
                    <br/>
amandaghassaei's avatar
small changes    
amandaghassaei committed
788 
                    To visualize the error of each node graphically, select "Axial Strain Visualization" under "Mesh Material"
amandaghassaei's avatar
global error    
amandaghassaei committed
789
790
791
792
793
794 
                     in the left menu.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
about modals    
amandaghassaei committed
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836 
<div class="modal fade" id="aboutStiffnessModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Stiffness Settings</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutDynamicSimModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Compliant Dynamic Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutStaticSimModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Compliant Static Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
small changes    
amandaghassaei committed
837
838
839
840
841
842
843
844
845
846
847
848
849
850 
<div class="modal fade" id="aboutAxialStrainModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Axial Strain</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
starting app  
amandaghassaei committed
851
852 
</body>
</html>