victorcastelan
7/3/2013 - 2:33 PM

Walker

Walker

Walker.html
content_copyfile_download
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Real Walk</title>
  </head>
  <body>
    
    <canvas id="canvas" width="400" height="400"></canvas>
   

    <script src="js/utils.js"></script>
    <script src="js/segment.js"></script>
    <script src="js/slider.js"></script>
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          segment0 = new Segment(50, 15),
          segment1 = new Segment(50, 10),
          segment2 = new Segment(50, 15),
          segment3 = new Segment(50, 10),
          speedSlider = new Slider(0, 0.2, 0.08),
          thighRangeSlider = new Slider(0, 90, 45),
          thighBaseSlider = new Slider(0, 180, 90),
          calfRangeSlider = new Slider(0, 90, 45),
          calfOffsetSlider = new Slider(-3.14, 3.14, -1.57),
          gravitySlider = new Slider(0, 1, 0.2),
          cycle = 0,
          vx = 0,
          vy = 0;
      
      segment0.x = 200;
      segment0.y = 200;
      
      segment1.x = segment0.getPin().x;
      segment1.y = segment0.getPin().y;

      segment2.x = 200;
      segment2.y = 200;
      
      segment3.x = segment2.getPin().x;
      segment3.y = segment2.getPin().y;

      speedSlider.x = 10;
      speedSlider.y = 10;
      speedSlider.captureMouse(canvas);

      thighRangeSlider.x = 30;
      thighRangeSlider.y = 10;
      thighRangeSlider.captureMouse(canvas);

      thighBaseSlider.x = 50;
      thighBaseSlider.y = 10;
      thighBaseSlider.captureMouse(canvas);

      calfRangeSlider.x = 70;
      calfRangeSlider.y = 10;
      calfRangeSlider.captureMouse(canvas);

      calfOffsetSlider.x = 90;
      calfOffsetSlider.y = 10;
      calfOffsetSlider.captureMouse(canvas);

      gravitySlider.x = 110;
      gravitySlider.y = 10;
      gravitySlider.captureMouse(canvas);

      function setVelocity () {
        vy += gravitySlider.value;
        segment0.x += vx;
        segment0.y += vy;
        segment2.x += vx;
        segment2.y += vy;
      }
      
      function walk (segA, segB, cyc) {
        var angle0 = (Math.sin(cyc) * thighRangeSlider.value + thighBaseSlider.value) * Math.PI / 180,
            angle1 = (Math.sin(cyc + calfOffsetSlider.value) * calfRangeSlider.value + calfRangeSlider.value) * Math.PI / 180,
            foot = segB.getPin();

        segA.rotation = angle0;
        segB.rotation = segA.rotation + angle1;
        segB.x = segA.getPin().x;
        segB.y = segA.getPin().y;
        segB.vx = segB.getPin().x - foot.x;
        segB.vy = segB.getPin().y - foot.y;
      }

      function checkFloor (seg) {
        var yMax = seg.getPin().y + (seg.height / 2);
        if (yMax > canvas.height) {
          var dy = yMax - canvas.height;
          segment0.y -= dy;
          segment1.y -= dy;
          segment2.y -= dy;
          segment3.y -= dy;
          vx -= seg.vx;
          vy -= seg.vy;
        }
      }
      
      function checkWalls () {
        var w = canvas.width + 200;
        if (segment0.x > canvas.width + 100) {
          segment0.x -= w;
          segment1.x -= w;
          segment2.x -= w;
          segment3.x -= w;
        } else if (segment0.x < -100) {
          segment0.x += w;
          segment1.x += w;
          segment2.x += w;
          segment3.x += w;
        }
      }

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);
        
        cycle += speedSlider.value;
        setVelocity();
        walk(segment0, segment1, cycle);
        walk(segment2, segment3, cycle + Math.PI);
        checkFloor(segment1);
        checkFloor(segment3);
        checkWalls();
        
        segment0.draw(context);
        segment1.draw(context);
        segment2.draw(context);
        segment3.draw(context);
        speedSlider.draw(context);
        thighRangeSlider.draw(context);
        thighBaseSlider.draw(context);
        calfRangeSlider.draw(context);
        calfOffsetSlider.draw(context);
        gravitySlider.draw(context);
      }());
    };
    </script>
  </body>
</html>