drawingByFinger_Final - OpenProcessing

mySketch.js
xxxxxxxxxx
 
//TEAM : Minjeong Won, Laila Fan, Rita Qiu
//plz make a full screen to see our sketch
//all the members work together.
​
let handpose;
let video;
let predictions = [];
​
​
function setup() {
  createCanvas(1280, 800);
  background(100);
  rect(0,0,700,480);  // This is the canvas for drawing
  video = createCapture(VIDEO); //creating video
  video.size(640, 480);
​
  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();
 
  // button for save the canvas
  clearbutton = createButton('SAVE');
  clearbutton.position(-width/11 ,550, 'relative');
  clearbutton.size(70, 50);
  clearbutton.style('font-size', '20px');
  clearbutton.mousePressed(saveme);
}
​
function modelReady() {
  console.log("Model ready!");
}
​
function draw() {
  translate(width, 0) // 
  scale(-1.0, 1.0) // to flip the video about y axis
  
  image(video, 0, 0, 640, 480); //draw image with video in every frame
  
​
  // shows the finger points and draw on the canvas
  drawKeypoints();
  
}
function saveme() //function to save canvas
{
  saveCanvas();
}
function drawKeypoints() {
  let whichjoint = 3; // this is the fingerpoint of the all joints
  if(predictions.length>0)
  { 
    let ifinger = predictions[0].annotations.indexFinger;
      ellipse(ifinger[whichjoint][0], ifinger[whichjoint][1], 10, 10); //show the indexfinger point in the video
    let thumb = predictions[0].annotations.thumb;
      ellipse(thumb[whichjoint][0], thumb[whichjoint][1], 10, 10); //show the finger point of thumb in the video
    let palm = predictions[0].annotations.palmBase[0]
    let mfinger = predictions[0].annotations.middleFinger[3];
    
    
    //get the color from video pixels
    let c = video.get((ifinger[whichjoint][0]+thumb[whichjoint][0])/2, (ifinger[whichjoint][1]+thumb[whichjoint][1])/2);
    r = c[0];
    g = c[1];
    b = c[2];     
    
   //if the third finger is closer to wrist, start drawing. if not, stop drawing
    if(dist(mfinger[0], mfinger[1], palm[0], palm[1])<80){
      translate(640, 0)
      noStroke(0)
      fill(r, g, b)
      ellipse((ifinger[whichjoint][0]+thumb[whichjoint][0])/2, (ifinger[whichjoint][1]+thumb[whichjoint][1])/2, 50, 50);}
    else{
    fill(255)
    }
    
    //to erase the canvas, fold index finger 
    if(dist(ifinger[whichjoint][0], ifinger[whichjoint][1],palm[0], palm[1])<90){
    translate(640, 0)
    fill(255)
    rect(0,0,700,480);
    }
  }
  }
​
​
​
​
​
​
​
​