index.html 91.3 KB
Newer Older
amandaghassaei's avatar
amandaghassaei committed
1 2 3 4 5 6 7 8 9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Origami Simulator</title>

    <link href="dependencies/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="dependencies/jquery-ui.min.css"/>
amandaghassaei's avatar
nav  
amandaghassaei committed
10 11 12
    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>

amandaghassaei's avatar
amandaghassaei committed
13 14 15 16 17 18 19 20 21 22 23
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

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

    </script>

amandaghassaei's avatar
amandaghassaei committed
24

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

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

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

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

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

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

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

amandaghassaei's avatar
amandaghassaei committed
129 130 131
            vec4 velocityData = texture2D(u_velocity, scaledFragCoord);
            vec3 position = velocityData.xyz*u_dt + lastPosition;
            gl_FragColor = vec4(position, velocityData.a);//velocity.a has error info
amandaghassaei's avatar
amandaghassaei committed
132 133 134 135 136 137
        }
    </script>

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

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

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

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

            vec2 mass = texture2D(u_mass, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
179
            if (mass[1] == 1.0){//fixed
amandaghassaei's avatar
amandaghassaei committed
180
                gl_FragColor = vec4(0.0);
amandaghassaei's avatar
amandaghassaei committed
181 182 183 184 185 186 187 188
                return;
            }
            vec3 force = texture2D(u_externalForces, scaledFragCoord).xyz;
            vec3 lastPosition = texture2D(u_lastPosition, scaledFragCoord).xyz;
            vec3 lastVelocity = texture2D(u_lastVelocity, scaledFragCoord).xyz;
            vec3 originalPosition = texture2D(u_originalPosition, scaledFragCoord).xyz;

            vec4 neighborIndices = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
189
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
190
            vec2 meta2 = texture2D(u_meta2, scaledFragCoord).xy;
amandaghassaei's avatar
amandaghassaei committed
191

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

amandaghassaei's avatar
ui  
amandaghassaei committed
194
            for (int j=0;j<100;j++){//for all beams (up to 100, had to put a const int in here)
amandaghassaei's avatar
amandaghassaei committed
195 196
                if (j >= int(meta[1])) break;

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

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
amandaghassaei committed
200 201 202 203 204 205 206 207
                vec2 neighborIndex = vec2(mod(neighborIndex1D, u_textureDim.x)+0.5, floor(neighborIndex1D/u_textureDim.x)+0.5);
                vec2 scaledNeighborIndex = neighborIndex/u_textureDim;
                vec3 neighborLastPosition = texture2D(u_lastPosition, scaledNeighborIndex).xyz;
                vec3 neighborLastVelocity = texture2D(u_lastVelocity, scaledNeighborIndex).xyz;
                vec3 neighborOriginalPosition = texture2D(u_originalPosition, scaledNeighborIndex).xyz;

                vec3 nominalDist = neighborOriginalPosition-originalPosition;
                vec3 deltaP = neighborLastPosition-lastPosition+nominalDist;
amandaghassaei's avatar
amandaghassaei committed
208 209
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
amandaghassaei's avatar
amandaghassaei committed
210
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
amandaghassaei's avatar
amandaghassaei committed
211 212
                vec3 deltaV = neighborLastVelocity-lastVelocity;

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

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

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

amandaghassaei's avatar
amandaghassaei committed
223
                float creaseIndex1D = nodeCreaseMeta[0];
amandaghassaei's avatar
amandaghassaei committed
224 225 226 227 228
                vec2 creaseIndex = vec2(mod(creaseIndex1D, u_textureDimCreases.x)+0.5, floor(creaseIndex1D/u_textureDimCreases.x)+0.5);
                vec2 scaledCreaseIndex = creaseIndex/u_textureDimCreases;

                vec4 thetas = texture2D(u_theta, scaledCreaseIndex);
                vec3 creaseMeta = texture2D(u_creaseMeta, scaledCreaseIndex).xyz;//[k, d, targetTheta]
229
                vec4 creaseGeo = texture2D(u_creaseGeo, scaledCreaseIndex);//[h1, h2, coef1, coef2]
amandaghassaei's avatar
amandaghassaei committed
230
                if (creaseGeo[0]< 0.0) continue;//crease disabled bc it has collapsed too much
amandaghassaei's avatar
amandaghassaei committed
231

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

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

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

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

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

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

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

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

amandaghassaei's avatar
amandaghassaei committed
256
                } else {
257

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            }

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

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

amandaghassaei's avatar
amandaghassaei committed
352 353 354 355 356 357
        vec4 getFromArray(float index1D, vec2 dimensions, sampler2D tex){
            vec2 index = vec2(mod(index1D, dimensions.x)+0.5, floor(index1D/dimensions.x)+0.5);
            vec2 scaledIndex = index/dimensions;
            return texture2D(tex, scaledIndex);
        }

amandaghassaei's avatar
amandaghassaei committed
358 359 360 361 362 363 364 365
        void main(){

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

            vec4 lastTheta = texture2D(u_lastTheta, scaledFragCoord);

            if (lastTheta[2]<0.0){
amandaghassaei's avatar
amandaghassaei committed
366
                gl_FragColor = vec4(lastTheta[0], 0.0, -1.0, -1.0);
amandaghassaei's avatar
amandaghassaei committed
367 368 369
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
370 371
            vec3 normal1 = getFromArray(lastTheta[2], u_textureDimFaces, u_normals).xyz;
            vec3 normal2 = getFromArray(lastTheta[3], u_textureDimFaces, u_normals).xyz;
amandaghassaei's avatar
amandaghassaei committed
372

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

            vec2 creaseVectorIndices = texture2D(u_creaseVectors, scaledFragCoord).xy;
            vec2 creaseNodeIndex = vec2(mod(creaseVectorIndices[0], u_textureDim.x)+0.5, floor(creaseVectorIndices[0]/u_textureDim.x)+0.5);
            vec2 scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node0 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;
            creaseNodeIndex = vec2(mod(creaseVectorIndices[1], u_textureDim.x)+0.5, floor(creaseVectorIndices[1]/u_textureDim.x)+0.5);
            scaledNodeIndex = creaseNodeIndex/u_textureDim;
            vec3 node1 = texture2D(u_lastPosition, scaledNodeIndex).xyz + texture2D(u_originalPosition, scaledNodeIndex).xyz;

amandaghassaei's avatar
amandaghassaei committed
385 386 387 388
            //https://math.stackexchange.com/questions/47059/how-do-i-calculate-a-dihedral-angle-given-cartesian-coordinates
            vec3 creaseVector = normalize(node1-node0);
            float x = dotNormals;
            float y = dot(cross(normal1, creaseVector), normal2);
amandaghassaei's avatar
amandaghassaei committed
389

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

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

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

amandaghassaei's avatar
amandaghassaei committed
412 413 414 415 416 417
        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

amandaghassaei's avatar
amandaghassaei committed
418 419 420 421 422 423
        void main(){
            vec2 fragCoord = gl_FragCoord.xy;
            vec2 scaledFragCoord = fragCoord/u_textureDimFaces;

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

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

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

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

434 435 436 437 438 439
    <script id="updateCreaseGeo" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec2 u_textureDim;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
440
        uniform sampler2D u_creaseMeta2;
441

amandaghassaei's avatar
amandaghassaei committed
442 443 444 445 446 447
        vec3 getPosition(float index1D){
            vec2 index = vec2(mod(index1D, u_textureDim.x)+0.5, floor(index1D/u_textureDim.x)+0.5);
            vec2 scaledIndex = index/u_textureDim;
            return texture2D(u_lastPosition, scaledIndex).xyz + texture2D(u_originalPosition, scaledIndex).xyz;
        }

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

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

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

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

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

amandaghassaei's avatar
amandaghassaei committed
464 465 466 467
            if (abs(creaseLength)<tol) {
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
468 469 470 471 472 473 474
            creaseVector /= creaseLength;

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

            float proj1Length = dot(creaseVector, vector1);
            float proj2Length = dot(creaseVector, vector2);
amandaghassaei's avatar
amandaghassaei committed
475 476 477 478

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

amandaghassaei's avatar
amandaghassaei committed
479 480 481 482
            if (dist1<tol || dist2<tol){
                gl_FragColor = vec4(-1);//disable crease
                return;
            }
483

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

amandaghassaei's avatar
amandaghassaei committed
488 489 490
    <script type="text/javascript" src="dependencies/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="dependencies/jquery-ui.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>
amandaghassaei's avatar
amandaghassaei committed
491
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
492
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
493
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
494 495
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
496 497
    <script type="text/javascript" src="dependencies/underscore-min.js"></script>
    <script type="text/javascript" src="dependencies/FileSaver.min.js"></script>
amandaghassaei's avatar
amandaghassaei committed
498
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
499
    <script type="text/javascript" src="dependencies/OBJExporter.js"></script>
amandaghassaei's avatar
amandaghassaei committed
500
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
501
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
fold  
amandaghassaei committed
502
    <script type="text/javascript" src="dependencies/fold.js"></script>
amandaghassaei's avatar
amandaghassaei committed
503
    <script type="text/javascript" src="dependencies/CCapture.all.min.js"></script>
amandaghassaei's avatar
fold  
amandaghassaei committed
504
    <!--<script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>-->
amandaghassaei's avatar
amandaghassaei committed
505

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

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

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav  
amandaghassaei committed
542 543 544 545 546 547 548 549 550 551 552 553 554
<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
555
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD)</a></li>
amandaghassaei's avatar
amandaghassaei committed
556
                    <!--<li><a id="importSettings" href="#">SVG Import Settings...</a></li>-->
amandaghassaei's avatar
amandaghassaei committed
557
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
558
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
559 560 561
                    <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
562
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
563
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
564
                    <li><a id="exportOBJ" href="#">Save Simulation as OBJ...</a></li>
amandaghassaei's avatar
amandaghassaei committed
565
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
566 567
                    <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
568 569
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
570 571 572
            <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
573
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
574 575 576
                    <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
577
                            <li><a href="#" class="demo" data-url="Origami/flappingBird.svg">Flapping Bird</a></li>
amandaghassaei's avatar
info  
amandaghassaei committed
578
                            <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
579
                            <li><a href="#" class="demo" data-url="Origami/traditionalCrane.svg">Crane</a></li>
amandaghassaei's avatar
info  
amandaghassaei committed
580
                            <li><a href="#" class="demo author" data-author="hypar" data-url="Origami/hypar.svg">Hypar</a></li>
amandaghassaei's avatar
amandaghassaei committed
581 582 583
                            <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
584 585 586
                            <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
587 588 589
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
amandaghassaei's avatar
amandaghassaei committed
590
                        <a tabindex="-1">Tessellations<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
amandaghassaei committed
591
                        <ul class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
592
                            <li><a href="#" class="demo author" data-author="miuraOri" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
amandaghassaei's avatar
amandaghassaei committed
593 594
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb</a></li>
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
595 596 597 598 599
                            <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
600
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
601 602
                            <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
603
                            <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
604 605 606 607
                            <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
608 609 610 611 612
                        </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
613
                            <li><a href="#" class="demo author" data-author="huffmanCurved" data-url="Curved/huffmanTower.svg">Huffman Tower</a></li>
amandaghassaei's avatar
amandaghassaei committed
614 615
                            <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
616 617
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
618 619 620
                    <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
621 622
                            <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
amandaghassaei committed
623
                            <!--<li><a href="#" class="demo" data-url="Popup/popupSimple.svg">Simple Square</a></li>-->
amandaghassaei's avatar
amandaghassaei committed
624 625
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
626 627 628
                    <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
629 630 631
                            <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
632 633 634 635
                            <!--<li class="divider"></li>-->
                        </ul>
                    </li>
                    <li class="divider"></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
636
                    <li class="dropdown-submenu">
amandaghassaei's avatar
eod  
amandaghassaei committed
637
                        <a tabindex="-1">Origami Bases<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
bases  
amandaghassaei committed
638 639
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Bases/birdBase.svg">Bird Base</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
640
                            <li><a href="#" class="demo author" data-author="moveSlowly" data-url="Bases/frogBase.svg">Frog Base</a></li>
amandaghassaei's avatar
bases  
amandaghassaei committed
641
                            <li><a href="#" class="demo" data-url="Bases/boatBase.svg">Boat Base</a></li>
amandaghassaei's avatar
amandaghassaei committed
642 643
                            <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
644 645 646 647
                            <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
648 649 650 651
                    <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
652
                            <li><a href="#" class="demo" data-url="SimpleFolds/russianTriangle.svg">Russian Triangle</a></li>
amandaghassaei's avatar
case  
amandaghassaei committed
653 654
                            <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
655 656
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
657 658 659 660
                    <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
661
                            <li><a href="#" class="demo author" data-author="skinnyTriangles" data-url="Tessellations/langRattanWeave.svg">Lang Rattan Weave</a></li>
amandaghassaei's avatar
amandaghassaei committed
662 663 664 665
                        </ul>
                    </li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
666 667 668 669 670
            <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
671
                    <li><a id="changeBackground" href="#">Change Background Color...</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
672 673 674 675 676 677 678 679 680 681 682
                    <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
683
                        <a tabindex="-1">View Direction<span class="pull-right fui-arrow-right"></span></a>
amandaghassaei's avatar
eod  
amandaghassaei committed
684 685 686 687 688 689 690
                        <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
691
                            <li><a href="#" id="cameraIso">View Iso</a></li>
amandaghassaei's avatar
eod  
amandaghassaei committed
692 693
                        </ul>
                    </li>
amandaghassaei's avatar
amandaghassaei committed
694 695
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
696 697
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
698 699
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
700 701 702
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
amandaghassaei's avatar
amandaghassaei committed
703
                <div class="sliderInput floatRight" id="creasePercentNav">
amandaghassaei's avatar
eod  
amandaghassaei committed
704
                    <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
705
                    <!--<input value="" placeholder="" class="form-control" type="text">-->
amandaghassaei's avatar
amandaghassaei committed
706 707 708 709
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav  
amandaghassaei committed
710 711 712 713 714 715

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

</nav>

amandaghassaei's avatar
amandaghassaei committed
716
<div  id="threeContainer"></div>
amandaghassaei's avatar
amandaghassaei committed
717
<canvas id="gpuMathCanvas"></canvas>
amandaghassaei's avatar
amandaghassaei committed
718
<div id="controls">
amandaghassaei's avatar
amandaghassaei committed
719
    <div class="sliderInput floatRight" id="creasePercent">
amandaghassaei's avatar
eod  
amandaghassaei committed
720
        <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
721
        <input value="" placeholder="" class="float form-control" type="text">&nbsp;&nbsp;%
amandaghassaei's avatar
amandaghassaei committed
722
    </div><br/><br/>
amandaghassaei's avatar
styling  
amandaghassaei committed
723 724 725 726
    <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
727 728
        <div id="stepForwardOptions" class="floatRight">
            <a href="#" id="stepForward" class="btn btn-lg btn-default">Step Forward</a>
amandaghassaei's avatar
amandaghassaei committed
729
            <label>Num Steps:</label> &nbsp;&nbsp;<input id="numSteps" value="100" placeholder="" class="int form-control" type="text">
amandaghassaei's avatar
amandaghassaei committed
730
            <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
731
        </div>
amandaghassaei's avatar
amandaghassaei committed
732
    </div>
amandaghassaei's avatar
amandaghassaei committed
733 734
    <!--<b>Simulation Type:</b><br/>-->
    <!--<div class="indent">-->
amandaghassaei's avatar
amandaghassaei committed
735
        <!--<label class="radio">-->
amandaghassaei's avatar
amandaghassaei committed
736 737
            <!--<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
738
        <!--</label>-->
amandaghassaei's avatar
amandaghassaei committed
739 740 741 742 743 744 745 746 747
        <!--&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
748 749 750 751 752 753 754 755 756 757 758 759 760
    <div class="inlineBlock fullWidth">
        <label class="checkbox floatRight" for="userInteractionEnabled">
            <input id="userInteractionEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
            Allow User Interaction
        </label>
    </div><br/>
    <div class="fullWidth alignRight">
        <a href="#" id="shouldCenterGeo" class="displayBlock btn btn-lg btn-default">Re-center geometry</a>
    </div><br/>
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="simulationSettings"><span class="fui-triangle-down"></span><b>Simulation Settings:</b></a><a class="about" href="#" id="aboutStiffness"><span class="fui-question-circle"></span></a><br/>
        <div id="simulationSettings" class="hide">
            <div class="sliderInput paddingBottom" id="axialStiffness">
amandaghassaei's avatar
amandaghassaei committed
761
                <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
762
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
763
            </div>
amandaghassaei's avatar
amandaghassaei committed
764
            <!--<div class="sliderInput paddingBottom" id="triStiffness">-->
amandaghassaei's avatar
amandaghassaei committed
765
                <!--<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
766
                <!--<input value="" placeholder="" class="float form-control" type="text">-->
amandaghassaei's avatar
amandaghassaei committed
767
            <!--</div>-->
amandaghassaei's avatar
styling  
amandaghassaei committed
768
            <div class="sliderInput" id="creaseStiffness">
amandaghassaei's avatar
amandaghassaei committed
769
                <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
770
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
771 772
            </div>
            <div class="sliderInput" id="panelStiffness">
amandaghassaei's avatar
amandaghassaei committed
773
                <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
774
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
775 776 777
            </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
778
                <input value="" placeholder="" class="float form-control" type="text">
amandaghassaei's avatar
styling  
amandaghassaei committed
779 780
            </div>
        </div><br/>
amandaghassaei's avatar
amandaghassaei committed
781
    </div>
amandaghassaei's avatar
styling  
amandaghassaei committed
782 783 784 785 786 787 788
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="animationsSettings"><span class="fui-triangle-down"></span><b>Animation Settings:</b></a><a class="about" href="#" id="aboutAnimation"><span class="fui-question-circle"></span></a><br/>
        <div id="animationsSettings" class="fullWidth hide">
            <div class="doubleIndent">
                <span class="smallTxt">&Delta;t = <span id="deltaT"></span> seconds</span><br/>
                <span class="smallTxt">Num simulation steps per render: &nbsp;&nbsp;<input id="numStepsPerRender" value="" placeholder="" class="int form-control" type="text"></span>
            </div>
amandaghassaei's avatar
amandaghassaei committed
789
        </div>
amandaghassaei's avatar
styling  
amandaghassaei committed
790
    </div><br/>
amandaghassaei's avatar
amandaghassaei committed
791

amandaghassaei's avatar
styling  
amandaghassaei committed
792 793 794
    <div class="fullWidth">
        <a href="#" class="seeMore closed" data-id="errorInfo"><span class="fui-triangle-down"></span><b>Error:</b></a><a class="about" href="#" id="aboutError"><span class="fui-question-circle"></span></a><br/>
        <div id="errorInfo" class="hide smallTxt doubleIndent">
amandaghassaei's avatar
amandaghassaei committed
795
            <label>Average vertex error: <span id="globalError"></span></label>
amandaghassaei's avatar
styling  
amandaghassaei committed
796
        </div>
amandaghassaei's avatar
amandaghassaei committed
797 798
    </div><br/>

amandaghassaei's avatar
amandaghassaei committed
799
    <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
800
</div>
amandaghassaei's avatar
amandaghassaei committed
801
<div id="svgViewer"></div>
amandaghassaei's avatar
amandaghassaei committed
802 803 804 805
<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
amandaghassaei's avatar
styling  
amandaghassaei committed
806 807 808 809
            <div>
                <a href="#" class="seeMore open" data-id="materialSettings"><span class="fui-triangle-down"></span>Mesh Material:</a>
            </div>
            <div id="materialSettings" class="inlineBlock indent">
amandaghassaei's avatar
amandaghassaei committed
810 811 812
                <label class="checkbox" for="meshVisible">
                    <input id="meshVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Mesh Visible
amandaghassaei's avatar
amandaghassaei committed
813
                </label>
amandaghassaei's avatar
amandaghassaei committed
814 815 816 817 818 819 820 821 822
                <div id="meshMaterialOptions">
                    <label class="radio">
                        <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Colored Material
                    </label>
                    <div id="coloredMaterialOptions" class="indent">
                        <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                        <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                    </div>
amandaghassaei's avatar
amandaghassaei committed
823
                    <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
824
                        <input name="colorMode" value="axialStrain" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
amandaghassaei committed
825
                        Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
826
                    </label>
amandaghassaei's avatar
amandaghassaei committed
827 828 829 830
                    <div id="axialStrainMaterialOptions" class="indent">
                        <label>Max Strain: &nbsp;&nbsp;</label>
                        <input id="strainClip" value="" placeholder="" class="float form-control" type="text"> %<br/>
                    </div>
amandaghassaei's avatar
amandaghassaei committed
831 832 833 834
                    <label class="radio">
                        <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Face Normals Material
                    </label>
amandaghassaei's avatar
amandaghassaei committed
835
                </div>
amandaghassaei's avatar
styling  
amandaghassaei committed
836
                <br/>
amandaghassaei's avatar
amandaghassaei committed
837
            </div><br/>
amandaghassaei's avatar
styling  
amandaghassaei committed
838 839 840
            <div>
                <a href="#" class="seeMore closed" data-id="edgeVisiblity"><span class="fui-triangle-down"></span>Edge Visiblity</a>:
            </div>
amandaghassaei's avatar
amandaghassaei committed
841
            <div id="edgeVisiblity" class="hide indent">
amandaghassaei's avatar
styling  
amandaghassaei committed
842 843 844 845
                <label class="checkbox" for="edgesVisible">
                    <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Edges Visible
                </label>
amandaghassaei's avatar
amandaghassaei committed
846 847 848
                <div id="edgeVisOptions" class="indent">
                    <label class="checkbox" for="mtnsVisible">
                        <input id="mtnsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
amandaghassaei committed
849
                        Mountains <span id="numMtns"></span>
amandaghassaei's avatar
amandaghassaei committed
850 851 852
                    </label>
                    <label class="checkbox" for="valleysVisible">
                        <input id="valleysVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
amandaghassaei committed
853
                        Valleys <span id="numValleys"></span>
amandaghassaei's avatar
amandaghassaei committed
854 855 856
                    </label>
                    <label class="checkbox" for="panelsVisible">
                        <input id="panelsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
amandaghassaei committed
857
                        Facet Creases <span id="numFacets"></span>
amandaghassaei's avatar
amandaghassaei committed
858 859 860
                    </label>
                    <label class="checkbox" for="passiveEdgesVisible">
                        <input id="passiveEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
amandaghassaei committed
861
                        Undriven Edges <span id="numPassive"></span>
amandaghassaei's avatar
amandaghassaei committed
862
                    </label>
amandaghassaei's avatar
amandaghassaei committed
863 864 865 866 867
                    <label class="checkbox" for="boundaryEdgesVisible">
                        <input id="boundaryEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Boundary Edges <span id="numBoundary"></span>
                    </label>

amandaghassaei's avatar
amandaghassaei committed
868
                </div>
amandaghassaei's avatar
styling  
amandaghassaei committed
869 870 871
                <br/>
            </div>
            <br/>
amandaghassaei's avatar
amandaghassaei committed
872 873 874 875 876 877 878
            <!--Rendering:-->
            <!--<div class="indent">-->
                <!--<label class="checkbox" for="ambientOcclusion">-->
                    <!--<input id="ambientOcclusion" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>-->
                    <!--Ambient Occlusion-->
                <!--</label>-->
            <!--</div>-->
amandaghassaei's avatar
styling  
amandaghassaei committed
879 880 881
            <div>
                <a href="#" class="seeMore closed" data-id="virtualReality"><span class="fui-triangle-down"></span>Virtual Reality:</a>
            </div>
amandaghassaei's avatar
amandaghassaei committed
882 883
            <div id="virtualReality" class="hide indent smallTxt">
                Status: &nbsp;<span id="VRstatus"></span><a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
884 885
                <div id="VRoptions"><br/>
                    <a href="#" id="enterVR" class="displayBlock btn btn-lg btn-inverse"></a>
amandaghassaei's avatar
styling  
amandaghassaei committed
886 887
                </div><br/><br/>
            </div><br/>
amandaghassaei's avatar
amandaghassaei committed
888
            <div class="extraSpace"></div>
amandaghassaei's avatar
amandaghassaei committed
889 890 891
        </div>
    </div>
</div>
amandaghassaei's avatar
fold  
amandaghassaei committed
892

amandaghassaei's avatar
amandaghassaei committed
893 894 895 896
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
amandaghassaei's avatar
amandaghassaei committed
897 898 899
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
amandaghassaei's avatar
fold  
amandaghassaei committed
900
                <p>
amandaghassaei's avatar
amandaghassaei committed
901 902
                <b>ORIGAMI SIMULATOR</b><br/><br/>

amandaghassaei's avatar
eod  
amandaghassaei committed
903 904 905
                    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
amandaghassaei's avatar
amandaghassaei committed
906
                    exerted by creases.  This solver extends work from the following sources: <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
907
                    &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/>
amandaghassaei's avatar
amandaghassaei committed
908
                    &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/>
amandaghassaei's avatar
fold  
amandaghassaei committed
909 910 911 912 913
                    <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>
amandaghassaei's avatar
eod  
amandaghassaei committed
914 915
                        <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>
amandaghassaei's avatar
eod  
amandaghassaei committed
916
                        <li>Drag to rotate the model, scroll to zoom.</li>
amandaghassaei's avatar
fold  
amandaghassaei committed
917 918
                        <li>Import other patterns under the <b>Examples</b> menu.</li>
                        <li>Upload your own crease patterns in SVG or FOLD formats, following <a href="#" class="goToImportInstructions">these instructions</a>.</li>
amandaghassaei's avatar
doc  
amandaghassaei committed
919
                        <li>Export FOLD files or 3D models ( STL or OBJ ) of the folded state of your design ( <b>File > Save Simulation as...</b> ).</li>
amandaghassaei's avatar
fold  
amandaghassaei committed
920 921 922 923
                        <li>Visualize the internal strain of the origami as it folds using the <b>Strain Visualization</b> in the left menu.</li>
                        <li>If you are working from a computer connected to a Vive, follow <a href="#" id="goToViveInstructions">these instructions</a>
                            to use this app in an interactive virtual reality mode.</li>
                    </ul>
amandaghassaei's avatar
docs  
amandaghassaei committed
924
                    <br/>
amandaghassaei's avatar
fold  
amandaghassaei committed
925 926 927 928

                    <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>
amandaghassaei's avatar
amandaghassaei committed
929
                        <li><a href="https://www.npmjs.com/package/path-data-polyfill" target="_blank">path-data-polyfill</a> helps with SVG path parsing</li>
amandaghassaei's avatar
fix  
amandaghassaei committed
930 931
                        <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>
amandaghassaei's avatar
fold  
amandaghassaei committed
932
                        <li>Arbitrary polygonal faces of imported geometry are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a></li>