Laser Cat


<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <h1>Hello, LeapJS (V2)!</h1>
    <div id="output"></div>


    <canvas id="canvas" width=1000 height=500></canvas>
    <script src="https://js.leapmotion.com/leap-0.6.4.js"></script>
    <script type="text/javascript">

    function concatData(id, data) {
      return id + ": " + data + "<br>";
    }

    function getFingerName(fingerType) {
      switch(fingerType) {
        case 0:
          return 'Thumb';
        break;

        case 1:
          return 'Index';
        break;

        case 2:
          return 'Middle';
        break;

        case 3:
          return 'Ring';
        break;

        case 4:
          return 'Pinky';
        break;
      }
    }

    function concatJointPosition(id, position) {
      return id + ": " + position[0] + ", " + position[1] + ", " + position[2] + "<br>";
    }

   //global variables

    var output = document.getElementById('output');
    var frameString = "", handString = "", fingerString = "";
    var hand, finger;
    var callibrated = false;
    var d;
    var ctx = document.getElementById('canvas').getContext("2d");
    var circles = [ [75, 75], [675, 200], [300, 300]];
    var options = { enableGestures: true };
    var controller = new Leap.Controller();
    var frameDisplay = document.getElementById('frameID');
    var state = 0;
    var lines = [];
    var curLine = [];
    var dotA;
    var dotB;
    var dotC;
    var numLines = 0;

    Leap.loop(options, function(frame) {
        switch (state){
            case 0:

                x = circles[numLines][0];
                y = circles[numLines][1];
                makeCircle(x, y);
                if(lines.length < 100)
                {
                    tips = getTips(frame);
                        if(tips.length > 1)
                        {
                        lines.push(tips);
                        }
                }else{
                lines = avgTips(lines);
                console.log(lines);
                state = numLines + 1;
                }
                break;
            case 1:
                curLine.push(lines);
                lines = [];
                state = 0;
                document.body.style.backgroundColor = "purple";
                if(curLine.length == 2){
                    dotA = makeDot(curLine[0][0], curLine[0][1], curLine[1][0], curLine[1][1]);
                    numLines = 1;
                    curLine = [];
                document.body.style.backgroundColor = "blue";
                }
                break;
            case 2:
                curLine.push(lines);
                lines = [];
                state = 0;
                document.body.style.backgroundColor = "purple";
                if(curLine.length == 2){
                    dotB = makeDot(curLine[0][0], curLine[0][1], curLine[1][0], curLine[1][1]);
                    numLines = 2;
                    curLine = [];
                document.body.style.backgroundColor = "blue";
                }
                break;
            case 3:
                curLine.push(lines);
                lines = [];
                state = 0;
                if(curLine.length == 2){
                    dotC = makeDot(curLine[0][0], curLine[0][1], curLine[1][0], curLine[1][1]);
                    state = 4;
                }else{
                document.body.style.backgroundColor = "blue";
                }
                break;
            case 4:
                d = makePlane(dotA, dotB, dotC);
                alert('Calibrated!')
                state = 5;
                document.body.style.backgroundColor = "purple";
                break;
            case 5:
                tips = getTips(frame);
                if(tips.length == 2){
                inter = makeLinePlane(tips[0], tips[1]);
                var coord = imprint(inter);
                console.log("x " + coord[0] + "y " + coord[1]);
                makeCircle(coord[0], coord[1]);
                }
                break;
            }

   /*if(!callibrated){
      d = callibrate(frame);
      callibrated = true;
    }
    points = getTips(frame);
    pos = makeLinePlane(points[0], points[1]);
  */

    });


    function makeLinePlane(p1, p2)               // tells the position of the dot on the screen when you through two fingertips
    {
      dir = sub(p2, p1);
      u = mult(dir,-1 * ((dot(p1, d) - 1)/dot(dir, d)));
      u = add(u,p1);
      return u;
    }


    function makeDot(p1, p2, p3, p4)         // tells you the the position of the dot on the screen when two lines are given to it
    {
      var points = [];
      for (var i = 0; i < 3; i++){
          point = (p1[i] * (p3[i] - p4[i]) - p3[i] * (p1[i] - p2[i])) / ( (p3[i] - p4[i]) - (p1[i] - p2[i]));
          points.push(point);
      }
      return points;
    }


    function makePlane(d1, d2, d3)       // tells the plane when the position of three points is given to it.
    {
      o = cross(sub(d1, d2), sub(d2, d3));
      plane = div(o, dot(d1, o));
      return plane;
    }


    function getTips(frame)           // gives the tips of the fingers of the hand
    {
      frameString = concatData("frame_id", frame.id);
      frameString += concatData("num_hands", frame.hands.length);
      frameString += concatData("num_fingers", frame.fingers.length);
      frameString += "<br>";
      var points = [];
      // Showcase some new V2 features
      for (var i = 0, len = frame.hands.length; i < len; i++)
      {
        points.push(frame.hands[i].fingers[1].dipPosition);
      }
      output.innerHTML = frameString;
           return points;

    }

    function avgTips(cat)
    {
      var p1 = [0, 0, 0];
      var p2 = [0, 0, 0];
      len = cat.length;
      for(var i = 0; i < len; i++)
      {
        p1 = add(p1, [cat[i][0][0]/len,cat[i][0][1]/len,cat[i][0][2]/len ] );
        p2 = add(p2, [cat[i][1][0]/len,cat[i][1][1]/len,cat[i][1][2]/len ] );
      }
      return [p1, p2];
    }

    function imprint(inter){
        console.log("Y: " + inter[1]);
        console.log("Z: " + inter[2]);
        x = ((circles[1][0])*(inter[0] - dotA[0]) + (circles[0][0])*(inter[0] - dotB[0]) )/(dotB[0] - dotA[0]);
        /*a = (circles[1][1])*(inter[1] - dotA[1]);
        b = (circles[0][1])*(inter[1] - dotB[1])
        c = (dotA[1] - dotB[1]);
        console.log(a+' '+ b + ' '+ c);
        y = 250 - ((b - a)/c);*/
        y = inter[1];
        return [x, y];
    }

    function makeCircle(x, y){
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle="red";
    ctx.fill();
    }


    function add(v1,v2)
    {
    return [v1[0]+v2[0],v1[1]+v2[1],v1[2]+v2[2]];
    }

    function sub(v1,v2)
    {
    return [v1[0]-v2[0],v1[1]-v2[1],v1[2]-v2[2]];
    }

    function dot(v1,v2)
    {
    return v1[0]*v2[0] + v1[1]*v2[1] + v1[2]*v2[2];
    }
    function cross(v1,v2)
    {
    return [v1[1]*v2[2]-v1[2]*v2[1],v1[0]*v2[2]-v1[2]*v2[0],v1[0]*v2[1] - v1[1]*v2[0]];
    }

    function div(v1, s)
    {
    ret = [];
    for(var i = 0; i < v1.length; i++){
        ret.push(v1[i] / s);
    }
    return ret;
    }

    function mult(v1, s){
    ret = [];
    for(var i = 0; i < v1.length; i++){
        ret.push(v1[i] * s);
    }
    return ret;
    }

    </script>
  </body>
</html>