Amimation Implement

example/project.js

@@ -69,7 +69,7 @@ var numNodes = 13;
 var numAngles = 15;
 var angle = 0;
 
-var posVec = [0, 0, 0];
+var posVec = [-10, 0, -5];
 var theta = [70, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
 var directionVec = [0, 0, 0];
 
@@ -524,48 +524,6 @@ window.onload = function init() {
         initNodes(torsoId);
         return;
     };
-    // document.getElementById("slider1").onchange = function(event) {
-    //     theta[head1Id] = event.target.value;
-    //     initNodes(head1Id);
-    // };
-
-    // document.getElementById("slider2").onchange = function(event) {
-    //      theta[leftUpperArmId] = event.target.value;
-    //      initNodes(leftUpperArmId);
-    // };
-    // document.getElementById("slider3").onchange = function(event) {
-    //      theta[leftLowerArmId] =  event.target.value;
-    //      initNodes(leftLowerArmId);
-    // };
-
-    //     document.getElementById("slider4").onchange = function(event) {
-    //     theta[rightUpperArmId] = event.target.value;
-    //     initNodes(rightUpperArmId);
-    // };
-    // document.getElementById("slider5").onchange = function(event) {
-    //      theta[rightLowerArmId] =  event.target.value;
-    //      initNodes(rightLowerArmId);
-    // };
-    //     document.getElementById("slider6").onchange = function(event) {
-    //     theta[leftUpperLegId] = event.target.value;
-    //     initNodes(leftUpperLegId);
-    // };
-    // document.getElementById("slider7").onchange = function(event) {
-    //      theta[leftLowerLegId] = event.target.value;
-    //      initNodes(leftLowerLegId);
-    // };
-    // document.getElementById("slider8").onchange = function(event) {
-    //      theta[rightUpperLegId] =  event.target.value;
-    //      initNodes(rightUpperLegId);
-    // };
-    //     document.getElementById("slider9").onchange = function(event) {
-    //     theta[rightLowerLegId] = event.target.value;
-    //     initNodes(rightLowerLegId);
-    // };
-    // document.getElementById("slider10").onchange = function(event) {
-    //      theta[head2Id] = event.target.value;
-    //      initNodes(head2Id);
-    // };
 
     document.getElementById("slider11").onchange = function(event) {
         lightposVector[xAxis] = event.target.value;
@@ -816,6 +774,9 @@ function walk(){
     if(animationState < 18 || animationState > 26)
         return;
 
+    var pstate = [0, 0, 0];
+    const parray = pstate.map((value, index) => value + directionVec[index] * 0.1);
+
     const tstate1 = [90, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
     const tstate2 = [95, 0, 230, -110, 210, -60, 210, -60, 230, -110, -60, 151, 1, 0, 2];
     const tstate3 = [100, 0, 190, -70, 230, -60, 230, -60, 190, -70, -60, 149, -1, 0, 0]; 
@@ -838,6 +799,8 @@ function walk(){
     const tarray5 = divideArrays(tstate6, tstate5, frame5);
     const tarray6 = divideArrays(tstate7, tstate6, frame6);
 
+    posVec = updatepos(posVec, parray);
+
     if (animationState === 18) {
         ({ theta, frameCount } = updateTheta(theta, tarray1, frameCount, frame1, 19));
     } else if (animationState === 19) {
@@ -847,7 +810,7 @@ function walk(){
     } else if (animationState === 21) {
         ({ theta, frameCount } = updateTheta(theta, tarray4, frameCount, frame4, 22));
     } else if (animationState === 22) {
-        if(walking < 50){
+        if(walking < 16){
             ({ theta, frameCount } = updateTheta(theta, tarray5, frameCount, frame5, 19));
             walking++;
         }else{