let showPoints = true;

​

//array is right the fuck here

let bobs = [];

let restLength = 40;

let k = 0.01;

let gravity;

​

//------------------------------------------

function setup() {

  createCanvas(640, 360);

​

  //pretend we want spiders hanging off of point 8, 0, and 13

  bobs.push(new bobClass(8));

  bobs.push(new bobClass(0));

  bobs.push(new bobClass(13));

​

  gravity = createVector(0, 0.9);

​

  //you can change the maxNumHands if you want more than 1

  handsfree = new Handsfree({

    showDebug: true,

    hands: true,

    maxNumHands: 1

  })

​

  handsfree.start();

​

}

​

//DRAW------------------------------------------

function draw() {

  background(200);

  drawHand();

}

​

//------------------------------------------

function drawHand() {

​

  //if the hands exist in the video

  if (handsfree.data.hands) {

    if (handsfree.data.hands.multiHandLandmarks) {

​

      //get the associated data points

      var landmarks = handsfree.data.hands.multiHandLandmarks;

      var nHands = landmarks.length;

​

      //draw the first hand

      if (nHands > 0) {

        var hand = landmarks[0];

        var rescaledHand = rescaleHand(hand);

​

        strokeWeight(2);

        stroke(255);

        fill(0);

​

        for (let i = 0; i < bobs.length; i++) {

          let currentBob = bobs[i];

          let handPoint = rescaledHand[currentBob.relatedHandPoint];

          currentBob.move(handPoint);

          currentBob.display(handPoint);

        }

      }

​

      if (showPoints) {

        drawDebugPoints(landmarks);

      }

​

    }

  }

}

​

//CLASS--------------------------------------------------------

class bobClass {

  constructor(relatedHandPoint) {

    //how where the bobs are placed 

    this.position = createVector(0, 0);

    this.velocity = createVector(0, 0);

    this.relatedHandPoint = relatedHandPoint;

  }

​

  move(anchor) {

    let vectorAnchor = createVector(anchor.x, anchor.y);

    let force = p5.Vector.sub(this.position, vectorAnchor);

    let x = force.mag() - restLength;

    force.normalize();

    force.mult(-1 * k * x);

​

    // F = A

    this.velocity.add(force);

    this.velocity.add(gravity);

    this.position.add(this.velocity);

    this.velocity.mult(0.90);

​

  }

​

  display(anchor) {

    // drawing the actual shape

    line(anchor.x, anchor.y, this.position.x, this.position.y);

    circle(this.position.x, this.position.y, 40);

  }

}

​

//----------------------------------------------------------------

function drawDebugPoints(landmarks) {

  var nHands = landmarks.length;

  fill("black");

  noStroke();

  for (var h = 0; h < nHands; h++) {

    for (var i = 0; i <= 20; i++) {

      var px = landmarks[h][i].x;

      var py = landmarks[h][i].y;

​

      px = map(px, 0, 1, width, 0);

      py = map(py, 0, 1, 0, height);

      text(i, px + 5, py);

      circle(px, py, 10);

    }

  }

}

​

//YOU DONT NEED TO KNOW HOW THIS WORKS

function rescaleHand(hand) {

  //here we change the values of each 

  //of the objects in the array

  //to be from 0 to width or height instead of 0 to 1

  //you can mostly ignore how this works, but know

  //that it remaps the values of the hand points to 

  //fit better within the p5 canvas

​

  //the Array.map function IS NOT THE SAME AS THE p5 map function

  return hand.map(

    function(point) {

      return {

        x: map(point.x, 0, 1, width, 0),

        y: map(point.y, 0, 1, 0, height)

      }

    });

}