index.html 107 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
    <script id="copyTexture" type="x-shader/x-fragment">
        precision mediump float;
        uniform sampler2D u_orig;
        uniform vec2 u_textureDim;
        void main(){
            gl_FragColor = texture2D(u_orig, gl_FragCoord.xy/u_textureDim);
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
116 117 118 119 120 121 122 123 124 125 126 127 128

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

amandaghassaei's avatar
amandaghassaei committed
131 132
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
amandaghassaei committed
133
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
amandaghassaei committed
134 135 136
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
137 138 139
            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
140 141 142
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
    <script id="velocityCalcVerletShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform float u_dt;
        uniform sampler2D u_position;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_mass;

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

            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
                gl_FragColor = vec4(0.0);
                return;
            }

            vec3 position = texture2D(u_position, scaledFragCoord).xyz;
amandaghassaei's avatar
amandaghassaei committed
162
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
amandaghassaei's avatar
amandaghassaei committed
163 164 165 166
            gl_FragColor = vec4((position-lastPosition)/u_dt,0.0);
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
167 168 169
    <script id="velocityCalcShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
170
        uniform vec2 u_textureDimEdges;
amandaghassaei's avatar
amandaghassaei committed
171 172 173
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
amandaghassaei's avatar
amandaghassaei committed
174
        uniform vec2 u_textureDimNodeFaces;
amandaghassaei's avatar
eod  
amandaghassaei committed
175
        uniform float u_creasePercent;
amandaghassaei's avatar
amandaghassaei committed
176
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
177
        uniform float u_axialStiffness;
amandaghassaei's avatar
amandaghassaei committed
178 179 180 181 182
        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
183
        uniform sampler2D u_meta;//[beamsIndex, numBeam, nodeCreaseMetaIndex, numCreases]
amandaghassaei's avatar
amandaghassaei committed
184
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
amandaghassaei's avatar
amandaghassaei committed
185
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
amandaghassaei's avatar
amandaghassaei committed
186
        uniform sampler2D u_nodeCreaseMeta;//[creaseIndex, nodeIndex, -, -]
amandaghassaei's avatar
amandaghassaei committed
187 188
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
189
        uniform sampler2D u_creaseGeo;//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
190 191 192
        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
193

amandaghassaei's avatar
amandaghassaei committed
194 195 196 197 198 199
        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
200 201 202 203 204 205
        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
206 207 208 209 210
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDim;

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
211
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
212
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
213 214 215 216 217 218 219 220
                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
221
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
222
            vec2 meta2 = texture2D(u_meta2, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
223

amandaghassaei's avatar
amandaghassaei committed
224 225
            float nodeError = 0.0;

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

amandaghassaei's avatar
amandaghassaei committed
229
                vec4 beamMeta = getFromArray(meta[0]+float(j), u_textureDimEdges, u_beamMeta);
amandaghassaei's avatar
amandaghassaei committed
230 231

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
amandaghassaei committed
232 233 234 235 236 237 238 239
                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
240 241
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
amandaghassaei's avatar
amandaghassaei committed
242
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
amandaghassaei's avatar
amandaghassaei committed
243 244
                vec3 deltaV = neighborLastVelocity-lastVelocity;

amandaghassaei's avatar
amandaghassaei committed
245
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
amandaghassaei committed
246 247
                force += _force;
            }
amandaghassaei's avatar
amandaghassaei committed
248
            nodeError /= meta[1];
amandaghassaei's avatar
amandaghassaei committed
249 250 251 252

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

amandaghassaei's avatar
amandaghassaei committed
255
                float creaseIndex1D = nodeCreaseMeta[0];
amandaghassaei's avatar
amandaghassaei committed
256 257 258 259 260
                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]
261
                vec4 creaseGeo = texture2D(u_creaseGeo, scaledCreaseIndex);//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
262
                if (creaseGeo[0]< 0.0) continue;//crease disabled bc it has collapsed too much
amandaghassaei's avatar
amandaghassaei committed
263

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

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

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

amandaghassaei's avatar
amandaghassaei committed
271
                    //node #1
amandaghassaei's avatar
amandaghassaei committed
272
                    vec3 normal1 = getFromArray(thetas[2], u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
273 274

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

277 278
                    float coef1 = creaseGeo[2];
                    float coef2 = creaseGeo[3];
amandaghassaei's avatar
amandaghassaei committed
279

280 281 282 283
                    if (nodeNum == 3.0){
                        coef1 = 1.0-coef1;
                        coef2 = 1.0-coef2;
                    }
284 285

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

amandaghassaei's avatar
amandaghassaei committed
288
                } else {
289

amandaghassaei's avatar
amandaghassaei committed
290
                    float normalIndex1D = thetas[2];//node #1
291 292
                    float momentArm = creaseGeo[0];//node #1
                    if (nodeNum == 2.0) {
amandaghassaei's avatar
amandaghassaei committed
293
                        normalIndex1D = thetas[3];//node #2
294
                        momentArm = creaseGeo[1];//node #2
amandaghassaei's avatar
amandaghassaei committed
295
                    }
amandaghassaei's avatar
amandaghassaei committed
296 297

                    vec3 normal = getFromArray(normalIndex1D, u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
298 299 300

                    vec3 _force = angForce/momentArm*normal;
                    force += _force;
amandaghassaei's avatar
eod  
amandaghassaei committed
301
                }
amandaghassaei's avatar
amandaghassaei committed
302 303 304 305 306 307
            }

            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
308 309 310 311 312
                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
313 314

                //get node positions
amandaghassaei's avatar
amandaghassaei committed
315 316 317
                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
318 319

                //calc angles
amandaghassaei's avatar
amandaghassaei committed
320 321 322
                vec3 ab = b-a;
                vec3 ac = c-a;
                vec3 bc = c-b;
amandaghassaei's avatar
amandaghassaei committed
323

amandaghassaei's avatar
amandaghassaei committed
324 325 326 327
                float lengthAB = length(ab);
                float lengthAC = length(ac);
                float lengthBC = length(bc);

amandaghassaei's avatar
amandaghassaei committed
328 329 330
                float tol = 0.0000001;
                if (abs(lengthAB) < tol || abs(lengthBC) < tol || abs(lengthAC) < tol) continue;

amandaghassaei's avatar
amandaghassaei committed
331 332 333 334 335 336 337
                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
338 339 340
                vec3 anglesDiff = nominalAngles-angles;

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

amandaghassaei's avatar
amandaghassaei committed
342
                //calc forces
amandaghassaei's avatar
amandaghassaei committed
343
                anglesDiff *= u_axialStiffness/100.0;
amandaghassaei's avatar
amandaghassaei committed
344
                if (faceIndex == 0){//a
amandaghassaei's avatar
amandaghassaei committed
345 346 347 348 349
                    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
350
                } else if (faceIndex == 1){
amandaghassaei's avatar
amandaghassaei committed
351 352 353 354 355
                    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
356
                } else if (faceIndex == 2){
amandaghassaei's avatar
amandaghassaei committed
357 358 359 360 361
                    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
362
                }
amandaghassaei's avatar
amandaghassaei committed
363 364 365

            }

amandaghassaei's avatar
amandaghassaei committed
366
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
amandaghassaei committed
367
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
amandaghassaei committed
368 369 370
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414
    <script id="positionCalcVerletShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimEdges;
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform vec2 u_textureDimNodeCreases;
        uniform vec2 u_textureDimNodeFaces;
        uniform float u_creasePercent;
        uniform float u_dt;
        uniform float u_axialStiffness;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_lastLastPosition;
        uniform sampler2D u_lastVelocity;
        uniform sampler2D u_originalPosition;
        uniform sampler2D u_externalForces;
        uniform sampler2D u_mass;
        uniform sampler2D u_meta;//[beamsIndex, numBeam, nodeCreaseMetaIndex, numCreases]
        uniform sampler2D u_beamMeta;//[k, d, length, otherNodeIndex]
        uniform sampler2D u_creaseMeta;//[k, d, targetTheta]
        uniform sampler2D u_nodeCreaseMeta;//[creaseIndex, nodeIndex, -, -]
        uniform sampler2D u_normals;
        uniform sampler2D u_theta;//[theta, z, normal1Index, normal2Index]
        uniform sampler2D u_creaseGeo;//[h1, h2, coef1, coef2]
        uniform sampler2D u_meta2;//[nodesFaceIndex, numFaces]
        uniform sampler2D u_nodeFaceMeta;//[faceIndex, a, b, c]
        uniform sampler2D u_nominalTriangles;//[angleA, angleB, angleC]

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

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

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

amandaghassaei's avatar
amandaghassaei committed
415 416
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;

amandaghassaei's avatar
amandaghassaei committed
417 418
            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
419
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
amandaghassaei committed
420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            vec3 lastLastPosition = texture2D(u_lastLastPosition, scaledFragCoord).xyz;
            vec3 lastVelocity = texture2D(u_lastVelocity, scaledFragCoord).xyz;
            vec3 originalPosition = texture2D(u_originalPosition, scaledFragCoord).xyz;

            vec4 neighborIndices = texture2D(u_meta, scaledFragCoord);
            vec4 meta = texture2D(u_meta, scaledFragCoord);
            vec2 meta2 = texture2D(u_meta2, scaledFragCoord).xy;

            float nodeError = 0.0;

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

                vec4 beamMeta = getFromArray(meta[0]+float(j), u_textureDimEdges, u_beamMeta);

                float neighborIndex1D = beamMeta[3];
                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;

amandaghassaei's avatar
amandaghassaei committed
445
                vec3 deltaP = neighborLastPosition+neighborOriginalPosition-lastPosition-originalPosition;
amandaghassaei's avatar
amandaghassaei committed
446
                float deltaPLength = length(deltaP);
amandaghassaei's avatar
amandaghassaei committed
447 448 449
                float nominalLength = beamMeta[2];
                deltaP *= (1.0-nominalLength/deltaPLength);
                nodeError += abs(deltaPLength/nominalLength - 1.0);
amandaghassaei's avatar
amandaghassaei committed
450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577
                vec3 deltaV = neighborLastVelocity-lastVelocity;

                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
                force += _force;
            }
            nodeError /= meta[1];

            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;

                vec4 nodeCreaseMeta = getFromArray(meta[2]+float(j), u_textureDimNodeCreases, u_nodeCreaseMeta);

                float creaseIndex1D = nodeCreaseMeta[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]
                vec4 creaseGeo = texture2D(u_creaseGeo, scaledCreaseIndex);//[h1, h2, coef1, coef2]
                if (creaseGeo[0]< 0.0) continue;//crease disabled bc it has collapsed too much

                float targetTheta = creaseMeta[2] * u_creasePercent;
                float angForce = creaseMeta[0]*(targetTheta-thetas[0]);// + creaseMeta[1]*thetas[1];

                float nodeNum = nodeCreaseMeta[1];//1, 2, 3, 4

                if (nodeNum > 2.0){//crease reaction, node is on a crease

                    //node #1
                    vec3 normal1 = getFromArray(thetas[2], u_textureDimFaces, u_normals).xyz;

                    //node #2
                    vec3 normal2 = getFromArray(thetas[3], u_textureDimFaces, u_normals).xyz;

                    float coef1 = creaseGeo[2];
                    float coef2 = creaseGeo[3];

                    if (nodeNum == 3.0){
                        coef1 = 1.0-coef1;
                        coef2 = 1.0-coef2;
                    }

                    vec3 _force = -angForce*(coef1/creaseGeo[0]*normal1 + coef2/creaseGeo[1]*normal2);
                    force += _force;

                } else {

                    float normalIndex1D = thetas[2];//node #1
                    float momentArm = creaseGeo[0];//node #1
                    if (nodeNum == 2.0) {
                        normalIndex1D = thetas[3];//node #2
                        momentArm = creaseGeo[1];//node #2
                    }

                    vec3 normal = getFromArray(normalIndex1D, u_textureDimFaces, u_normals).xyz;

                    vec3 _force = angForce/momentArm*normal;
                    force += _force;
                }
            }

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

                //get node positions
                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]);

                //calc angles
                vec3 ab = b-a;
                vec3 ac = c-a;
                vec3 bc = c-b;

                float lengthAB = length(ab);
                float lengthAC = length(ac);
                float lengthBC = length(bc);

                float tol = 0.0000001;
                if (abs(lengthAB) < tol || abs(lengthBC) < tol || abs(lengthAC) < tol) continue;

                ab /= lengthAB;
                ac /= lengthAC;
                bc /= lengthBC;

                vec3 angles = vec3(acos(dot(ab, ac)),
                    acos(-1.0*dot(ab, bc)),
                    acos(dot(ac, bc)));
                vec3 anglesDiff = nominalAngles-angles;

                vec3 normal = getFromArray(faceMeta[0], u_textureDimFaces, u_normals).xyz;

                //calc forces
                anglesDiff *= u_axialStiffness/100.0;
                if (faceIndex == 0){//a
                    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;
                } else if (faceIndex == 1){
                    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;
                } else if (faceIndex == 2){
                    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);
                }

            }

            vec3 nextPosition = force*u_dt*u_dt/mass[0] + 2.0*lastPosition - lastLastPosition;
            gl_FragColor = vec4(nextPosition,nodeError);//position.a has error info
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
578
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
579
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
580
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
581
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
582 583 584 585 586
        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
587 588
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
589
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
590

amandaghassaei's avatar
amandaghassaei committed
591 592 593 594 595 596
        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
597 598 599 600 601 602 603 604
        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
605
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
amandaghassaei committed
606 607 608
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
609 610
            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
611

amandaghassaei's avatar
amandaghassaei committed
612
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
amandaghassaei committed
613 614
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
amandaghassaei committed
615 616 617 618 619 620 621 622 623

            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
624 625 626 627
            //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
628

amandaghassaei's avatar
amandaghassaei committed
629 630
            float theta = atan(y, x);

amandaghassaei's avatar
amandaghassaei committed
631
            float diff = theta-lastTheta[0];
amandaghassaei's avatar
vive  
amandaghassaei committed
632
            float origDiff = diff;
amandaghassaei's avatar
amandaghassaei committed
633
            if (diff < -5.0) {
amandaghassaei's avatar
amandaghassaei committed
634
                diff += TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
635
            } else if (diff > 5.0) {
amandaghassaei's avatar
amandaghassaei committed
636
                diff -= TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
637
            }
amandaghassaei's avatar
vive  
amandaghassaei committed
638
            theta = lastTheta[0] + diff;
amandaghassaei's avatar
amandaghassaei committed
639
            gl_FragColor = vec4(theta, diff, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
640 641
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
642 643 644 645 646 647 648 649 650

    <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
651 652 653 654 655 656
        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
657 658 659 660 661 662
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimFaces;

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

amandaghassaei's avatar
amandaghassaei committed
663 664 665
            vec3 a = getPosition(indices[0]);
            vec3 b = getPosition(indices[1]);
            vec3 c = getPosition(indices[2]);
amandaghassaei's avatar
amandaghassaei committed
666

amandaghassaei's avatar
amandaghassaei committed
667 668 669
            vec3 normal = normalize(cross(b-a, c-a));

            gl_FragColor = vec4(normal, 0.0);
amandaghassaei's avatar
amandaghassaei committed
670 671
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
672

673 674 675 676 677 678
    <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
679
        uniform sampler2D u_creaseMeta2;
680

amandaghassaei's avatar
amandaghassaei committed
681 682 683 684 685 686
        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;
        }

687 688 689 690
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimCreases;

amandaghassaei's avatar
amandaghassaei committed
691
            vec4 creaseMeta = texture2D(u_creaseMeta2, scaledFragCoord);
692

amandaghassaei's avatar
amandaghassaei committed
693 694 695 696
            vec3 node1 = getPosition(creaseMeta[0]);
            vec3 node2 = getPosition(creaseMeta[1]);
            vec3 node3 = getPosition(creaseMeta[2]);
            vec3 node4 = getPosition(creaseMeta[3]);
697

amandaghassaei's avatar
amandaghassaei committed
698
            float tol = 0.000001;
amandaghassaei's avatar
amandaghassaei committed
699

700 701
            vec3 creaseVector = node4-node3;
            float creaseLength = length(creaseVector);
amandaghassaei's avatar
amandaghassaei committed
702

amandaghassaei's avatar
amandaghassaei committed
703 704 705 706
            if (abs(creaseLength)<tol) {
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
707 708 709 710 711 712 713
            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
714 715 716 717

            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
718 719 720 721
            if (dist1<tol || dist2<tol){
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
722

723
            gl_FragColor = vec4(dist1, dist2, proj1Length/creaseLength, proj2Length/creaseLength);
724 725 726
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
727 728 729
    <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
730
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
731
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
732
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
733 734
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
735 736
    <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
737
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
738
    <script type="text/javascript" src="dependencies/OBJExporter.js"></script>
amandaghassaei's avatar
amandaghassaei committed
739
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
740
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
fold  
amandaghassaei committed
741
    <script type="text/javascript" src="dependencies/fold.js"></script>
amandaghassaei's avatar
amandaghassaei committed
742
    <script type="text/javascript" src="dependencies/CCapture.all.min.js"></script>
amandaghassaei's avatar
fold  
amandaghassaei committed
743
    <!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->
amandaghassaei's avatar
amandaghassaei committed
744

amandaghassaei's avatar
fold  
amandaghassaei committed
745 746 747 748 749 750 751
    <!--<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
752

amandaghassaei's avatar
amandaghassaei committed
753 754 755 756 757
    <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
758 759
    <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
760 761 762
    <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
763 764
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
765
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
766
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
3D ui  
amandaghassaei committed
767
    <script type="text/javascript" src="js/3dUI.js"></script>
amandaghassaei's avatar
amandaghassaei committed
768
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod  
amandaghassaei committed
769
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
770
    <script type="text/javascript" src="js/rigidSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
771
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
772
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
amandaghassaei committed
773
    <script type="text/javascript" src="js/saveFOLD.js"></script>
amandaghassaei's avatar
amandaghassaei committed
774
    <script type="text/javascript" src="js/importer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
775
    <script type="text/javascript" src="js/ViveInterface.js"></script>
amandaghassaei's avatar
amandaghassaei committed
776
    <script type="text/javascript" src="js/videoAnimator.js"></script>
amandaghassaei's avatar
amandaghassaei committed
777 778 779 780

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
amandaghassaei committed
781 782 783 784 785 786 787 788 789 790 791 792 793 794 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 837 838 839 840

<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <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>ORIGAMI SIMULATOR</b><br/>

                    <img style="width: 500px;" src="crane.gif" />

                    This app allows you to simulate how any origami crease pattern will fold.  It may look a little different
                    from what you typically think of as "origami" - rather than folding paper in a set of sequential steps,
                    this simulation attempts to fold every crease simultaneously. It does this by iteratively solving for small displacements in the geometry of an initially flat sheet due to forces
                    exerted by creases.  This 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://www.tsg.ne.jp/TT/cg/TachiFreeformOrigami2010.pdf">Freeform Variations of Origami</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 Percent</b> slider to control the degree of folding of the pattern (100% is fully folded, 0% is unfolded,
                            and -100% is fully folded with the opposite mountain/valley assignments).</li>
                        <li>Drag to rotate the model, scroll to zoom.</li>
                        <li>Import other patterns under the <b>Examples</b> menu.</li>
                        <li>Upload your own crease patterns in SVG or <a href="https://github.com/edemaine/fold" target="_blank">FOLD</a> 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>

                    <img style="width: 100%;" src="strain.jpg" />
                    <br/>
                    <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 path parsing</li>
                        <li><a href="https://github.com/edemaine/fold" target="_blank">FOLD</a> is used as the internal data structure, methods from the
                            <a href="https://github.com/edemaine/fold/blob/master/doc/api.md" target="_blank">FOLD API</a> used for 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>GIF and WebM video export uses <a target="_blank" href="https://github.com/spite/ccapture.js/">CCapture</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>
                    <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
                    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.<br/>
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
nav  
amandaghassaei committed
841 842 843 844 845 846 847 848 849 850 851 852 853
<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
854
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD)</a></li>
amandaghassaei's avatar
amandaghassaei committed
855
                    <!--<li><a id="importSettings" href="#">SVG Import Settings...</a></li>-->
amandaghassaei's avatar
amandaghassaei committed
856
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
857
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
858 859 860
                    <li><a id="createGif" href="#">Record animated GIF...</a></li>
                    <li><a id="createVideo" href="#">Record video...</a></li>
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
861
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
862
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
863
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
amandaghassaei's avatar
amandaghassaei committed
864
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
865 866
                    <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
867 868
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
869 870 871
            <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
872
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
873 874 875
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Origami<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
amandaghassaei's avatar
bases  
amandaghassaei committed
876
                            <li><a href="#" class="demo" data-url="Origami/flappingBird.svg">Flapping Bird</a></li>
amandaghassaei's avatar
info  
amandaghassaei committed
877
                            <li><a href="#" class="demo author" data-author="randlett" data-url="Origami/randlettflappingbird.svg">Randlett Flapping Bird</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
878
                            <li><a href="#" class="demo" data-url="Origami/traditionalCrane.svg">Crane</a></li>
amandaghassaei's avatar
info  
amandaghassaei committed
879
                            <li><a href="#" class="demo author" data-author="hypar" data-url="Origami/hypar.svg">Hypar</a></li>
amandaghassaei's avatar
amandaghassaei committed
880
                            <li><a href="#" class="demo author" data-author="hypar" data-url="Origami/6ptHypar-anti.svg">Hypar (6 point)</a></li>
amandaghassaei's avatar
amandaghassaei committed
881 882 883
                            <li><a href="#" class="demo" data-url="Origami/singlesquaretwist.svg">Square Twist (single)</a></li>
                            <li><a href="#" class="demo author" data-author="squareTwist" data-url="Origami/squaretwistManyAngles.svg">Square Twist (many angles)</a></li>
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
884 885 886
                            <li><a href="#" class="demo author" data-author="langTreemaker" data-url="Origami/langCardinal.svg">Lang Cardinal</a></li>
                            <li><a href="#" class="demo author" data-author="langTreemaker" data-url="Origami/langOrchid.svg">Lang Orchid</a></li>
                            <li><a href="#" class="demo author" data-author="langTreemaker" data-url="Origami/langKnlDragon.svg">Lang KNL Dragon</a></li>
amandaghassaei's avatar
amandaghassaei committed
887 888 889
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
amandaghassaei's avatar
amandaghassaei committed
890
                        <a tabindex="-1">Tessellations<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
amandaghassaei committed
891
                        <ul class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
892
                            <li><a href="#" class="demo author" data-author="miuraOri" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
amandaghassaei's avatar
amandaghassaei committed
893
                            <li><a href="#" class="demo author" data-author="miuraOri" data-url="Tessellations/miura_sharpangle.svg">Miura-Ori (sharp angle)</a></li>
amandaghassaei's avatar
amandaghassaei committed
894
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb</a></li>
amandaghassaei's avatar
amandaghassaei committed
895
                            <li><a href="#" class="demo author" data-author="whirlpool" data-url="Tessellations/whirlpool.svg">Whirlpool</a></li>
amandaghassaei's avatar
amandaghassaei committed
896
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
897 898 899 900 901
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanExtrudedBoxes.svg">Huffman Extruded Boxes</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanWaterbomb.svg">Huffman Waterbombs</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanRectangularWeave.svg">Huffman Rect Weave</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanStarsTriangles.svg">Huffman Stars-Triangles</a></li>
                            <li><a href="#" class="demo author" data-author="huffmanTessellations" data-url="Tessellations/huffmanExdentedBoxes.svg">Huffman Exdented Boxes</a></li>
amandaghassaei's avatar
amandaghassaei committed
902
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
903 904
                            <li><a href="#" class="demo author" data-author="reschTessellations" data-url="Tessellations/reschTriTessellation.svg">Resch Triangle Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="reschTessellations" data-url="Tessellations/reschBarbell.svg">Resch Barbell Tessellation</a></li>
amandaghassaei's avatar
amandaghassaei committed
905
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
906 907 908 909
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langHoneycomb.svg">Lang Honeycomb Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langWedgeDoubleFaced.svg">Lang Wedged Double Faced Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langOvalTessellation.svg">Lang Oval Tessellation</a></li>
                            <li><a href="#" class="demo author" data-author="langTessellations" data-url="Tessellations/langHyperbolicLimit.svg">Lang Hyperbolic Limit</a></li>
amandaghassaei's avatar
amandaghassaei committed
910 911 912 913 914
                        </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
915
                            <li><a href="#" class="demo author" data-author="huffmanCurved" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
amandaghassaei's avatar
amandaghassaei committed
916
                            <li><a href="#" class="demo" data-url="Curved/CircularPleat-sym.svg">Circular Pleat</a></li>
amandaghassaei's avatar
amandaghassaei committed
917 918
                            <li><a href="#" class="demo author" data-author="sam" data-url="Curved/shell14.svg">14 panel shell</a></li>
                            <li><a href="#" class="demo author" data-author="sam" data-url="Curved/shell6.svg">6 panel shell</a></li>
amandaghassaei's avatar
amandaghassaei committed
919 920
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
921 922 923 924 925 926 927
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Kirigami<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo author" data-author="miyamotoHappy" data-url="Kirigami/miyamotoTower.svg">Miyamoto Tower</a></li>
                            <li><a href="#" class="demo" data-url="Kirigami/honeycombKiri.svg">Kirigami Honeycomb</a></li>
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
928 929 930
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Popups<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
931 932
                            <li><a href="#" class="demo author" data-author="ullagami" data-url="Popup/geometricPopup.svg">Geometric Pattern</a></li>
                            <li><a href="#" class="demo author" data-author="popupology" data-url="Popup/castlePopup.svg">Castle</a></li>
amandaghassaei's avatar
house  
amandaghassaei committed
933
                            <li><a href="#" class="demo author" data-author="popupology" data-url="Popup/housePopup.svg">House</a></li>
amandaghassaei's avatar
amandaghassaei committed
934
                            <!--<li><a href="#" class="demo" data-url="Popup/popupSimple.svg">Simple Square</a></li>-->
amandaghassaei's avatar
amandaghassaei committed
935 936
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
937 938 939
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Maze Foldings<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
940 941 942
                            <li><a href="#" class="demo author" data-author="squareMaze" data-url="Squaremaze/helloworld.svg">Square Maze "hello world"</a></li>
                            <li><a href="#" class="demo author" data-author="squareMaze" data-url="Squaremaze/origamisimulator.svg">Square Maze "origami simulator"</a></li>
                            <li><a href="#" class="demo author" data-author="squareMaze" data-url="Squaremaze/cross.svg">Square Maze "+"</a></li>
amandaghassaei's avatar
amandaghassaei committed
943 944 945 946
                            <!--<li class="divider"></li>-->
                        </ul>
                    </li>
                    <li class="divider"></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
947
                    <li class="dropdown-submenu">
amandaghassaei's avatar
eod  
amandaghassaei committed
948
                        <a tabindex="-1">Origami Bases<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
bases  
amandaghassaei committed
949 950
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Bases/birdBase.svg">Bird Base</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
951
                            <li><a href="#" class="demo author" data-author="moveSlowly" data-url="Bases/frogBase.svg">Frog Base</a></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
952
                            <li><a href="#" class="demo" data-url="Bases/boatBase.svg">Boat Base</a></li>
amandaghassaei's avatar
amandaghassaei committed
953 954
                            <li><a href="#" class="demo" data-url="Bases/pinwheelBase.svg">Pinwheel Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/openSinkBase.svg">Open Sink Base</a></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
955 956 957 958
                            <li><a href="#" class="demo" data-url="Bases/squareBase.svg">Square Base</a></li>
                            <li><a href="#" class="demo" data-url="Bases/waterbombBase.svg">Waterbomb Base</a></li>
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
959 960 961 962
                    <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
963
                            <li><a href="#" class="demo" data-url="SimpleFolds/russianTriangle.svg">Russian Triangle</a></li>
amandaghassaei's avatar
case  
amandaghassaei committed
964 965
                            <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
966 967
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
968 969 970 971
                    <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
info  
amandaghassaei committed
972
                            <li><a href="#" class="demo author" data-author="skinnyTriangles" data-url="Tessellations/langRattanWeave.svg">Lang Rattan Weave</a></li>
amandaghassaei's avatar
amandaghassaei committed
973 974 975 976
                        </ul>
                    </li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
977 978 979 980 981
            <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
982
                    <li><a id="changeBackground" href="#">Change Background Color...</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
983 984 985 986 987 988 989 990 991 992 993
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Rotate Model<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="stopRotation" href="#">Stop Rotation</a></li>
                            <li><a id="rotateX" href="#">Rotate Around X</a></li>
                            <li><a id="rotateY" href="#">Rotate Around Y</a></li>
                            <li><a id="rotateZ" href="#">Rotate Around Z</a></li>
                            <li><a id="changeRotationSpeed" href="#">Change Rotation Speed...</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
amandaghassaei's avatar
eod  
amandaghassaei committed
994
                        <a tabindex="-1">View Direction<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
eod  
amandaghassaei committed
995 996 997 998 999 1000 1001
                        <ul class="dropdown-menu">
                            <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>
amandaghassaei's avatar
eod  
amandaghassaei committed
1002
                            <li><a href="#" id="cameraIso">View Iso</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
1003 1004
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
1005 1006
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
1007 1008
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
1009 1010
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
1011 1012 1013
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
amandaghassaei's avatar
amandaghassaei committed
1014
                <div class="sliderInput floatRight" id="creasePercentNav">
amandaghassaei's avatar
eod  
amandaghassaei committed
1015
                    <span class="label-slider">Fold Percent : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
1016
                    <!--<input value="" placeholder="" class="form-control" type="text">-->
amandaghassaei's avatar
amandaghassaei committed
1017 1018 1019 1020
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav  
amandaghassaei committed
1021 1022 1023 1024 1025 1026

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
1027
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
1028
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
1029
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
1030
    <div class="sliderInput floatRight" id="creasePercent">
amandaghassaei's avatar
eod  
amandaghassaei committed
1031
        <span class="label-slider">Fold Percent : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
1032
        <input value="" placeholder="" class="float form-control" type="text">&nbsp;&nbsp;%
amandaghassaei's avatar
amandaghassaei committed
1033
    </div><br/><br/>
amandaghassaei's avatar
styling  
amandaghassaei committed
1034 1035 1036 1037
    <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
1038 1039
        <div id="stepForwardOptions" class="floatRight">
            <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
amandaghassaei committed
1040
            <label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="int form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
1041
            <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1042
        </div>
amandaghassaei's avatar
amandaghassaei committed
1043
    </div>
amandaghassaei's avatar
amandaghassaei committed
1044 1045
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
amandaghassaei's avatar
amandaghassaei committed
1046
        <!--<label class="radio">-->
amandaghassaei's avatar
amandaghassaei committed
1047 1048
            <!--<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
1049
        <!--</label>-->
amandaghassaei's avatar
amandaghassaei committed
1050 1051 1052 1053 1054 1055 1056 1057 1058
        <!--&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
1059
    <div class="inlineBlock fullWidth">
amandaghassaei's avatar
ui  
amandaghassaei committed
1060 1061
        <a class="about" href="#" id="aboutUserInteraction"><span class="fui-question-circle"></span></a>
        <label style="margin-right:40px" class="checkbox floatRight" for="userInteractionEnabled">
amandaghassaei's avatar
styling  
amandaghassaei committed
1062 1063 1064 1065 1066 1067 1068 1069 1070 1071
            <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">
amandaghassaei's avatar
amandaghassaei committed
1072
            <div class="indent">Numerical Integration:
amandaghassaei's avatar
amandaghassaei committed
1073
            <div class="doubleIndent">
amandaghassaei's avatar
amandaghassaei committed
1074
                <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
1075
                    <input name="integrationType" value="euler" 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
1076
                    Euler (first order)
amandaghassaei's avatar
amandaghassaei committed
1077 1078
                </label>
                <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
1079
                    <input name="integrationType" value="verlet" 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
1080
                    Verlet (second order)
amandaghassaei's avatar
amandaghassaei committed
1081 1082
                </label>
            </div></div><br/>