let springs = [];

let spacing = 1;

let k = 0.000001;

let g = 0.000;

let gravity;

​

let handpose;

let video;

let hands = [];

let isPinching = false;

​

let lastPosX;

let lastPosY;

​

let selectedP;

​

function preload() {

  handpose = ml5.handpose();

}

​

function setup() {

  createCanvas(640, 480);

​

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

​

  handpose.detectStart(video, gotHands);

​

  let startPointX = random(0, width);

  let startPointY = random(0, height);

  particles[0] = new Particle(startPointX, startPointY);

​

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

    if (i != 0) {

      particles[i] = new Particle(random(0, width), random(0, height));

​

      let a = particles[i];

      let b = particles[floor(random(1, i - 1))];

      let spring = new Spring(k, spacing, a, b);

      springs.push(spring);

    }

  }

​

  particles[0].locked = true;

  gravity = createVector(0, g);

}

​

function draw() {

  background(30);

  // clearBG(20);

​

  //   push();

  translate(width, 0);

  scale(-1, 1);

  // image(video, 0, 0, width, height);

  // tint(255,3);

  // pop();

​

  // SPRING CODE

​

  for (let s of springs) {

    // setLineDash([0.5,8]);

    s.update();

    s.show();

  }

​

  noFill();

  // setLineDash([5,10]);

  strokeCap(ROUND);

  stroke(255, 50, 0, 255);

  strokeWeight(2);

​

  beginShape();

​

  for (let p of particles) {

    p.applyForce(gravity);

    p.update();

    curveVertex(p.position.x, p.position.y);

    push();

    fill(0, 100, 255);

    stroke(0, 100, 255);

    p.show();

    pop();

  }

​

  endShape();

​

  // HAND POSE CODE

​

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

    let hand = hands[i];

    for (let j = 0; j < hand.keypoints.length; j++) {

      let keypoint = hand.keypoints[j];

​

      stroke(255);

      strokeWeight(3);

      point(keypoint.x, keypoint.y);

​

      // circle(keypoint.x, keypoint.y, 5);

    }

​

    let finger = hands[i].index_finger_tip;

    let thumb = hands[i].thumb_tip;

​

    let centerX = (finger.x + thumb.x) / 2;

    let centerY = (finger.y + thumb.y) / 2;

    let pinch = dist(finger.x, finger.y, thumb.x, thumb.y);

    if (pinch < 25) {

      isPinching = true;

​

      let minDist = width;

​

      for (let p of particles) {

        let dp = dist(centerX, centerY, p.position.x, p.position.y);

​

        if (dp < minDist && dp < 50) {

          minDist = dp;

          selectedP = p;

        }

      }

​

      if (selectedP) {

        selectedP.position.set(centerX, centerY);

        selectedP.velocity.set(0, 0);

        lastPosX = selectedP.position.x;

        lastPosY = selectedP.position.y;

      }

    } else if (pinch > 25 && selectedP) {

      isPinching = false;

      selectedP.position.set(lastPosX, lastPosY);

      // selectedP.locked = true;

    }

​

    // text(isPinching, centerX, centerY - 50);

    // text(pinch, centerX, centerY - 25);

  }

}

​

function gotHands(results) {

  hands = results;

}

​

function setLineDash(list) {

  drawingContext.setLineDash(list);

}

​

function clearBG(val) {

  loadPixels();

​

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

    pixels[i + 3] -= val;

  }

  updatePixels();

}

​