index.html 51 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 80
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        void main() {
           gl_Position = vec4(a_position, 0, 1);
        }
    </script>

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

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

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

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

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

amandaghassaei's avatar
amandaghassaei committed
111 112
            float isFixed = texture2D(u_mass, scaledFragCoord).y;
            if (isFixed == 1.0){
amandaghassaei's avatar
amandaghassaei committed
113
                gl_FragColor = vec4(lastPosition, 0.0);
amandaghassaei's avatar
amandaghassaei committed
114 115 116
                return;
            }

amandaghassaei's avatar
amandaghassaei committed
117 118 119
            vec4 velocityData = texture2D(u_velocity, scaledFragCoord);
            vec3 position = velocityData.xyz*u_dt + lastPosition;
            gl_FragColor = vec4(position, velocityData.a);//velocity.a has error info
amandaghassaei's avatar
amandaghassaei committed
120 121 122 123 124 125
        }
    </script>

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

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

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

            vec4 neighborIndices = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
159
            vec4 meta = texture2D(u_meta, scaledFragCoord);
amandaghassaei's avatar
amandaghassaei committed
160

amandaghassaei's avatar
amandaghassaei committed
161 162
            float nodeError = 0.0;

amandaghassaei's avatar
ui  
amandaghassaei committed
163
            for (int j=0;j<100;j++){//for all beams (up to 100, had to put a const int in here)
amandaghassaei's avatar
amandaghassaei committed
164 165 166 167 168 169 170 171
                if (j >= int(meta[1])) break;

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

                float neighborIndex1D = beamMeta[3];
amandaghassaei's avatar
amandaghassaei committed
172 173 174 175 176 177 178 179
                vec2 neighborIndex = vec2(mod(neighborIndex1D, u_textureDim.x)+0.5, floor(neighborIndex1D/u_textureDim.x)+0.5);
                vec2 scaledNeighborIndex = neighborIndex/u_textureDim;
                vec3 neighborLastPosition = texture2D(u_lastPosition, scaledNeighborIndex).xyz;
                vec3 neighborLastVelocity = texture2D(u_lastVelocity, scaledNeighborIndex).xyz;
                vec3 neighborOriginalPosition = texture2D(u_originalPosition, scaledNeighborIndex).xyz;

                vec3 nominalDist = neighborOriginalPosition-originalPosition;
                vec3 deltaP = neighborLastPosition-lastPosition+nominalDist;
amandaghassaei's avatar
amandaghassaei committed
180 181
                float deltaPLength = length(deltaP);
                deltaP -= deltaP*(beamMeta[2]/deltaPLength);
amandaghassaei's avatar
amandaghassaei committed
182
                nodeError += abs(deltaPLength/length(nominalDist) - 1.0);
amandaghassaei's avatar
amandaghassaei committed
183 184
                vec3 deltaV = neighborLastVelocity-lastVelocity;

amandaghassaei's avatar
amandaghassaei committed
185
                vec3 _force = deltaP*beamMeta[0] + deltaV*beamMeta[1];
amandaghassaei's avatar
amandaghassaei committed
186 187
                force += _force;
            }
amandaghassaei's avatar
amandaghassaei committed
188
            nodeError /= meta[1];
amandaghassaei's avatar
amandaghassaei committed
189 190 191 192 193 194 195

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

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

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

                vec4 thetas = texture2D(u_theta, scaledCreaseIndex);
                vec3 creaseMeta = texture2D(u_creaseMeta, scaledCreaseIndex).xyz;//[k, d, targetTheta]

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

amandaghassaei's avatar
amandaghassaei committed
208 209 210
                if (creaseMeta2[3] < 0.0){//crease reaction
                    float nodeNum = creaseMeta2[2];

amandaghassaei's avatar
amandaghassaei committed
211
                    //node #1
amandaghassaei's avatar
amandaghassaei committed
212 213 214 215 216 217 218 219 220 221 222
                    float normalIndex1D = thetas[2];
                    vec2 normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    vec2 scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal1 = texture2D(u_normals, scaledNormalsIndex).xyz;

                    //node #2
                    normalIndex1D = thetas[3];
                    normalsIndex = vec2(mod(normalIndex1D, u_textureDimFaces.x)+0.5, floor(normalIndex1D/u_textureDimFaces.x)+0.5);
                    scaledNormalsIndex = normalsIndex/u_textureDimFaces;
                    vec3 normal2 = texture2D(u_normals, scaledNormalsIndex).xyz;

amandaghassaei's avatar
amandaghassaei committed
223 224
                    float momentArm1 = creaseMeta2[1];
                    float momentArm2 = creaseMeta2[2];
amandaghassaei's avatar
amandaghassaei committed
225

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

                    float momentArm = creaseMeta2[1];

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

            }

amandaghassaei's avatar
amandaghassaei committed
246
            vec3 velocity = force*u_dt/mass[0] + lastVelocity;
amandaghassaei's avatar
amandaghassaei committed
247
            gl_FragColor = vec4(velocity,nodeError);
amandaghassaei's avatar
amandaghassaei committed
248 249 250
        }
    </script>

amandaghassaei's avatar
amandaghassaei committed
251
    <script id="thetaCalcShader" type="x-shader/x-fragment">
amandaghassaei's avatar
amandaghassaei committed
252
        #define TWO_PI 6.283185307179586476925286766559
amandaghassaei's avatar
amandaghassaei committed
253
        precision mediump float;
amandaghassaei's avatar
amandaghassaei committed
254
        uniform vec2 u_textureDim;
amandaghassaei's avatar
amandaghassaei committed
255 256 257 258 259
        uniform vec2 u_textureDimFaces;
        uniform vec2 u_textureDimCreases;
        uniform sampler2D u_normals;
        uniform sampler2D u_lastTheta;
        uniform sampler2D u_creaseVectors;
amandaghassaei's avatar
amandaghassaei committed
260 261
        uniform sampler2D u_lastPosition;
        uniform sampler2D u_originalPosition;
amandaghassaei's avatar
amandaghassaei committed
262
        uniform float u_dt;
amandaghassaei's avatar
amandaghassaei committed
263 264 265 266 267 268 269 270 271

        void main(){

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

            vec4 lastTheta = texture2D(u_lastTheta, scaledFragCoord);

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

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

            vec3 normal1 = texture2D(u_normals, normal1Index).xyz;
            vec3 normal2 = texture2D(u_normals, normal2Index).xyz;

amandaghassaei's avatar
amandaghassaei committed
284
            float dotNormals = dot(normal1, normal2);//normals are already normalized, no need to divide by length
amandaghassaei's avatar
amandaghassaei committed
285 286
            if (dotNormals < -1.0) dotNormals = -1.0;
            else if (dotNormals > 1.0) dotNormals = 1.0;
amandaghassaei's avatar
amandaghassaei committed
287 288 289 290 291 292 293 294 295

            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
296 297 298 299
            //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
300

amandaghassaei's avatar
amandaghassaei committed
301 302
            float theta = atan(y, x);

amandaghassaei's avatar
amandaghassaei committed
303
            float diff = theta-lastTheta[0];
amandaghassaei's avatar
vive  
amandaghassaei committed
304
            float origDiff = diff;
amandaghassaei's avatar
amandaghassaei committed
305
            if (diff < -5.0) {
amandaghassaei's avatar
amandaghassaei committed
306
                diff += TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
307 308
            } else if (diff > 5.0) {
                diff  -= TWO_PI;
amandaghassaei's avatar
amandaghassaei committed
309
            }
amandaghassaei's avatar
vive  
amandaghassaei committed
310 311 312
            //if (abs(diff)>0.01) diff = 0.0;
            theta = lastTheta[0] + diff;
            gl_FragColor = vec4(theta, origDiff, lastTheta[2], lastTheta[3]);//[theta, w, normal1Index, normal2Index]
amandaghassaei's avatar
amandaghassaei committed
313 314
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344

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

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

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

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

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

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

amandaghassaei's avatar
amandaghassaei committed
345 346 347
            vec3 normal = normalize(cross(b-a, c-a));

            gl_FragColor = vec4(normal, 0.0);
amandaghassaei's avatar
amandaghassaei committed
348 349
        }
    </script>
amandaghassaei's avatar
amandaghassaei committed
350

amandaghassaei's avatar
amandaghassaei committed
351 352 353
    <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
354
    <script type="text/javascript" src="dependencies/three.js"></script>
amandaghassaei's avatar
amandaghassaei committed
355
    <script type="text/javascript" src="dependencies/binary_stl_writer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
356
    <script type="text/javascript" src="dependencies/TrackballControls.js"></script>
amandaghassaei's avatar
amandaghassaei committed
357 358
    <script type="text/javascript" src="dependencies/Projector.js"></script>
    <script type="text/javascript" src="dependencies/SVGRenderer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
359 360
    <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
361
    <script type="text/javascript" src="dependencies/SVGLoader.js"></script>
amandaghassaei's avatar
amandaghassaei committed
362
    <script type="text/javascript" src="dependencies/path-data-polyfill.js"></script>
amandaghassaei's avatar
amandaghassaei committed
363
    <script type="text/javascript" src="dependencies/earcut.js"></script>
amandaghassaei's avatar
amandaghassaei committed
364
    <script type="text/javascript" src="dependencies/numeric-1.2.6.js"></script>
amandaghassaei's avatar
amandaghassaei committed
365

amandaghassaei's avatar
amandaghassaei committed
366 367 368 369 370 371 372 373
    <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
374 375 376 377 378
    <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
379 380
    <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
381 382 383
    <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
384 385
    <script type="text/javascript" src="js/node.js"></script>
    <script type="text/javascript" src="js/beam.js"></script>
amandaghassaei's avatar
amandaghassaei committed
386
    <script type="text/javascript" src="js/crease.js"></script>
amandaghassaei's avatar
amandaghassaei committed
387
    <script type="text/javascript" src="js/model.js"></script>
amandaghassaei's avatar
3D ui  
amandaghassaei committed
388
    <script type="text/javascript" src="js/3dUI.js"></script>
amandaghassaei's avatar
amandaghassaei committed
389
    <script type="text/javascript" src="js/staticSolver.js"></script>
amandaghassaei's avatar
eod  
amandaghassaei committed
390
    <script type="text/javascript" src="js/dynamic/dynamicSolver.js"></script>
amandaghassaei's avatar
amandaghassaei committed
391
    <script type="text/javascript" src="js/pattern.js"></script>
amandaghassaei's avatar
amandaghassaei committed
392
    <script type="text/javascript" src="js/saveSTL.js"></script>
amandaghassaei's avatar
amandaghassaei committed
393
    <script type="text/javascript" src="js/saveFOLD.js"></script>
amandaghassaei's avatar
amandaghassaei committed
394
    <script type="text/javascript" src="js/importer.js"></script>
amandaghassaei's avatar
amandaghassaei committed
395
    <script type="text/javascript" src="js/ViveInterface.js"></script>
amandaghassaei's avatar
amandaghassaei committed
396 397 398 399

    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
amandaghassaei's avatar
nav  
amandaghassaei committed
400 401 402 403 404 405 406 407 408 409 410 411 412
<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
errors  
amandaghassaei committed
413
                    <li><a class="loadFile" href="#">Import... (SVG / FOLD / txt)</a></li>
amandaghassaei's avatar
amandaghassaei committed
414
                    <li><a id="tips" href="#">File Import Tips</a></li>
amandaghassaei's avatar
amandaghassaei committed
415
                    <li class="divider"></li>
amandaghassaei's avatar
amandaghassaei committed
416
                    <li><a id="exportFOLD" href="#">Save Simulation as FOLD...</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
417
                    <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
amandaghassaei's avatar
amandaghassaei committed
418 419
                    <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
420 421
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
422 423 424
            <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
425
                <ul class="dropdown-menu" style="min-width: 200px;">
amandaghassaei's avatar
amandaghassaei committed
426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Origami<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Origami/randlettflappingbird.svg">Randlett Flapping Bird</a></li>
                            <li><a href="#" class="demo" data-url="Origami/singlesquaretwist.svg">Square Twist (single)</a></li>
                            <li><a href="#" class="demo" data-url="Origami/squaretwistManyAngles.svg">Square Twist (many angles)</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Tesselations<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Tessellations/miura-ori.svg">Miura-Ori</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/waterbomb.svg">Waterbomb (six-crease base)</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/waterbombTwist.svg">Waterbomb (eight-crease base)</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/reschtritessellation.svg">Resch Triangle Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/reschbarbell.svg">Resch Barbell Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/oval_tessellation_cp.svg">Lang Oval Tessellation</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu">
                        <a tabindex="-1">Curved Creases<span class="pull-right fui-arrow-right"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="demo" data-url="Curved/creaseMesh.txt">Curved Crease 1</a></li>
amandaghassaei's avatar
amandaghassaei committed
449
                            <li><a href="#" class="demo" data-url="Curved/curvedcrease2.svg">Curved Crease 2</a></li>
amandaghassaei's avatar
amandaghassaei committed
450 451 452 453 454 455 456 457 458 459 460 461 462 463 464
                        </ul>
                    </li>
                    <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">
                            <li><a href="#" class="demo" data-url="Origami/hypar.svg">Hypar</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/hyperbolic_limit_cp.svg">Lang Hyperbolic Limit</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/honeycomb_333_cp.svg">Lang Honeycomb Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/wedged_double_faced.svg">Lang Wedged Double Faced Tessellation</a></li>
                            <li><a href="#" class="demo" data-url="Tessellations/rattanweaveLang.svg">Lang Rattan Weave</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
amandaghassaei's avatar
amandaghassaei committed
465 466
            <li><a id="navPattern" href="#">Pattern</a></li>
            <li><a id="navSimulation" href="#">Simulation</a></li>
amandaghassaei's avatar
nav  
amandaghassaei committed
467 468
            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
        </ul>
amandaghassaei's avatar
amandaghassaei committed
469 470 471 472 473 474 475 476 477 478
        <!--<form class="navbar-form navbar-right" action="#" role="search">-->
            <!--<div class="form-group">-->
              <!--<div class="input-group">-->
                <div class="sliderInput floatRight" id="creasePercent">
                    <span class="label-slider">Fold Angle (-1 to 1) : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
                    <input value="" placeholder="" class="form-control" type="text">
                </div>
              <!--</div>-->
            <!--</div>-->
        <!--</form>-->
amandaghassaei's avatar
nav  
amandaghassaei committed
479 480 481 482 483 484

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

</nav>

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

<div id="controlsLeft" class="flipped">
    <div>
        <b>View Settings:</b><br/><br/>
        <div class="indent">
            Mesh Material:
            <div class="indent">
amandaghassaei's avatar
amandaghassaei committed
552 553 554
                <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
555
                </label>
amandaghassaei's avatar
amandaghassaei committed
556 557 558 559 560 561 562 563 564 565 566 567 568
                <div id="meshMaterialOptions">
                    <label class="radio">
                        <input name="colorMode" value="color" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Colored Material
                    </label>
                    <div id="coloredMaterialOptions" class="indent">
                        <label>Color 1 (rgb hex): &nbsp;&nbsp;</label><input id="color1" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                        <label>Color 2 (rgb hex): &nbsp;&nbsp;</label><input id="color2" value="" placeholder="" class="hexVal form-control" type="text"><br/>
                    </div>
                    <label class="radio">
                        <input name="colorMode" value="normal" data-toggle="radio" class="custom-radio" type="radio"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Face Normals Material
                    </label>
amandaghassaei's avatar
amandaghassaei committed
569
                    <label class="radio">
amandaghassaei's avatar
amandaghassaei committed
570
                        <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
571
                        Axial Strain Visualization<a class="about floatRight" href="#" id="aboutAxialStrain"><span class="fui-question-circle"></span></a>
amandaghassaei's avatar
amandaghassaei committed
572
                    </label>
amandaghassaei's avatar
amandaghassaei committed
573 574 575 576
                    <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
577 578
                </div>
            </div><br/>
amandaghassaei's avatar
styling  
amandaghassaei committed
579 580 581 582 583 584
            Edges:
            <div class="indent">
                <label class="checkbox" for="edgesVisible">
                    <input id="edgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Edges Visible
                </label>
amandaghassaei's avatar
amandaghassaei committed
585 586 587 588 589 590 591 592 593 594 595
                <div id="edgeVisOptions" class="indent">
                    <label class="checkbox" for="mtnsVisible">
                        <input id="mtnsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Mountains
                    </label>
                    <label class="checkbox" for="valleysVisible">
                        <input id="valleysVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Valleys
                    </label>
                    <label class="checkbox" for="panelsVisible">
                        <input id="panelsVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
amandaghassaei's avatar
eod  
amandaghassaei committed
596
                        Facet Creases
amandaghassaei's avatar
amandaghassaei committed
597 598 599 600 601 602
                    </label>
                    <label class="checkbox" for="passiveEdgesVisible">
                        <input id="passiveEdgesVisible" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Undriven Edges
                    </label>
                </div>
amandaghassaei's avatar
ui  
amandaghassaei committed
603
            </div><br/>
amandaghassaei's avatar
amandaghassaei committed
604 605 606 607 608 609 610
            <!--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
amandaghassaei committed
611 612
            VR:
            <div class="indent smallTxt">
amandaghassaei's avatar
amandaghassaei committed
613
                Status: &nbsp;<span id="VRstatus"></span>
amandaghassaei's avatar
amandaghassaei committed
614 615 616 617 618 619 620 621
                <a class="about floatRight" href="#" id="aboutVR"><span class="fui-question-circle"></span></a><br/>
                <div id="VRoptions">
                    <label class="checkbox" for="vrEnabled">
                        <input id="vrEnabled" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                        Connect
                    </label>
                </div>
            </div>
amandaghassaei's avatar
amandaghassaei committed
622 623 624
        </div>
    </div>
</div>
amandaghassaei's avatar
amandaghassaei committed
625 626 627 628 629
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p><b>Origami Simulator</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
630 631
                    <a target="_blank" href="http://www2.eng.cam.ac.uk/~sdg/preprint/5OSME.pdf">Origami Folding; A Structural Engineering Approach</a><br/>
                    <a target="_blank" href="http://origami.c.u-tokyo.ac.jp/~tachi/cg/SimulationOfRigidOrigami_tachi_4OSME.pdf">Rigid Origami Simulator</a><br/>
amandaghassaei's avatar
docs  
amandaghassaei committed
632 633 634 635 636 637 638 639 640
                    <br/>
                    This app uses <a target="_blank" href="https://threejs.org/">three.js</a> to visualize and interact with the 3D geometry of the folding.<br/>
                    Triangulation of quad faces in origami patterns is achieved by adding the shortest edge across the quad (this helps to preserve symmetry, which
                    makes the simulation work better). Arbitrary polygonal faces are triangulated using the <a target="_blank" href="https://github.com/mapbox/earcut">Earcut Library</a>.<br/>
                    Additionally, I used <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> to build the GUI.<br/>
                    <br/>
                    Built by <a href="http://www.amandaghassaei.com/" target="_blank">Amanda Ghassaei</a> as a final project for <a href="http://courses.csail.mit.edu/6.849/spring17/" target="_blank">Geometric Folding Algorithms</a>.
                    Code available on <a href="https://github.com/amandaghassaei/OrigamiSimulator" target="_blank">Github</a>.  If you have interesting crease patterns that would
amandaghassaei's avatar
eod  
amandaghassaei committed
641
                    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!
amandaghassaei's avatar
amandaghassaei committed
642 643 644 645 646
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
647 648 649 650 651
<div class="modal fade" id="tipsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <p><b>File Import Tips</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
652 653
                    Bad design files will throw errors and create models that explode or cannot be solved, here are some tips for
                    importing FOLD or svg files that work.<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
654 655 656 657 658 659 660 661 662 663 664 665 666
                    <b>Importing FOLD:</b><br/><br/>
                    The FOLD file format is specified in <a target="_blank" href="https://github.com/edemaine/fold">these docs</a>.
                    This tool imports FOLD v1.0 files with <b>all</b> of the following fields populated:
                    <ul>
                        <li>vertices_coords</li>
                        <li>edges_vertices</li>
                        <li>edges_assignment</li>
                        <li>faces_vertices</li>
                    </ul>
                    If you are unsure whether your FOLD file is valid, you can inspect it using the
                    <a target="_blank" href="https://edemaine.github.io/fold/examples/foldviewer.html">FOLD Viewer</a>.<br/>
                    <br/>
                    <b>Importing SVG:</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
667 668
                    <ul>
                        <li>The SVG importer supports path objects and line objects (coming).  Please convert polygons to paths before importing.</li>
amandaghassaei's avatar
docs  
amandaghassaei committed
669 670 671
                        <li>Valley folds are <span style="color:red">red</span> - rgb(255, 0, 0), hex #ff0000</li>
                        <li>Mountain folds are <span style="color:blue">blue</span> - rgb(0, 0, 255), hex #0000ff</li>
                        <li>Outline edges are <span style="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
amandaghassaei's avatar
amandaghassaei committed
672 673
                        <img src="assets/examplepattern.jpg"/>
                        <li>This tool will automatically triangulate regions in the pattern that form polygons with more than three sides.
amandaghassaei's avatar
docs  
amandaghassaei committed
674 675
                        To control the triangulations draw lines in <span style="color:#cccc00">yellow</span> - rgb(255, 255, 0), hex #ffff00<br/>
                        In general, patterns move better when their triangulation is symmetric and minimizes long, skinny triangles.</li>
amandaghassaei's avatar
amandaghassaei committed
676 677 678
                        <img src="assets/patternwithtriangulations.jpg"/>
                        <li>Stroke and line style do not matter.</li>
                        <li>The final fold angle of a mountain or valley fold is set by its opacity. For example, 1.0 = 180&deg;
amandaghassaei's avatar
docs  
amandaghassaei committed
679
                        (fully folded), 0.5 = 90&deg;, 0 = 0&deg; (flat).  Any fold angle between  0&deg; and 180&deg; may be used.</li>
amandaghassaei's avatar
amandaghassaei committed
680 681 682
                        <li>This tool should be able to automatically clean files of slightly misaligned vertices, stray vertices,
                        duplicate lines (coming), and extra vertices falling in the middle of an edge (coming),
                        but it is recommended to remove these errors yourself in order to avoid problems.</li>
amandaghassaei's avatar
amandaghassaei committed
683
                        <li>If your simulation is not working, check that the pattern looks correct by clicking on the "Pattern" view in the top nav bar.</li>
amandaghassaei's avatar
amandaghassaei committed
684 685 686 687 688
                    </ul><br/>

                <b>For Adobe Illustrator users:</b><br/><br/>
                I use Illustrator to create SVGs (though any vector editing program should be fine), here are some tips I've found for making svgs to import into this tool.<br/><br/>
                    <ul>
amandaghassaei's avatar
amandaghassaei committed
689
                        <li>If you are starting with a pre-made vector file, first ungroup any groups, release all compound paths
amandaghassaei's avatar
amandaghassaei committed
690 691 692 693 694
                        (<b>Select all + Object>Compound Path>Release</b>), and release all clipping masks (<b>Select all + Object>Clipping Mask>Release</b>).</li>
                        <li>Create geometry using the <b>Line Segment Tool</b>.</li>
                        <li>Illustrator can help you select all lines of a particular type so that you can edit their color or opacity together.  Click the line,
                        then go to <b>Select>Same>Appearance</b> to select all similar lines in the pattern.
                        <li>To turn lines and polygons into path objects, select the geometry then right click and select <b>Make Compound Path</b>.</li>
amandaghassaei's avatar
amandaghassaei committed
695
                        <li>Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG 1.1 settings, but version 1.0 will work as well.</li>
amandaghassaei's avatar
amandaghassaei committed
696
                    </ul>
amandaghassaei's avatar
amandaghassaei committed
697 698 699 700 701
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
702 703 704 705 706 707 708 709 710 711 712 713 714
<div class="modal fade" id="aboutVRmodal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <b>VR</b><br/><br/>
                Working on VR support for Vive....
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
715 716 717 718 719 720 721
<div class="modal fade" id="exportSTLModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
amandaghassaei's avatar
amandaghassaei committed
722 723 724 725
                <b>Export STL</b><br/><br/>
                Filename: &nbsp;&nbsp;<input id="stlFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .stl<br/><br/>
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="exportScale form-control" type="text"><br/><br/>
                Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span></b><br/>
amandaghassaei's avatar
amandaghassaei committed
726
                <span class="smallTxt">(the STL file format is unitless, but typically assumed to be either in inches or mm)</span><br/>
amandaghassaei's avatar
amandaghassaei committed
727 728 729 730
                <label class="bigLabel checkbox" for="doublesidedSTL">
                    <input id="doublesidedSTL" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Double Sided
                </label>
amandaghassaei's avatar
amandaghassaei committed
731 732
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
733
                <button id="doSTLsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
734 735 736 737
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
738 739 740 741 742 743 744
<div class="modal fade" id="exportFOLDModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
amandaghassaei's avatar
amandaghassaei committed
745
                <b>Export FOLD</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
746
                Filename: &nbsp;&nbsp;<input id="foldFilename" value="" placeholder="" class="bigInput text form-control" type="text"> .fold<br/><br/>
amandaghassaei's avatar
amandaghassaei committed
747 748 749 750
                Author: &nbsp;&nbsp;<input id="foldAuthor" value="Amanda Ghassaei" placeholder="" class="bigInput text form-control" type="text"><br/><br/>
                Scale: &nbsp;&nbsp;<input value="" placeholder="" class="exportScale form-control" type="text">&nbsp;&nbsp;&nbsp;&nbsp;
                Units: &nbsp;&nbsp;
                <div class="btn-group">
amandaghassaei's avatar
amandaghassaei committed
751
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="unitsDisplay"></span> <span class="caret"></span></button>
amandaghassaei's avatar
amandaghassaei committed
752
                    <ul id="unitsDropdown" role="menu" class="dropdown-menu">
amandaghassaei's avatar
amandaghassaei committed
753 754 755 756 757 758 759 760
                        <li><a class="units" data-id="unit" href="#">unitless</a></li>
                        <li><a class="units" data-id="in" href="#">in</a></li>
                        <li><a class="units" data-id="pt" href="#">pt</a></li>
                        <li><a class="units" data-id="m" href="#">m</a></li>
                        <li><a class="units" data-id="cm" href="#">cm</a></li>
                        <li><a class="units" data-id="mm" href="#">mm</a></li>
                        <li><a class="units" data-id="um" href="#">um</a></li>
                        <li><a class="units" data-id="nm" href="#">nm</a></li>
amandaghassaei's avatar
amandaghassaei committed
761 762 763
                    </ul>
                </div>
                <br/><br/>
amandaghassaei's avatar
amandaghassaei committed
764 765 766 767 768 769 770 771 772 773
                Dimensions: &nbsp;&nbsp;<b><span class="exportDimensions"></span> <span class="unitsDisplay"></span></b><br/>
                <label class="bigLabel checkbox" for="triangulateFOLDexport">
                    <input id="triangulateFOLDexport" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Save with triangulated faces
                </label>
                <label class="bigLabel checkbox" for="exportFoldAngle">
                    <input id="exportFoldAngle" data-toggle="checkbox" disabled class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Save with vertices_foldAngles (coming soon)
                </label>
                <span class="smallTxt">For more information about the FOLD file format, see the <a target="_blank" href="https://github.com/edemaine/fold">offical docs</a></span>.
amandaghassaei's avatar
amandaghassaei committed
774 775
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
776
                <button id="doFOLDsave" type="button" class="actionButton btn btn-success" data-dismiss="modal">Save</button>
amandaghassaei's avatar
amandaghassaei committed
777 778 779 780
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
errors  
amandaghassaei committed
781 782 783 784 785 786 787
<div class="modal fade" id="importFoldModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
amandaghassaei's avatar
amandaghassaei committed
788
                <b>Import FOLD</b><br/><br/>
789
                <label class="bigLabel checkbox" for="foldUseAngles">
amandaghassaei's avatar
amandaghassaei committed
790 791 792
                    <input id="foldUseAngles" data-toggle="checkbox" class="custom-checkbox layersSelector" type="checkbox"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
                    Use current angles as target fold angles
                </label>
amandaghassaei's avatar
errors  
amandaghassaei committed
793 794
            </div>
            <div class="modal-footer">
amandaghassaei's avatar
amandaghassaei committed
795
                <button data-dismiss="modal" type="button" class="btn btn-success">OK</button>
amandaghassaei's avatar
errors  
amandaghassaei committed
796 797 798 799 800 801 802 803 804 805 806 807 808 809
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog">
    <div class="modal-dialog sm">
        <div class="modal-content">
            <div class="modal-body">
                <p id="warningMessage">
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
810 811 812 813 814 815 816 817
<div class="modal fade" id="aboutErrorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Simulation Error</b><br/><br/>
amandaghassaei's avatar
amandaghassaei committed
818
                    "Average node error" gives a sense of how much the distance constraints in the
amandaghassaei's avatar
amandaghassaei committed
819 820 821
                    origami pattern are being violated.  The error at each node is evaluated by averaging the
                    percent deviation of all its distance constraints with adjacent nodes.  This error is
                    reported as a percent of the total length of the distance constraint to remove scaling effects.
amandaghassaei's avatar
amandaghassaei committed
822 823 824
                    <br/><br/>
                    This measurement is equivalent to <a href="https://en.wikipedia.org/wiki/Deformation_(mechanics)#Engineering_strain" target="_blank">
                        Cauchy strain or engineering strain</a> of the axial constraints on this system.
amandaghassaei's avatar
amandaghassaei committed
825
                    Increasing the "Axial Stiffness" will tighten these constraints and
amandaghassaei's avatar
amandaghassaei committed
826 827
                    lower the error in the simulation.<br/>
                    <br/>
amandaghassaei's avatar
amandaghassaei committed
828
                    To visualize the error of each node graphically, select "Axial Strain Visualization" under "Mesh Material"
amandaghassaei's avatar
amandaghassaei committed
829 830 831 832 833 834
                     in the left menu.
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876
<div class="modal fade" id="aboutStiffnessModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Stiffness Settings</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutDynamicSimModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Compliant Dynamic Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="aboutStaticSimModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Compliant Static Simulation</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
877 878 879 880 881 882 883 884 885 886 887 888 889 890
<div class="modal fade" id="aboutAxialStrainModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-med">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <p><b>Axial Strain</b><br/><br/>
                    ....
                </p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
amandaghassaei's avatar
amandaghassaei committed
891 892
</body>
</html>