index.html 104 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 162 163 164 165 166
    <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;
            vec3 lastPosition = texture2D(u_position, scaledFragCoord).xyz;
            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 415 416 417 418 419 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 445 446 447 448 449 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
    <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;

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
            if (mass[1] == 1.0){//fixed
                gl_FragColor = vec4(0.0);
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            vec3 lastPosition = texture2D(u_lastPosition, 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;

                vec3 nominalDist = neighborOriginalPosition-originalPosition;
                vec3 deltaP = neighborLastPosition-lastPosition+nominalDist;
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
                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
577
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
578
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
579
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
580
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
581 582 583 584 585
        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
586 587
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
588
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
589

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
amandaghassaei committed
780 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

<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
840 841 842 843 844 845 846 847 848 849 850 851 852
<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
853
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD)</a></li>
amandaghassaei's avatar
amandaghassaei committed
854
                    <!--<li><a id="importSettings" href="#">SVG Import Settings...</a></li>-->
amandaghassaei's avatar
amandaghassaei committed
855
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
856
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
857 858 859
                    <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
860
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
861
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
862
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
amandaghassaei's avatar
amandaghassaei committed
863
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
864 865
                    <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
866 867
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
868 869 870
            <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
871
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
872 873 874
                    <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
875
                            <li><a href="#" class="demo" data-url="Origami/flappingBird.svg">Flapping Bird</a></li>
amandaghassaei's avatar
info  
amandaghassaei committed
876
                            <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
877
                            <li><a href="#" class="demo" data-url="Origami/traditionalCrane.svg">Crane</a></li>
amandaghassaei's avatar
info  
amandaghassaei committed
878
                            <li><a href="#" class="demo author" data-author="hypar" data-url="Origami/hypar.svg">Hypar</a></li>
amandaghassaei's avatar
amandaghassaei committed
879 880 881
                            <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
882 883 884
                            <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
885 886 887
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
amandaghassaei's avatar
amandaghassaei committed
888
                        <a tabindex="-1">Tessellations<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
amandaghassaei committed
889
                        <ul class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
890
                            <li><a href="#" class="demo author" data-author="miuraOri" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
amandaghassaei's avatar
amandaghassaei committed
891 892
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb</a></li>
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
893 894 895 896 897
                            <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
898
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
899 900
                            <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
901
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
902 903 904 905
                            <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
906 907 908 909 910
                        </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
911
                            <li><a href="#" class="demo author" data-author="huffmanCurved" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
amandaghassaei's avatar
amandaghassaei committed
912 913
                            <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
914 915
                        </ul>
                    </li>
amandaghassaei's avatar
house  
amandaghassaei committed
916 917 918 919 920 921
                    <!--<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" data-url="Kirigami/honeycombKiri.svg">Kirigami Honeycomb</a></li>-->
                        <!--</ul>-->
                    <!--</li>-->
amandaghassaei's avatar
amandaghassaei committed
922 923 924
                    <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
925 926
                            <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
927
                            <li><a href="#" class="demo author" data-author="popupology" data-url="Popup/housePopup.svg">House</a></li>
amandaghassaei's avatar
amandaghassaei committed
928
                            <!--<li><a href="#" class="demo" data-url="Popup/popupSimple.svg">Simple Square</a></li>-->
amandaghassaei's avatar
amandaghassaei committed
929 930
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
931 932 933
                    <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
934 935 936
                            <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
937 938 939 940
                            <!--<li class="divider"></li>-->
                        </ul>
                    </li>
                    <li class="divider"></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
941
                    <li class="dropdown-submenu">
amandaghassaei's avatar
eod  
amandaghassaei committed
942
                        <a tabindex="-1">Origami Bases<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
bases  
amandaghassaei committed
943 944
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Bases/birdBase.svg">Bird Base</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
945
                            <li><a href="#" class="demo author" data-author="moveSlowly" data-url="Bases/frogBase.svg">Frog Base</a></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
946
                            <li><a href="#" class="demo" data-url="Bases/boatBase.svg">Boat Base</a></li>
amandaghassaei's avatar
amandaghassaei committed
947 948
                            <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
949 950 951 952
                            <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
953 954 955 956
                    <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
957
                            <li><a href="#" class="demo" data-url="SimpleFolds/russianTriangle.svg">Russian Triangle</a></li>
amandaghassaei's avatar
case  
amandaghassaei committed
958 959
                            <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
960 961
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
962 963 964 965
                    <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
966
                            <li><a href="#" class="demo author" data-author="skinnyTriangles" data-url="Tessellations/langRattanWeave.svg">Lang Rattan Weave</a></li>
amandaghassaei's avatar
amandaghassaei committed
967 968 969 970
                        </ul>
                    </li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
971 972 973 974 975
            <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
976
                    <li><a id="changeBackground" href="#">Change Background Color...</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
977 978 979 980 981 982 983 984 985 986 987
                    <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
988
                        <a tabindex="-1">View Direction<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
eod  
amandaghassaei committed
989 990 991 992 993 994 995
                        <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
996
                            <li><a href="#" id="cameraIso">View Iso</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
997 998
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
999 1000
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
1001 1002
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
1003 1004
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
1005 1006 1007
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
amandaghassaei's avatar
amandaghassaei committed
1008
                <div class="sliderInput floatRight" id="creasePercentNav">
amandaghassaei's avatar
eod  
amandaghassaei committed
1009
                    <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
1010
                    <!--<input value="" placeholder="" class="form-control" type="text">-->
amandaghassaei's avatar
amandaghassaei committed
1011 1012 1013 1014
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav  
amandaghassaei committed
1015 1016 1017 1018 1019 1020

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
1021
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
1022
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
1023
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
1024
    <div class="sliderInput floatRight" id="creasePercent">
amandaghassaei's avatar
eod  
amandaghassaei committed
1025
        <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
1026
        <input value="" placeholder="" class="float form-control" type="text">&nbsp;&nbsp;%
amandaghassaei's avatar
amandaghassaei committed
1027
    </div><br/><br/>
amandaghassaei's avatar
styling  
amandaghassaei committed
1028 1029 1030 1031
    <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
1032 1033
        <div id="stepForwardOptions" class="floatRight">
            <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
amandaghassaei committed
1034
            <label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="int form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
1035
            <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
1036
        </div>
amandaghassaei's avatar
amandaghassaei committed
1037
    </div>
amandaghassaei's avatar
amandaghassaei committed
1038 1039
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
amandaghassaei's avatar
amandaghassaei committed
1040
        <!--<label class="radio">-->
amandaghassaei's avatar
amandaghassaei committed
1041 1042
            <!--<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
1043
        <!--</label>-->
amandaghassaei's avatar
amandaghassaei committed
1044 1045 1046 1047 1048 1049 1050 1051 1052
        <!--&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
1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064
    <div class="inlineBlock fullWidth">
        <label class="checkbox floatRight" for="userInteractionEnabled">
            <input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
            Allow User Interaction
        </label>
    </div><br/>
    <div class="fullWidth alignRight">
        <a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
    </div><br/>
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/>
        <div id="simulationSettings" class="hide">
amandaghassaei's avatar
amandaghassaei committed
1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075
            <div class="indent">Integration:
            <div class="indent">
                <label class="radio">
                    <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>
                    Verlet (second order)
                </label>
                <label class="radio">
                    <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>
                    Euler (first order)
                </label>
            </div></div><br/>
amandaghassaei's avatar
styling  
amandaghassaei committed
1076
            <div class="sliderInput paddingBottom" id="axialStiffness">
amandaghassaei's avatar
amandaghassaei committed
1077
                <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
1078
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
1079
            </div>
amandaghassaei's avatar
amandaghassaei committed
1080
            <!--<div class="sliderInput paddingBottom" id="triStiffness">-->
amandaghassaei's avatar
amandaghassaei committed
1081
                <!--<span class="label-slider">Triangle Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>-->
amandaghassaei's avatar
amandaghassaei committed
1082
                <!--<input value="" placeholder="" class="float form-control" type="text">-->
amandaghassaei's avatar
amandaghassaei committed
1083
            <!--</div>-->
amandaghassaei's avatar
styling  
amandaghassaei committed
1084
            <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
amandaghassaei committed
1085
                <span class="label-slider">Fold Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
1086
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
1087 1088
            </div>
            <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
amandaghassaei committed
1089
                <span class="label-slider">Facet Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
1090
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
1091 1092 1093
            </div>
            <div class="sliderInput" id="percentDamping">
                <span class="label-slider">Damping (0-1): </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
amandaghassaei's avatar
amandaghassaei committed
1094
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
1095 1096
            </div>
        </div><br/>
amandaghassaei's avatar
amandaghassaei committed
1097
    </div>
amandaghassaei's avatar
styling  
amandaghassaei committed
1098 1099 1100 1101 1102 1103 1104
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
        <div id="animationsSettings" class="fullWidth hide">
            <div class="doubleIndent">
                <span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>