From 1d7d0db1a0ae73fd404d6030d5e16bdbde33f1a3 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Fri, 27 Jan 2017 09:36:56 -0500
Subject: [PATCH 01/15] Non-function GUI

---
 src/main.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/main.js b/src/main.js
index fd8fbd4..d7d2312 100755
--- a/src/main.js
+++ b/src/main.js
@@ -52,11 +52,45 @@ function onLoad(framework) {
     // scene.add(lambertCube);
     scene.add(directionalLight);
 
+    //
+    var feather = {
+        distribution: 1.0,
+        size: 1.0,
+        color: [ 0, 128, 255 ],
+        orientation: 50,
+    };
+
+    var flapping = {
+        speed: 1.0,
+        motion: 1.0
+    }
+
     // edit params and listen to changes like this
     // more information here: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
     gui.add(camera, 'fov', 0, 180).onChange(function(newVal) {
         camera.updateProjectionMatrix();
     });
+
+    var f1 = gui.addFolder('Feather');
+    f1.add(feather, 'distribution', 0, 10).onChange(function(newVal) {
+
+    });
+    f1.add(feather, 'size', 0, 10).onChange(function(newVal) {
+
+    });
+    f1.addColor(feather, 'color').onChange(function(newVal) {
+
+    });
+    f1.open();
+
+    var f2 = gui.addFolder('Flapping');
+    f2.add(flapping, 'speed', 0.0, 5.0).onChange(function(newVal) {
+
+    });
+    f2.add(flapping, 'motion', 0.0, 5.0).onChange(function(newVal) {
+
+    });
+    f2.open();
 }
 
 // called on frame updates

From 6b5fb60d7ae615aea0e18d5e31c6e7a9786fb855 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Mon, 30 Jan 2017 12:19:14 -0500
Subject: [PATCH 02/15] Added feathers to curve

---
 src/main.js | 111 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 83 insertions(+), 28 deletions(-)

diff --git a/src/main.js b/src/main.js
index d7d2312..0826122 100755
--- a/src/main.js
+++ b/src/main.js
@@ -33,37 +33,83 @@ function onLoad(framework) {
 
     scene.background = skymap;
 
+
+    // Settings, Parameters 
+    var curveParams = {
+
+    }
+
+    var featherParams = {
+        distribution: 1.0,
+        size: 1.0,
+        color: [ 0, 128, 255 ],
+        orientation: 50,
+        points: 1000
+    };
+
+    var flappingParams = {
+        speed: 1.0,
+        motion: 1.0
+    }
+
+    var box = new THREE.BoxGeometry( 1, 1, 1 );
+    var mesh = new THREE.Mesh(box, lambertWhite);
+    mesh.position.set(5, 0, 0);
+    scene.add(mesh);
+
+    var curve = new THREE.CubicBezierCurve3(
+        new THREE.Vector3( -10, 0, 0 ),
+        new THREE.Vector3( -5, 15, 10 ),
+        new THREE.Vector3( 20, 15, 0 ),
+        new THREE.Vector3( 50, -20, 20 )
+    );
+
+    var geometry = new THREE.Geometry();
+    var points = curve.getPoints (featherParams.points);
+    geometry.vertices = points;
+
+    var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+
+    // Create the final object to add to the scene
+    var curveObject = new THREE.Line( geometry, material );
+    scene.add(curveObject);
+
+    var feather_items = [];
+
+
     // load a simple obj mesh
     var objLoader = new THREE.OBJLoader();
     objLoader.load('/geo/feather.obj', function(obj) {
 
         // LOOK: This function runs after the obj has finished loading
         var featherGeo = obj.children[0].geometry;
-
         var featherMesh = new THREE.Mesh(featherGeo, lambertWhite);
-        featherMesh.name = "feather";
-        scene.add(featherMesh);
+        featherMesh.rotateZ(-Math.PI / 2.0);
+        featherMesh.rotateX(Math.PI / 2.0);
+
+        for (var i = 0.0; i < featherParams.points; i++) {
+
+
+            var featherInstance = featherMesh.clone()
+            featherInstance.position.set(points[i].x, points[i].y, points[i].z);
+            var s = 2.0 * i / featherParams.points + 0.2;
+            featherInstance.scale.set(s, s, s);
+            scene.add(featherInstance);
+        }
+
+        // featherMesh.name = "feather";
+        // scene.add(featherMesh);
     });
 
+
     // set camera position
-    camera.position.set(0, 1, 5);
+    camera.position.set(0, 1, 50);
     camera.lookAt(new THREE.Vector3(0,0,0));
 
     // scene.add(lambertCube);
     scene.add(directionalLight);
 
-    //
-    var feather = {
-        distribution: 1.0,
-        size: 1.0,
-        color: [ 0, 128, 255 ],
-        orientation: 50,
-    };
 
-    var flapping = {
-        speed: 1.0,
-        motion: 1.0
-    }
 
     // edit params and listen to changes like this
     // more information here: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
@@ -71,36 +117,45 @@ function onLoad(framework) {
         camera.updateProjectionMatrix();
     });
 
+    // Curve Controls
+    // var f0 = gui.addFolder('Curve');
+
+    // Feather Controls
     var f1 = gui.addFolder('Feather');
-    f1.add(feather, 'distribution', 0, 10).onChange(function(newVal) {
+    f1.add(featherParams, 'distribution', 0, 10).onChange(function(newVal) {
 
     });
-    f1.add(feather, 'size', 0, 10).onChange(function(newVal) {
+    f1.add(featherParams, 'size', 0, 10).onChange(function(newVal) {
 
     });
-    f1.addColor(feather, 'color').onChange(function(newVal) {
+    f1.addColor(featherParams, 'color').onChange(function(newVal) {
 
     });
-    f1.open();
+    //f1.open();
 
+    // Flapping Controls
     var f2 = gui.addFolder('Flapping');
-    f2.add(flapping, 'speed', 0.0, 5.0).onChange(function(newVal) {
+    f2.add(flappingParams, 'speed', 0.0, 5.0).onChange(function(newVal) {
 
     });
-    f2.add(flapping, 'motion', 0.0, 5.0).onChange(function(newVal) {
+    f2.add(flappingParams, 'motion', 0.0, 5.0).onChange(function(newVal) {
 
     });
-    f2.open();
+    //f2.open();
+}
+
+function updateCurve() {
+
 }
 
 // called on frame updates
 function onUpdate(framework) {
-    var feather = framework.scene.getObjectByName("feather");    
-    if (feather !== undefined) {
-        // Simply flap wing
-        var date = new Date();
-        feather.rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180);        
-    }
+    // var feather = framework.scene.getObjectByName("feather");    
+    // if (feather !== undefined) {
+    //     // Simply flap wing
+    //     var date = new Date();
+    //     feather.rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180);        
+    // }
 }
 
 // when the scene is done initializing, it will call onLoad, then on frame updates, call onUpdate

From 61560776d08d27fc5d265ad31250be278ccc6b25 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 14:30:11 -0500
Subject: [PATCH 03/15] Finished modelling wings

---
 src/main.js | 121 +++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 100 insertions(+), 21 deletions(-)

diff --git a/src/main.js b/src/main.js
index 0826122..c10062e 100755
--- a/src/main.js
+++ b/src/main.js
@@ -41,7 +41,7 @@ function onLoad(framework) {
 
     var featherParams = {
         distribution: 1.0,
-        size: 1.0,
+        size: 5.0,
         color: [ 0, 128, 255 ],
         orientation: 50,
         points: 1000
@@ -52,16 +52,12 @@ function onLoad(framework) {
         motion: 1.0
     }
 
-    var box = new THREE.BoxGeometry( 1, 1, 1 );
-    var mesh = new THREE.Mesh(box, lambertWhite);
-    mesh.position.set(5, 0, 0);
-    scene.add(mesh);
-
+    // TOP CURVE
     var curve = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, 0, 0 ),
-        new THREE.Vector3( -5, 15, 10 ),
-        new THREE.Vector3( 20, 15, 0 ),
-        new THREE.Vector3( 50, -20, 20 )
+        new THREE.Vector3( -10, -5, 0.4 ),
+        new THREE.Vector3( 15, 5, 10.4 ),
+        new THREE.Vector3( 30, -5, 5.4 ),
+        new THREE.Vector3( 50, -5, 15 )
     );
 
     var geometry = new THREE.Geometry();
@@ -72,11 +68,47 @@ function onLoad(framework) {
 
     // Create the final object to add to the scene
     var curveObject = new THREE.Line( geometry, material );
-    scene.add(curveObject);
+    //scene.add(curveObject);
+    // END TOP CURVE
+
+    // SECOND CURVE
+    var curve2 = new THREE.CubicBezierCurve3(
+        new THREE.Vector3( -10, -5, 0.2 ),
+        new THREE.Vector3( 15, 5, 10.2 ),
+        new THREE.Vector3( 40, -20, 0.2 ),
+        new THREE.Vector3( 80, 10, 27 )
+    );
+    
+    var geometry2 = new THREE.Geometry();
+    var points2 = curve2.getPoints (featherParams.points);
+    geometry2.vertices = points2;
+
+    var material2 = new THREE.LineBasicMaterial( { color : 0x00ff00 } );
+    var curveObject2 = new THREE.Line( geometry2, material2 );
+
+    //scene.add(curveObject2);
+    // END SECOND CURVE
+
+    // THIRD CURVE
+    var curve3 = new THREE.CubicBezierCurve3(
+        new THREE.Vector3( -10, -5, 0 ),
+        new THREE.Vector3( 20, 10, 10 ),
+        new THREE.Vector3( 40, -30, 0 ),
+        new THREE.Vector3( 100, 20, 27 )
+    );
+    
+    var geometry3 = new THREE.Geometry();
+    var points3 = curve3.getPoints (featherParams.points);
+    geometry3.vertices = points3;
 
-    var feather_items = [];
+    var material3 = new THREE.LineBasicMaterial( { color : 0x0000ff } );
+    var curveObject3 = new THREE.Line( geometry3, material3 );
 
+    //scene.add(curveObject3);
+    // END THIRD CURVE
 
+
+    // TODO: CLEAN UP THIS MESSY REPEATING CODE, WHO ARE YOU ELLEN.
     // load a simple obj mesh
     var objLoader = new THREE.OBJLoader();
     objLoader.load('/geo/feather.obj', function(obj) {
@@ -84,21 +116,68 @@ function onLoad(framework) {
         // LOOK: This function runs after the obj has finished loading
         var featherGeo = obj.children[0].geometry;
         var featherMesh = new THREE.Mesh(featherGeo, lambertWhite);
-        featherMesh.rotateZ(-Math.PI / 2.0);
-        featherMesh.rotateX(Math.PI / 2.0);
+        // featherMesh.rotateZ(-Math.PI / 2.0);
+        // featherMesh.rotateX(Math.PI / 2.0);
 
-        for (var i = 0.0; i < featherParams.points; i++) {
+        var axis = new THREE.Vector3();
+        var up = new THREE.Vector3( 0, 1, 0 );
 
+        var threshold = 4.0;
+        var add = 0.0;
+        for (var i = 0.0; i < featherParams.points; i++) {
+            if (i > threshold) {      
+                threshold *= 1.5;
+                add++;
+            }
 
-            var featherInstance = featherMesh.clone()
+            // FIRST
+            var featherInstance = featherMesh.clone();
             featherInstance.position.set(points[i].x, points[i].y, points[i].z);
-            var s = 2.0 * i / featherParams.points + 0.2;
+            var s = featherParams.size * i / featherParams.points / 2 + 2.0;
             featherInstance.scale.set(s, s, s);
+
+            var tangent = curve.getTangent(i / featherParams.points).normalize();
+            axis.crossVectors(up, tangent).normalize();
+            var rad = Math.acos(up.dot(tangent));
+
+            featherInstance.quaternion.setFromAxisAngle( axis, rad );
+            featherInstance.rotateX(Math.PI / 2.0);
+
             scene.add(featherInstance);
-        }
 
-        // featherMesh.name = "feather";
-        // scene.add(featherMesh);
+            // SECOND
+            var featherInstance2 = featherMesh.clone();
+            featherInstance2.position.set(points2[i].x, points2[i].y, points2[i].z);
+            var s2 = featherParams.size + 1.0;
+            featherInstance2.scale.set(s2, s2, s2);
+
+            var tangent2 = curve2.getTangent(i / featherParams.points).normalize();
+            axis.crossVectors(up, tangent2).normalize();
+            var rad2 = Math.acos(up.dot(tangent2));
+
+            featherInstance2.quaternion.setFromAxisAngle( axis, rad2 );
+            featherInstance2.rotateX(Math.PI / 2.0);
+
+            scene.add(featherInstance2);
+
+
+            // THIRD
+            var featherInstance3 = featherMesh.clone();
+            featherInstance3.position.set(points3[i].x, points3[i].y, points3[i].z);
+            var s3 = featherParams.size * 2 * i / featherParams.points + 7.0;
+            featherInstance3.scale.set(s3, s3, s3);
+            
+            var tangent3 = curve3.getTangent(i / featherParams.points).normalize();
+            axis.crossVectors(up, tangent3).normalize();
+            var rad3 = Math.acos(up.dot(tangent3));
+
+            featherInstance3.quaternion.setFromAxisAngle( axis, rad3 );
+            featherInstance3.rotateX(Math.PI / 2.0);
+
+            scene.add(featherInstance3);
+
+            i += add;
+        }
     });
 
 
@@ -126,7 +205,7 @@ function onLoad(framework) {
 
     });
     f1.add(featherParams, 'size', 0, 10).onChange(function(newVal) {
-
+        featherParams.size = newVal;
     });
     f1.addColor(featherParams, 'color').onChange(function(newVal) {
 

From 0e13eefe9528bdbe180960e4de4bb07ccf2511ef Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 15:14:19 -0500
Subject: [PATCH 04/15] reformatted code barely

---
 src/main.js | 209 ++++++++++++++++++++++++++--------------------------
 1 file changed, 106 insertions(+), 103 deletions(-)

diff --git a/src/main.js b/src/main.js
index c10062e..019e419 100755
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,36 @@
 const THREE = require('three'); // older modules are imported like this. You shouldn't have to worry about this much
 import Framework from './framework'
 
+// Array of feathers on their corresponding curves;
+var featherGeo;
+var curve;
+var curve2;
+var curve3;
+var points;
+var points2;
+var points3;
+var lambertWhite;
+
+// Settings, Parameters 
+var curveParams = {
+
+}
+
+var featherParams = {
+    distribution: 1.0,
+    size: 5.0,
+    color: [ 0, 128, 255 ],
+    orientation: 50,
+    points: 1000
+};
+
+var flappingParams = {
+    speed: 1.0,
+    motion: 1.0
+}
+
+
+
 // called after the scene loads
 function onLoad(framework) {
     var scene = framework.scene;
@@ -13,7 +43,7 @@ function onLoad(framework) {
     var stats = framework.stats;
 
     // Basic Lambert white
-    var lambertWhite = new THREE.MeshLambertMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide });
+    lambertWhite = new THREE.MeshLambertMaterial({ color: 0xaaaaaa, side: THREE.DoubleSide });
 
     // Set light
     var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
@@ -33,46 +63,25 @@ function onLoad(framework) {
 
     scene.background = skymap;
 
-
-    // Settings, Parameters 
-    var curveParams = {
-
-    }
-
-    var featherParams = {
-        distribution: 1.0,
-        size: 5.0,
-        color: [ 0, 128, 255 ],
-        orientation: 50,
-        points: 1000
-    };
-
-    var flappingParams = {
-        speed: 1.0,
-        motion: 1.0
-    }
-
-    // TOP CURVE
-    var curve = new THREE.CubicBezierCurve3(
+    var geometry = new THREE.Geometry();
+    curve = new THREE.CubicBezierCurve3(
         new THREE.Vector3( -10, -5, 0.4 ),
         new THREE.Vector3( 15, 5, 10.4 ),
         new THREE.Vector3( 30, -5, 5.4 ),
         new THREE.Vector3( 50, -5, 15 )
     );
-
-    var geometry = new THREE.Geometry();
-    var points = curve.getPoints (featherParams.points);
+    points = curve.getPoints (featherParams.points);
     geometry.vertices = points;
 
     var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
     // Create the final object to add to the scene
-    var curveObject = new THREE.Line( geometry, material );
+    //var curveObject = new THREE.Line( geometry, material );
     //scene.add(curveObject);
     // END TOP CURVE
 
     // SECOND CURVE
-    var curve2 = new THREE.CubicBezierCurve3(
+    curve2 = new THREE.CubicBezierCurve3(
         new THREE.Vector3( -10, -5, 0.2 ),
         new THREE.Vector3( 15, 5, 10.2 ),
         new THREE.Vector3( 40, -20, 0.2 ),
@@ -80,17 +89,16 @@ function onLoad(framework) {
     );
     
     var geometry2 = new THREE.Geometry();
-    var points2 = curve2.getPoints (featherParams.points);
+    points2 = curve2.getPoints (featherParams.points);
     geometry2.vertices = points2;
 
-    var material2 = new THREE.LineBasicMaterial( { color : 0x00ff00 } );
-    var curveObject2 = new THREE.Line( geometry2, material2 );
-
+    //var material2 = new THREE.LineBasicMaterial( { color : 0x00ff00 } );
+    //var curveObject2 = new THREE.Line( geometry2, material2 );
     //scene.add(curveObject2);
     // END SECOND CURVE
 
     // THIRD CURVE
-    var curve3 = new THREE.CubicBezierCurve3(
+    curve3 = new THREE.CubicBezierCurve3(
         new THREE.Vector3( -10, -5, 0 ),
         new THREE.Vector3( 20, 10, 10 ),
         new THREE.Vector3( 40, -30, 0 ),
@@ -98,86 +106,21 @@ function onLoad(framework) {
     );
     
     var geometry3 = new THREE.Geometry();
-    var points3 = curve3.getPoints (featherParams.points);
+    points3 = curve3.getPoints (featherParams.points);
     geometry3.vertices = points3;
 
-    var material3 = new THREE.LineBasicMaterial( { color : 0x0000ff } );
-    var curveObject3 = new THREE.Line( geometry3, material3 );
-
+    //var material3 = new THREE.LineBasicMaterial( { color : 0x0000ff } );
+    //var curveObject3 = new THREE.Line( geometry3, material3 );
     //scene.add(curveObject3);
     // END THIRD CURVE
 
-
     // TODO: CLEAN UP THIS MESSY REPEATING CODE, WHO ARE YOU ELLEN.
     // load a simple obj mesh
     var objLoader = new THREE.OBJLoader();
     objLoader.load('/geo/feather.obj', function(obj) {
-
         // LOOK: This function runs after the obj has finished loading
-        var featherGeo = obj.children[0].geometry;
-        var featherMesh = new THREE.Mesh(featherGeo, lambertWhite);
-        // featherMesh.rotateZ(-Math.PI / 2.0);
-        // featherMesh.rotateX(Math.PI / 2.0);
-
-        var axis = new THREE.Vector3();
-        var up = new THREE.Vector3( 0, 1, 0 );
-
-        var threshold = 4.0;
-        var add = 0.0;
-        for (var i = 0.0; i < featherParams.points; i++) {
-            if (i > threshold) {      
-                threshold *= 1.5;
-                add++;
-            }
-
-            // FIRST
-            var featherInstance = featherMesh.clone();
-            featherInstance.position.set(points[i].x, points[i].y, points[i].z);
-            var s = featherParams.size * i / featherParams.points / 2 + 2.0;
-            featherInstance.scale.set(s, s, s);
-
-            var tangent = curve.getTangent(i / featherParams.points).normalize();
-            axis.crossVectors(up, tangent).normalize();
-            var rad = Math.acos(up.dot(tangent));
-
-            featherInstance.quaternion.setFromAxisAngle( axis, rad );
-            featherInstance.rotateX(Math.PI / 2.0);
-
-            scene.add(featherInstance);
-
-            // SECOND
-            var featherInstance2 = featherMesh.clone();
-            featherInstance2.position.set(points2[i].x, points2[i].y, points2[i].z);
-            var s2 = featherParams.size + 1.0;
-            featherInstance2.scale.set(s2, s2, s2);
-
-            var tangent2 = curve2.getTangent(i / featherParams.points).normalize();
-            axis.crossVectors(up, tangent2).normalize();
-            var rad2 = Math.acos(up.dot(tangent2));
-
-            featherInstance2.quaternion.setFromAxisAngle( axis, rad2 );
-            featherInstance2.rotateX(Math.PI / 2.0);
-
-            scene.add(featherInstance2);
-
-
-            // THIRD
-            var featherInstance3 = featherMesh.clone();
-            featherInstance3.position.set(points3[i].x, points3[i].y, points3[i].z);
-            var s3 = featherParams.size * 2 * i / featherParams.points + 7.0;
-            featherInstance3.scale.set(s3, s3, s3);
-            
-            var tangent3 = curve3.getTangent(i / featherParams.points).normalize();
-            axis.crossVectors(up, tangent3).normalize();
-            var rad3 = Math.acos(up.dot(tangent3));
-
-            featherInstance3.quaternion.setFromAxisAngle( axis, rad3 );
-            featherInstance3.rotateX(Math.PI / 2.0);
-
-            scene.add(featherInstance3);
-
-            i += add;
-        }
+        featherGeo = obj.children[0].geometry;
+        createWing(featherGeo, scene);
     });
 
 
@@ -223,8 +166,68 @@ function onLoad(framework) {
     //f2.open();
 }
 
-function updateCurve() {
+function createWing(featherGeo, scene) {
+    var featherMesh = new THREE.Mesh(featherGeo, lambertWhite);
+
+    var axis = new THREE.Vector3();
+    var up = new THREE.Vector3( 0, 1, 0 );
+
+    var threshold = 4.0;
+    var add = 0.0;
+    for (var i = 0.0; i < featherParams.points; i++) {
+        if (i > threshold) {      
+            threshold *= 1.5;
+            add++;
+        }
+
+        // FIRST
+        var featherInstance = featherMesh.clone();
+        featherInstance.position.set(points[i].x, points[i].y, points[i].z);
+        var s = featherParams.size * i / featherParams.points / 2 + 2.0;
+        featherInstance.scale.set(s, s, s);
+
+        var tangent = curve.getTangent(i / featherParams.points).normalize();
+        axis.crossVectors(up, tangent).normalize();
+        var rad = Math.acos(up.dot(tangent));
+
+        featherInstance.quaternion.setFromAxisAngle( axis, rad );
+        featherInstance.rotateX(Math.PI / 2.0);
+
+        scene.add(featherInstance);
+
+        // SECOND
+        var featherInstance2 = featherMesh.clone();
+        featherInstance2.position.set(points2[i].x, points2[i].y, points2[i].z);
+        var s2 = featherParams.size + 1.0;
+        featherInstance2.scale.set(s2, s2, s2);
+
+        var tangent2 = curve2.getTangent(i / featherParams.points).normalize();
+        axis.crossVectors(up, tangent2).normalize();
+        var rad2 = Math.acos(up.dot(tangent2));
+
+        featherInstance2.quaternion.setFromAxisAngle( axis, rad2 );
+        featherInstance2.rotateX(Math.PI / 2.0);
 
+        scene.add(featherInstance2);
+
+
+        // THIRD
+        var featherInstance3 = featherMesh.clone();
+        featherInstance3.position.set(points3[i].x, points3[i].y, points3[i].z);
+        var s3 = featherParams.size * 2 * i / featherParams.points + 7.0;
+        featherInstance3.scale.set(s3, s3, s3);
+        
+        var tangent3 = curve3.getTangent(i / featherParams.points).normalize();
+        axis.crossVectors(up, tangent3).normalize();
+        var rad3 = Math.acos(up.dot(tangent3));
+
+        featherInstance3.quaternion.setFromAxisAngle( axis, rad3 );
+        featherInstance3.rotateX(Math.PI / 2.0);
+
+        scene.add(featherInstance3);
+
+        i += add;
+    }
 }
 
 // called on frame updates

From 6e096499bb315d40abe5c5bdcf1326782ffa74ea Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 15:42:32 -0500
Subject: [PATCH 05/15] Changing colors

---
 src/main.js | 45 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/main.js b/src/main.js
index 019e419..e0ee512 100755
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,10 @@ var points2;
 var points3;
 var lambertWhite;
 
+var f1 = [];
+var f2 = [];
+var f3 = [];
+
 // Settings, Parameters 
 var curveParams = {
 
@@ -22,7 +26,7 @@ var curveParams = {
 var featherParams = {
     distribution: 1.0,
     size: 5.0,
-    color: [ 0, 128, 255 ],
+    color: [ 0.0, 128.0, 255.0 ],
     orientation: 50,
     points: 1000
 };
@@ -32,8 +36,6 @@ var flappingParams = {
     motion: 1.0
 }
 
-
-
 // called after the scene loads
 function onLoad(framework) {
     var scene = framework.scene;
@@ -145,23 +147,24 @@ function onLoad(framework) {
     // Feather Controls
     var f1 = gui.addFolder('Feather');
     f1.add(featherParams, 'distribution', 0, 10).onChange(function(newVal) {
-
+        updateWing();
     });
     f1.add(featherParams, 'size', 0, 10).onChange(function(newVal) {
         featherParams.size = newVal;
+        updateWing();
     });
     f1.addColor(featherParams, 'color').onChange(function(newVal) {
-
+        updateWing();
     });
     //f1.open();
 
     // Flapping Controls
     var f2 = gui.addFolder('Flapping');
     f2.add(flappingParams, 'speed', 0.0, 5.0).onChange(function(newVal) {
-
+        updateWing();
     });
     f2.add(flappingParams, 'motion', 0.0, 5.0).onChange(function(newVal) {
-
+        updateWing();
     });
     //f2.open();
 }
@@ -192,6 +195,7 @@ function createWing(featherGeo, scene) {
 
         featherInstance.quaternion.setFromAxisAngle( axis, rad );
         featherInstance.rotateX(Math.PI / 2.0);
+        f1.push(featherInstance);
 
         scene.add(featherInstance);
 
@@ -207,6 +211,7 @@ function createWing(featherGeo, scene) {
 
         featherInstance2.quaternion.setFromAxisAngle( axis, rad2 );
         featherInstance2.rotateX(Math.PI / 2.0);
+        f2.push(featherInstance2);
 
         scene.add(featherInstance2);
 
@@ -223,11 +228,37 @@ function createWing(featherGeo, scene) {
 
         featherInstance3.quaternion.setFromAxisAngle( axis, rad3 );
         featherInstance3.rotateX(Math.PI / 2.0);
+        f3.push(featherInstance3);
 
         scene.add(featherInstance3);
 
         i += add;
     }
+
+    updateWing();
+}
+
+function updateWing() {
+    for (var i = 0; i < f1.length; i++) {
+        var r = featherParams.color[0] / 255.0;
+        var g = featherParams.color[1] / 255.0;
+        var b = featherParams.color[2] / 255.0;
+
+        //var f1_color = "rgb(" + r.toString() + ", " + g.toString() + ", " + b.toString() + ")";
+        // console.log(f1_color);
+
+
+        f1[i].material.color = new THREE.Color(r, g, b);
+    }
+
+    for (var j = 0; j < f2.length; j++) {
+
+
+    }
+
+    for (var k = 0; k < f3.length; k++) {
+
+    }
 }
 
 // called on frame updates

From cd1e95e80d4c5369609e6bb87e9999546b7411f3 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 16:19:16 -0500
Subject: [PATCH 06/15] adjusted colors

---
 src/main.js | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/main.js b/src/main.js
index e0ee512..873b698 100755
--- a/src/main.js
+++ b/src/main.js
@@ -184,7 +184,7 @@ function createWing(featherGeo, scene) {
         }
 
         // FIRST
-        var featherInstance = featherMesh.clone();
+        var featherInstance = new THREE.Mesh(featherGeo, lambertWhite.clone());
         featherInstance.position.set(points[i].x, points[i].y, points[i].z);
         var s = featherParams.size * i / featherParams.points / 2 + 2.0;
         featherInstance.scale.set(s, s, s);
@@ -200,7 +200,7 @@ function createWing(featherGeo, scene) {
         scene.add(featherInstance);
 
         // SECOND
-        var featherInstance2 = featherMesh.clone();
+        var featherInstance2 = new THREE.Mesh(featherGeo, lambertWhite.clone());
         featherInstance2.position.set(points2[i].x, points2[i].y, points2[i].z);
         var s2 = featherParams.size + 1.0;
         featherInstance2.scale.set(s2, s2, s2);
@@ -217,7 +217,7 @@ function createWing(featherGeo, scene) {
 
 
         // THIRD
-        var featherInstance3 = featherMesh.clone();
+        var featherInstance3 = new THREE.Mesh(featherGeo, lambertWhite.clone());
         featherInstance3.position.set(points3[i].x, points3[i].y, points3[i].z);
         var s3 = featherParams.size * 2 * i / featherParams.points + 7.0;
         featherInstance3.scale.set(s3, s3, s3);
@@ -239,25 +239,20 @@ function createWing(featherGeo, scene) {
 }
 
 function updateWing() {
-    for (var i = 0; i < f1.length; i++) {
-        var r = featherParams.color[0] / 255.0;
-        var g = featherParams.color[1] / 255.0;
-        var b = featherParams.color[2] / 255.0;
-
-        //var f1_color = "rgb(" + r.toString() + ", " + g.toString() + ", " + b.toString() + ")";
-        // console.log(f1_color);
+    var r = featherParams.color[0] / 255.0;
+    var g = featherParams.color[1] / 255.0;
+    var b = featherParams.color[2] / 255.0;
 
-
-        f1[i].material.color = new THREE.Color(r, g, b);
+    for (var i = 0; i < f1.length; i++) {
+        f1[i].material.color = new THREE.Color(r * 1.5, g * 1.5, b + i / f1.length);
     }
 
     for (var j = 0; j < f2.length; j++) {
-
-
+        f2[j].material.color = new THREE.Color(r + j / f2.length, g + j / f2.length, b + j / f2.length);
     }
 
     for (var k = 0; k < f3.length; k++) {
-
+        f3[k].material.color = new THREE.Color(r, g + k / f3.length, b);
     }
 }
 

From ca3222462f0ac9db0f237137ccdd9ec2f5a0c5b2 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 16:30:30 -0500
Subject: [PATCH 07/15] Changing sizes

---
 src/main.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/main.js b/src/main.js
index 873b698..96be313 100755
--- a/src/main.js
+++ b/src/main.js
@@ -239,20 +239,41 @@ function createWing(featherGeo, scene) {
 }
 
 function updateWing() {
+    // Color
     var r = featherParams.color[0] / 255.0;
     var g = featherParams.color[1] / 255.0;
     var b = featherParams.color[2] / 255.0;
 
+
+
+
+
+
     for (var i = 0; i < f1.length; i++) {
+        // Color
         f1[i].material.color = new THREE.Color(r * 1.5, g * 1.5, b + i / f1.length);
+
+        // Scale
+        var s = featherParams.size * i / featherParams.points / 2 + 2.0;
+        f1[i].scale.set(s, s, s);
     }
 
     for (var j = 0; j < f2.length; j++) {
+        // Color
         f2[j].material.color = new THREE.Color(r + j / f2.length, g + j / f2.length, b + j / f2.length);
+
+        // Scale
+        var s2 = featherParams.size * 2 * i / featherParams.points + 3.0;
+        f2[j].scale.set(s2, s2, s2);
     }
 
     for (var k = 0; k < f3.length; k++) {
+        // Color
         f3[k].material.color = new THREE.Color(r, g + k / f3.length, b);
+
+        //
+        var s3 = featherParams.size + 7.0 * i / featherParams.points;
+        f3[k].scale.set(s3, s3, s3);
     }
 }
 

From 4936353b573a898be5b0408fb0927bcdd01edbc9 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 19:14:40 -0500
Subject: [PATCH 08/15] Beginnings of movement

---
 src/main.js | 88 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 56 insertions(+), 32 deletions(-)

diff --git a/src/main.js b/src/main.js
index 96be313..917f8df 100755
--- a/src/main.js
+++ b/src/main.js
@@ -6,9 +6,26 @@ import Framework from './framework'
 
 // Array of feathers on their corresponding curves;
 var featherGeo;
-var curve;
-var curve2;
-var curve3;
+var loaded = false;
+
+var curve = new THREE.CubicBezierCurve3(
+        new THREE.Vector3( -10, -5, 0.4 ),
+        new THREE.Vector3( 15, 5, 10.4 ),
+        new THREE.Vector3( 30, -5, 5.4 ),
+        new THREE.Vector3( 50, -5, 15 )
+    );
+var curve2 = new THREE.CubicBezierCurve3(
+        new THREE.Vector3( -10, -5, 0.2 ),
+        new THREE.Vector3( 15, 5, 10.2 ),
+        new THREE.Vector3( 40, -20, 0.2 ),
+        new THREE.Vector3( 80, 10, 27 )
+    );
+var curve3 = new THREE.CubicBezierCurve3(
+        new THREE.Vector3( -10, -5, 0 ),
+        new THREE.Vector3( 20, 10, 10 ),
+        new THREE.Vector3( 40, -30, 0 ),
+        new THREE.Vector3( 100, 20, 27 )
+    );
 var points;
 var points2;
 var points3;
@@ -65,30 +82,18 @@ function onLoad(framework) {
 
     scene.background = skymap;
 
+
+    var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
     var geometry = new THREE.Geometry();
-    curve = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, -5, 0.4 ),
-        new THREE.Vector3( 15, 5, 10.4 ),
-        new THREE.Vector3( 30, -5, 5.4 ),
-        new THREE.Vector3( 50, -5, 15 )
-    );
     points = curve.getPoints (featherParams.points);
     geometry.vertices = points;
 
-    var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
 
-    // Create the final object to add to the scene
     //var curveObject = new THREE.Line( geometry, material );
     //scene.add(curveObject);
     // END TOP CURVE
 
     // SECOND CURVE
-    curve2 = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, -5, 0.2 ),
-        new THREE.Vector3( 15, 5, 10.2 ),
-        new THREE.Vector3( 40, -20, 0.2 ),
-        new THREE.Vector3( 80, 10, 27 )
-    );
     
     var geometry2 = new THREE.Geometry();
     points2 = curve2.getPoints (featherParams.points);
@@ -100,13 +105,6 @@ function onLoad(framework) {
     // END SECOND CURVE
 
     // THIRD CURVE
-    curve3 = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, -5, 0 ),
-        new THREE.Vector3( 20, 10, 10 ),
-        new THREE.Vector3( 40, -30, 0 ),
-        new THREE.Vector3( 100, 20, 27 )
-    );
-    
     var geometry3 = new THREE.Geometry();
     points3 = curve3.getPoints (featherParams.points);
     geometry3.vertices = points3;
@@ -133,8 +131,6 @@ function onLoad(framework) {
     // scene.add(lambertCube);
     scene.add(directionalLight);
 
-
-
     // edit params and listen to changes like this
     // more information here: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
     gui.add(camera, 'fov', 0, 180).onChange(function(newVal) {
@@ -150,7 +146,6 @@ function onLoad(framework) {
         updateWing();
     });
     f1.add(featherParams, 'size', 0, 10).onChange(function(newVal) {
-        featherParams.size = newVal;
         updateWing();
     });
     f1.addColor(featherParams, 'color').onChange(function(newVal) {
@@ -244,11 +239,6 @@ function updateWing() {
     var g = featherParams.color[1] / 255.0;
     var b = featherParams.color[2] / 255.0;
 
-
-
-
-
-
     for (var i = 0; i < f1.length; i++) {
         // Color
         f1[i].material.color = new THREE.Color(r * 1.5, g * 1.5, b + i / f1.length);
@@ -275,6 +265,37 @@ function updateWing() {
         var s3 = featherParams.size + 7.0 * i / featherParams.points;
         f3[k].scale.set(s3, s3, s3);
     }
+
+    loaded = true;
+}
+
+function moveWing() {
+    // console.log(curve.v0);
+    var date = new Date();
+
+    for (var i = 0; i < f1.length; i++) {
+        var x = f1[i].position.x;
+        var y = f1[i].position.y;
+        var z = f1[i].position.z;
+        f1[i].position.set(x, y, z);
+        f1[i].rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180);   
+    }
+
+    for (var j = 0; j < f2.length; j++) {
+        var x = f2[j].position.x;
+        var y = f2[j].position.y;
+        var z = f2[j].position.z;
+        f2[j].position.set(x, y, z);
+        f2[j].rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); 
+    }
+
+    for (var k = 0; k < f3.length; k++) {       
+        var x = f3[k].position.x;
+        var y = f3[k].position.y;
+        var z = f3[k].position.z;
+        f3[k].position.set(x, y, z);
+        f3[k].rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); 
+    }
 }
 
 // called on frame updates
@@ -285,6 +306,9 @@ function onUpdate(framework) {
     //     var date = new Date();
     //     feather.rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180);        
     // }
+    if (loaded) {
+        moveWing();
+    }
 }
 
 // when the scene is done initializing, it will call onLoad, then on frame updates, call onUpdate

From ecaf79e1aea07032885d801d59ac51b7eb6f1edb Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 19:30:24 -0500
Subject: [PATCH 09/15] wind

---
 src/main.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index 917f8df..7a8a14f 100755
--- a/src/main.js
+++ b/src/main.js
@@ -45,7 +45,7 @@ var featherParams = {
     size: 5.0,
     color: [ 0.0, 128.0, 255.0 ],
     orientation: 50,
-    points: 1000
+    points: 1500
 };
 
 var flappingParams = {
@@ -278,7 +278,8 @@ function moveWing() {
         var y = f1[i].position.y;
         var z = f1[i].position.z;
         f1[i].position.set(x, y, z);
-        f1[i].rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180);   
+        f1[i].rotateZ(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);  
+        f1[i].rotateY(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);
     }
 
     for (var j = 0; j < f2.length; j++) {
@@ -286,7 +287,8 @@ function moveWing() {
         var y = f2[j].position.y;
         var z = f2[j].position.z;
         f2[j].position.set(x, y, z);
-        f2[j].rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); 
+        f2[j].rotateZ(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);  
+        f2[j].rotateY(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);
     }
 
     for (var k = 0; k < f3.length; k++) {       
@@ -294,7 +296,8 @@ function moveWing() {
         var y = f3[k].position.y;
         var z = f3[k].position.z;
         f3[k].position.set(x, y, z);
-        f3[k].rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180); 
+        f3[k].rotateZ(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180); 
+        f3[k].rotateY(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180); 
     }
 }
 

From a4d50ae426f46a503a8781f303b0ea9613dbefc6 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 21:42:08 -0500
Subject: [PATCH 10/15] Minor flapping

---
 src/main.js | 109 ++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 81 insertions(+), 28 deletions(-)

diff --git a/src/main.js b/src/main.js
index 7a8a14f..c5e5639 100755
--- a/src/main.js
+++ b/src/main.js
@@ -9,22 +9,22 @@ var featherGeo;
 var loaded = false;
 
 var curve = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, -5, 0.4 ),
-        new THREE.Vector3( 15, 5, 10.4 ),
-        new THREE.Vector3( 30, -5, 5.4 ),
-        new THREE.Vector3( 50, -5, 15 )
+        new THREE.Vector3( 0, -5, 0.4 ),
+        new THREE.Vector3( 25, 5, 10.4 ),
+        new THREE.Vector3( 40, -5, 5.4 ),
+        new THREE.Vector3( 60, -5, 15 )
     );
 var curve2 = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, -5, 0.2 ),
-        new THREE.Vector3( 15, 5, 10.2 ),
-        new THREE.Vector3( 40, -20, 0.2 ),
-        new THREE.Vector3( 80, 10, 27 )
+        new THREE.Vector3( 0, -5, 0.2 ),
+        new THREE.Vector3( 25, 5, 10.2 ),
+        new THREE.Vector3( 50, -20, 0.2 ),
+        new THREE.Vector3( 90, 10, 27 )
     );
 var curve3 = new THREE.CubicBezierCurve3(
-        new THREE.Vector3( -10, -5, 0 ),
-        new THREE.Vector3( 20, 10, 10 ),
-        new THREE.Vector3( 40, -30, 0 ),
-        new THREE.Vector3( 100, 20, 27 )
+        new THREE.Vector3( 0, -5, 0 ),
+        new THREE.Vector3( 30, 10, 10 ),
+        new THREE.Vector3( 50, -30, 0 ),
+        new THREE.Vector3( 90, 10, 27 )
     );
 var points;
 var points2;
@@ -34,6 +34,9 @@ var lambertWhite;
 var f1 = [];
 var f2 = [];
 var f3 = [];
+var f1_rad = [];
+var f2_rad = [];
+var f3_rad = [];
 
 // Settings, Parameters 
 var curveParams = {
@@ -191,13 +194,14 @@ function createWing(featherGeo, scene) {
         featherInstance.quaternion.setFromAxisAngle( axis, rad );
         featherInstance.rotateX(Math.PI / 2.0);
         f1.push(featherInstance);
-
+        f1_rad.push(featherInstance.rotation);
         scene.add(featherInstance);
 
+
         // SECOND
         var featherInstance2 = new THREE.Mesh(featherGeo, lambertWhite.clone());
         featherInstance2.position.set(points2[i].x, points2[i].y, points2[i].z);
-        var s2 = featherParams.size + 1.0;
+        var s2 = featherParams.size * 2 * i / featherParams.points + 1.0;
         featherInstance2.scale.set(s2, s2, s2);
 
         var tangent2 = curve2.getTangent(i / featherParams.points).normalize();
@@ -207,7 +211,7 @@ function createWing(featherGeo, scene) {
         featherInstance2.quaternion.setFromAxisAngle( axis, rad2 );
         featherInstance2.rotateX(Math.PI / 2.0);
         f2.push(featherInstance2);
-
+        f2_rad.push(featherInstance2.rotation);
         scene.add(featherInstance2);
 
 
@@ -224,7 +228,7 @@ function createWing(featherGeo, scene) {
         featherInstance3.quaternion.setFromAxisAngle( axis, rad3 );
         featherInstance3.rotateX(Math.PI / 2.0);
         f3.push(featherInstance3);
-
+        f3_rad.push(featherInstance3.rotation);
         scene.add(featherInstance3);
 
         i += add;
@@ -244,7 +248,7 @@ function updateWing() {
         f1[i].material.color = new THREE.Color(r * 1.5, g * 1.5, b + i / f1.length);
 
         // Scale
-        var s = featherParams.size * i / featherParams.points / 2 + 2.0;
+        var s = featherParams.size * i / f1.length / 2 + 2.0;
         f1[i].scale.set(s, s, s);
     }
 
@@ -253,7 +257,7 @@ function updateWing() {
         f2[j].material.color = new THREE.Color(r + j / f2.length, g + j / f2.length, b + j / f2.length);
 
         // Scale
-        var s2 = featherParams.size * 2 * i / featherParams.points + 3.0;
+        var s2 = featherParams.size * 2 * j / f2.length + 3.0;
         f2[j].scale.set(s2, s2, s2);
     }
 
@@ -262,13 +266,15 @@ function updateWing() {
         f3[k].material.color = new THREE.Color(r, g + k / f3.length, b);
 
         //
-        var s3 = featherParams.size + 7.0 * i / featherParams.points;
+        var s3 = featherParams.size * 2 * k / f2.length + 7.0;
         f3[k].scale.set(s3, s3, s3);
     }
 
     loaded = true;
 }
 
+
+var threshold = Math.PI / 10.0;
 function moveWing() {
     // console.log(curve.v0);
     var date = new Date();
@@ -277,27 +283,74 @@ function moveWing() {
         var x = f1[i].position.x;
         var y = f1[i].position.y;
         var z = f1[i].position.z;
-        f1[i].position.set(x, y, z);
-        f1[i].rotateZ(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);  
-        f1[i].rotateY(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);
+        f1[i].position.set(x, y, x * Math.sin(date / 1000));
+
+        var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
+        var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
+
+        if (f1[i].rotation.z + rotz <= f1_rad[i].z + threshold 
+            && f1[i].rotation.z + rotz >= f1_rad[i].z - threshold) {
+            f1[i].rotateZ(rotz); 
+        } else {
+            f1[i].rotateZ(-rotz); 
+        }
+
+        if (f1[i].rotation.y + roty <= f1_rad[i].y + threshold 
+            && f1[i].rotation.y + roty >= f1_rad[i].y - threshold) {
+            f1[i].rotateY(roty); 
+        } else {
+            f1[i].rotateY(-roty); 
+        }
     }
 
     for (var j = 0; j < f2.length; j++) {
         var x = f2[j].position.x;
         var y = f2[j].position.y;
         var z = f2[j].position.z;
-        f2[j].position.set(x, y, z);
-        f2[j].rotateZ(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);  
-        f2[j].rotateY(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180);
+        f2[j].position.set(x, y, x * Math.sin(date / 1000));
+
+        var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
+        var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
+
+        if (f2[j].rotation.z + rotz <= f2_rad[j].z + threshold 
+            && f1[j].rotation.z + rotz >= f2_rad[j].z - threshold) {
+            f2[j].rotateZ(rotz); 
+        } else {
+            f2[j].rotateZ(-rotz); 
+        }
+
+        if (f2[j].rotation.y + roty <= f2_rad[j].y + threshold 
+            && f2[j].rotation.y + roty >= f2_rad[j].y - threshold) {
+            f2[j].rotateY(roty); 
+        } else {
+            f2[j].rotateY(-roty); 
+        }
     }
 
     for (var k = 0; k < f3.length; k++) {       
         var x = f3[k].position.x;
         var y = f3[k].position.y;
         var z = f3[k].position.z;
-        f3[k].position.set(x, y, z);
-        f3[k].rotateZ(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180); 
-        f3[k].rotateY(Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180); 
+        console.log(date);
+        f3[k].position.set(x, y, x * Math.sin(date / 1000));
+        //f3[k].position.set(x, y, z + x * sin(date));
+
+        var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
+        var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
+
+        if (f3[k].rotation.z + rotz <= f3_rad[k].z + threshold 
+            && f3[k].rotation.z + rotz >= f3_rad[k].z - threshold) {
+            f3[k].rotateZ(rotz); 
+        } else {
+            f3[k].rotateZ(-rotz);
+        }
+
+        if (f3[k].rotation.y + roty <= f3_rad[k].y + threshold 
+            && f3[k].rotation.y + roty >= f3_rad[k].y - threshold) {
+            f3[k].rotateY(roty); 
+        } else {
+            f3[k].rotateY(-roty); 
+        }
     }
 }
 

From 0c10b996678577021367c2792acc54343ec9c929 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 21:52:12 -0500
Subject: [PATCH 11/15] fixed flapping

---
 src/main.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index c5e5639..61f89b4 100755
--- a/src/main.js
+++ b/src/main.js
@@ -283,7 +283,7 @@ function moveWing() {
         var x = f1[i].position.x;
         var y = f1[i].position.y;
         var z = f1[i].position.z;
-        f1[i].position.set(x, y, x * Math.sin(date / 1000));
+        f1[i].position.set(x, y, x * x * Math.sin(date / 1000.0) / 100.0);
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -307,7 +307,7 @@ function moveWing() {
         var x = f2[j].position.x;
         var y = f2[j].position.y;
         var z = f2[j].position.z;
-        f2[j].position.set(x, y, x * Math.sin(date / 1000));
+        f2[j].position.set(x, y, x * x * Math.sin(date / 1000.0) / 100.0);
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -331,8 +331,7 @@ function moveWing() {
         var x = f3[k].position.x;
         var y = f3[k].position.y;
         var z = f3[k].position.z;
-        console.log(date);
-        f3[k].position.set(x, y, x * Math.sin(date / 1000));
+        f3[k].position.set(x, y, x * x * Math.sin(date / 1000.0) / 100.0);
         //f3[k].position.set(x, y, z + x * sin(date));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;

From b5618f225b90e8d2f02de1bbef34d83a96a5a30c Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 22:00:46 -0500
Subject: [PATCH 12/15] Connected flapping gui

---
 src/main.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index 61f89b4..9ec81ae 100755
--- a/src/main.js
+++ b/src/main.js
@@ -278,12 +278,15 @@ var threshold = Math.PI / 10.0;
 function moveWing() {
     // console.log(curve.v0);
     var date = new Date();
+    var motion = flappingParams.motion;
+    var speed = flappingParams.speed;
+
 
     for (var i = 0; i < f1.length; i++) {
         var x = f1[i].position.x;
         var y = f1[i].position.y;
         var z = f1[i].position.z;
-        f1[i].position.set(x, y, x * x * Math.sin(date / 1000.0) / 100.0);
+        f1[i].position.set(x, y, x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -307,7 +310,7 @@ function moveWing() {
         var x = f2[j].position.x;
         var y = f2[j].position.y;
         var z = f2[j].position.z;
-        f2[j].position.set(x, y, x * x * Math.sin(date / 1000.0) / 100.0);
+        f2[j].position.set(x, y, x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -331,8 +334,7 @@ function moveWing() {
         var x = f3[k].position.x;
         var y = f3[k].position.y;
         var z = f3[k].position.z;
-        f3[k].position.set(x, y, x * x * Math.sin(date / 1000.0) / 100.0);
-        //f3[k].position.set(x, y, z + x * sin(date));
+        f3[k].position.set(x, y, x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;

From 222be04a26f701c32e7cb9464c3de5b26f81cb8b Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 22:22:59 -0500
Subject: [PATCH 13/15] Updated readme

---
 README.md   | 84 +++++------------------------------------------------
 src/main.js | 59 +++++++++++++------------------------
 2 files changed, 28 insertions(+), 115 deletions(-)

diff --git a/README.md b/README.md
index 1410c30..9467568 100644
--- a/README.md
+++ b/README.md
@@ -2,81 +2,13 @@
 
 ## Overview
 
-The objective of this assignment is to procedurally model and animate a bird wing. Let's get creative!
+This is an animation of a bird wing. In a bird wing, feathers closer to the bird's body tend to be more clustered whereas feathers further away tend to be more spread out. Additionally, feathers at the top of its arm are typically smaller than the feathers lower down on its wing. 
 
-Start by forking and then cloning [this repository](https://github.com/CIS700-Procedural-Graphics/Project2-Toolbox-Functions)
+The wing is customizable. You should change the feather's colors and size. You can also change its flapping speeds and how big it's wing motion is. 
 
-## Modeling
-
-##### Reference images
-
-Search for three or more images of a bird wing (or any flying creature, really) in order to provide yourself reference material, as you're going to base your modeling and animation from these images. For the more artistic minds, feel free to sketch your own concept.
-
-##### Make wing curve
-
-Begin with a 3D curve for your basic wing shape. Three.js provides classes to create many different types of curves, so you may use whatever type of curve you prefer.
-
-##### Distribute feathers
-
-We have provided a simple feather model from which to begin. You are not required to use this model if you have others that you prefer. From this base, you must duplicate the feather to model a complete wing, and your wing should consist of at least thirty feathers. Distribute points along the curve you created previously; you will append the feather primitives to the curve at these points. Make sure that you modify the size, orientation, and color of your feathers depending on their location on the wing. 
-
-Feel free to diversify your wings by using multiple base feather models.
-
-## Animation
-
-Add a wind force to your scene, and parameterize its direction and speed. You will use this wind force to animate the feathers of your wing by vibrating them slightly. Using Dat.GUI, allow the user to modify these wind parameters. Please note that we don't care about your feather motion being physically accurate, as long as it looks nice.
-
-Additionally, animate the control points of your wing curve to make the wing flap, and allow the user to control the speed of the wing flapping.
-
-## Interactivity
-
-Using Dat.GUI and the examples provided in the reference code, allow the user to adjust the following controls:
-
-1. The curvature of the wing's basic shape
-2. Feather distribution
-3. Feather size
-4. Feather color
-5. Feather orientation
-6. Flapping speed
-7. Flapping motion
-
-## For the Overachievers
-
-Suggestions:
-- Make a pretty iridescent or otherwise feather appropriate shader.
-- Otherwise, going the extra mile for this assignment is really in the polish!
-
-## Submission
-
-- Create a folder called `references` to include your reference images.
-
-- Update `README.md` to contain a solid description of your project
-
-- Publish your project to gh-pages. `npm run deploy`. It should now be visible at http://username.github.io/repo-name
-
-- Create a [pull request](https://help.github.com/articles/creating-a-pull-request/) to this repository, and in the comment, include a link to your published project.
-
-- Submit the link to your pull request on Canvas.
-
-## Getting Started
-
-1. [Install Node.js](https://nodejs.org/en/download/). Node.js is a JavaScript runtime. It basically allows you to run JavaScript when not in a browser. For our purposes, this is not necessary. The important part is that with it comes `npm`, the Node Package Manager. This allows us to easily declare and install external dependencies such as [three.js](https://threejs.org/), [dat.GUI](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage), and [glMatrix](http://glmatrix.net/). Some other packages we'll be using make it significantly easier to develop your code and create modules for better code reuse and clarity. These tools make it _signficantly_ easier to write code in multiple `.js` files without globally defining everything.
-
-2. Fork and clone your repository.
-
-3. In the root directory of your project, run `npm install`. This will download all of those dependencies.
-
-4. Do either of the following (but I highly recommend the first one for reasons I will explain later).
-
-    a. Run `npm start` and then go to `localhost:7000` in your web browser
-
-    b. Run `npm run build` and then go open `index.html` in your web browser
-
-    You should hopefully see the framework code with a 3D cube at the center of the screen!
-
-
-## Developing Your Code
-All of the JavaScript code is living inside the `src` directory. The main file that gets executed when you load the page as you may have guessed is `main.js`. Here, you can make any changes you want, import functions from other files, etc. The reason that I highly suggest you build your project with `npm start` is that doing so will start a process that watches for any changes you make to your code. If it detects anything, it'll automagically rebuild your project and then refresh your browser window for you. Wow. That's cool. If you do it the other way, you'll need to run `npm build` and then refresh your page every time you want to test something.
-
-## Publishing Your Code
-We highly suggest that you put your code on GitHub. One of the reasons we chose to make this course using JavaScript is that the Web is highly accessible and making your awesome work public and visible can be a huge benefit when you're looking to score a job or internship. To aid you in this process, running `npm run deploy` will automatically build your project and push it to `gh-pages` where it will be visible at `username.github.io/repo-name`.
\ No newline at end of file
+Other features:
+Wind
+Flapping
+Gradient Color
+Scaling of feathers along the wing
+Beginning curves made with Bezier Curves
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9ec81ae..9510bf9 100755
--- a/src/main.js
+++ b/src/main.js
@@ -31,6 +31,7 @@ var points2;
 var points3;
 var lambertWhite;
 
+// Stores the feather meshes and the rotation data
 var f1 = [];
 var f2 = [];
 var f3 = [];
@@ -38,6 +39,9 @@ var f1_rad = [];
 var f2_rad = [];
 var f3_rad = [];
 
+// Threshold of the Wind
+var threshold = Math.PI * 0.05;
+
 // Settings, Parameters 
 var curveParams = {
 
@@ -85,38 +89,21 @@ function onLoad(framework) {
 
     scene.background = skymap;
 
-
-    var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
+    // First Curve
     var geometry = new THREE.Geometry();
     points = curve.getPoints (featherParams.points);
     geometry.vertices = points;
 
-
-    //var curveObject = new THREE.Line( geometry, material );
-    //scene.add(curveObject);
-    // END TOP CURVE
-
-    // SECOND CURVE
-    
+    // Second Curve
     var geometry2 = new THREE.Geometry();
     points2 = curve2.getPoints (featherParams.points);
     geometry2.vertices = points2;
 
-    //var material2 = new THREE.LineBasicMaterial( { color : 0x00ff00 } );
-    //var curveObject2 = new THREE.Line( geometry2, material2 );
-    //scene.add(curveObject2);
-    // END SECOND CURVE
-
-    // THIRD CURVE
+    // Third CURVE
     var geometry3 = new THREE.Geometry();
     points3 = curve3.getPoints (featherParams.points);
     geometry3.vertices = points3;
 
-    //var material3 = new THREE.LineBasicMaterial( { color : 0x0000ff } );
-    //var curveObject3 = new THREE.Line( geometry3, material3 );
-    //scene.add(curveObject3);
-    // END THIRD CURVE
-
     // TODO: CLEAN UP THIS MESSY REPEATING CODE, WHO ARE YOU ELLEN.
     // load a simple obj mesh
     var objLoader = new THREE.OBJLoader();
@@ -126,7 +113,6 @@ function onLoad(framework) {
         createWing(featherGeo, scene);
     });
 
-
     // set camera position
     camera.position.set(0, 1, 50);
     camera.lookAt(new THREE.Vector3(0,0,0));
@@ -141,20 +127,17 @@ function onLoad(framework) {
     });
 
     // Curve Controls
-    // var f0 = gui.addFolder('Curve');
-
     // Feather Controls
     var f1 = gui.addFolder('Feather');
-    f1.add(featherParams, 'distribution', 0, 10).onChange(function(newVal) {
-        updateWing();
-    });
+    // f1.add(featherParams, 'distribution', 0, 10).onChange(function(newVal) {
+    //     updateWing();
+    // });
     f1.add(featherParams, 'size', 0, 10).onChange(function(newVal) {
         updateWing();
     });
     f1.addColor(featherParams, 'color').onChange(function(newVal) {
         updateWing();
     });
-    //f1.open();
 
     // Flapping Controls
     var f2 = gui.addFolder('Flapping');
@@ -164,7 +147,6 @@ function onLoad(framework) {
     f2.add(flappingParams, 'motion', 0.0, 5.0).onChange(function(newVal) {
         updateWing();
     });
-    //f2.open();
 }
 
 function createWing(featherGeo, scene) {
@@ -274,9 +256,8 @@ function updateWing() {
 }
 
 
-var threshold = Math.PI / 10.0;
+
 function moveWing() {
-    // console.log(curve.v0);
     var date = new Date();
     var motion = flappingParams.motion;
     var speed = flappingParams.speed;
@@ -286,7 +267,9 @@ function moveWing() {
         var x = f1[i].position.x;
         var y = f1[i].position.y;
         var z = f1[i].position.z;
-        f1[i].position.set(x, y, x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
+        f1[i].position.set(x, 
+                           y,
+                           x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -310,7 +293,9 @@ function moveWing() {
         var x = f2[j].position.x;
         var y = f2[j].position.y;
         var z = f2[j].position.z;
-        f2[j].position.set(x, y, x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
+        f2[j].position.set(x, 
+                           y,
+                           x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -334,7 +319,9 @@ function moveWing() {
         var x = f3[k].position.x;
         var y = f3[k].position.y;
         var z = f3[k].position.z;
-        f3[k].position.set(x, y, x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
+        f3[k].position.set(x, 
+                           y, 
+                           x * x * Math.sin(date * speed * 0.001) * (motion * 0.01));
 
         var rotz = Math.sin((Math.random() - 0.5) / 3.0) * 2 * Math.PI / 180;
         var roty = Math.sin((Math.random() - 0.5) / 2.0) * 2 * Math.PI / 180;
@@ -357,12 +344,6 @@ function moveWing() {
 
 // called on frame updates
 function onUpdate(framework) {
-    // var feather = framework.scene.getObjectByName("feather");    
-    // if (feather !== undefined) {
-    //     // Simply flap wing
-    //     var date = new Date();
-    //     feather.rotateZ(Math.sin(date.getTime() / 100) * 2 * Math.PI / 180);        
-    // }
     if (loaded) {
         moveWing();
     }

From aafe327aa21c0ee2bf3ca38031817b1721a0ddf5 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 22:24:21 -0500
Subject: [PATCH 14/15] Piazza Post 51 about git deploy problems

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c80e8a3..cde25c8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "start": "webpack-dev-server --hot --inline",
     "build": "webpack",
-    "deploy": "rm -rf npm-debug.log && git checkout master && git commit -am 'update' && gh-pages-deploy"
+    "deploy": "gh-pages-deploy"
   },
   "gh-pages-deploy": {
     "prep": [

From 27d0a957b75ff79f9855f3103416f18d051f9b82 Mon Sep 17 00:00:00 2001
From: eldu <eldu@seas.upenn.edu>
Date: Tue, 31 Jan 2017 22:33:23 -0500
Subject: [PATCH 15/15] More minor fixes

---
 src/main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index 9510bf9..c74ccee 100755
--- a/src/main.js
+++ b/src/main.js
@@ -79,7 +79,7 @@ function onLoad(framework) {
 
     // set skybox
     var loader = new THREE.CubeTextureLoader();
-    var urlPrefix = '/images/skymap/';
+    var urlPrefix = 'images/skymap/';
 
     var skymap = new THREE.CubeTextureLoader().load([
         urlPrefix + 'px.jpg', urlPrefix + 'nx.jpg',
@@ -107,7 +107,7 @@ function onLoad(framework) {
     // TODO: CLEAN UP THIS MESSY REPEATING CODE, WHO ARE YOU ELLEN.
     // load a simple obj mesh
     var objLoader = new THREE.OBJLoader();
-    objLoader.load('/geo/feather.obj', function(obj) {
+    objLoader.load('geo/feather.obj', function(obj) {
         // LOOK: This function runs after the obj has finished loading
         featherGeo = obj.children[0].geometry;
         createWing(featherGeo, scene);