let video;

let predictions = [];

​

let slider;

​

let pg;

let pg2;

let pointerX;

let pointerY;

​

let pPointerX;

let pPointerY;

​

let cameraH;

let cameraW;

​

let posterSpaceH;

let posterSpaceW;

​

let myFont;

function preload() {

  myFont = loadFont('GT-Cinetype-Bold-Trial.otf');

}

​

function setup() {

  // background(255, 0, 0);

  cameraH = 445;

  cameraW = 594;

  posterSpaceH = 840;

  posterSpaceW = 594;

  createCanvas(900, 900);

  video = createCapture(VIDEO);

  video.size(cameraW, cameraH);

​

  pixelDensity(1);

  pg = createGraphics(cameraW, cameraH);

  handpose = ml5.handpose(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

  handpose.on("predict", results => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

  slider = createSlider(1, 30, 3);

  slider.position(20, 50);

  slider.style('width', '120px');

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  fill(20);

  rect(width / 2 - posterSpaceW / 2, 30, posterSpaceW, 830);

  push();

  translate(video.width, 0);

  scale(-1, 1);

  image(video, -width / 2 + cameraW / 2, height / 2 - cameraH / 2, cameraW, cameraH);

  filter(GRAY);

  // filter(BLUR, 1);

  filter(THRESHOLD);

  image(pg, -width / 2 + cameraW / 2, height / 2 - cameraH / 2, cameraW, cameraH);

  drawKeypoints();

  pop();

  push();

  fill(158, 11, 15);

  textSize(115);

  textFont(myFont);

  text("FINGER", 190, 160);

  text("PAINTING", 190, 250);

  textSize(30);

  text("Poster Maker v.1", 230, 750);

  pop();

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = predictions[i];

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      // fill(0, 0, 255);

      // noStroke();

      // text(j, keypoint[0], keypoint[1]);

      // ellipse(keypoint[0], keypoint[1], 6, 6);

      // print(prediction.landmarks[8][1]);

      pointerX = prediction.landmarks[8][0];

      pointerY = prediction.landmarks[8][1];

      // print(pointerX, pointerY);

​

      pg.stroke(158, 11, 15);

      pg.strokeWeight(slider.value());

      pg.line(pointerX, pointerY, pPointerX, pPointerY);

​

      pPointerX = pointerX;

      pPointerY = pointerY;

    }

  }

}

​

// function mousePressed() {

//   pg.clear();

// }

​

function keyTyped() {

  if (key === "s") {

    saveFrames("fingerpaint", "png", 1, 1);

  }

}