Hand FILTER LIVE

let impact;

let video;

let handpose;

let hands;

var img;

var y = 0;

var rec_on;

​

// Font laden

function preload() {

  impact = loadFont('Impact.ttf');

  rec_on = loadImage("RecButton2.png");

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  handpose = ml5.handpose(video, modelLoaded);

  textFont(impact);

}

​

function draw() {

  background(0, 10);

  //tint(100);

  image(video, 0, 0);

​

  if (hands && hands.length > 0) {

    fill(223, 33,33);

    tint(240,240,255);

    //filter(DILATE);

    stroke(223, 33,33);

    //noStroke();

    textSize(60);

    textAlign(CENTER, BOTTOM);

    //Textgröße abhängig von Position auf Y Achse

    let s = map(hands[0].landmarks[0][1], 0, height, 10, 250);

    textSize(s/2);

    //Konturgröße abhängig von Position auf X Achse

  //  let c = map(hands[0].landmarks[0][0], 0, width, 10, 250);

    //strokeWeight(c/20);

    let c = map(hands[0].landmarks[0][0], 0, width, 10, 250);

    filter(BLUR,c/20);

    //rotate(rad(hands[0].landmarks[0][1]/hands[0].landmarks[16][1]));

    //push();

    // Finger tips: 4, 8, 12, 16, 20

    // Finger roots: 1, 7, 9, 13, 17

    // Winkel zw. 2 Punkten: Math.atan2(p2.y - p1.y, p2.x - p1.x);

    push();

    let a = Math.atan2(hands[0].landmarks[20][1] - hands[0].landmarks[17][1], hands[0].landmarks[20][0] - hands[0].landmarks[17][0]) + PI/2;

    translate(hands[0].landmarks[20][0], hands[0].landmarks[20][1]);

    rotate(a);

    text("L", 0, 0);

    pop();

    push();

    a = Math.atan2(hands[0].landmarks[16][1] - hands[0].landmarks[13][1], hands[0].landmarks[16][0] - hands[0].landmarks[13][0]) + PI/2;

    translate(hands[0].landmarks[16][0], hands[0].landmarks[16][1]);

    rotate(a);

    text("I", 0, 0);

    pop();

    push();

    a = Math.atan2(hands[0].landmarks[12][1] - hands[0].landmarks[9][1], hands[0].landmarks[12][0] - hands[0].landmarks[9][0]) + PI/2;

    translate(hands[0].landmarks[12][0], hands[0].landmarks[12][1]);

    rotate(a);

    text("V", 0, 0);

    pop();

    push();

    a = Math.atan2(hands[0].landmarks[8][1] - hands[0].landmarks[5][1], hands[0].landmarks[8][0] - hands[0].landmarks[5][0]) + PI/2;

    translate(hands[0].landmarks[8][0], hands[0].landmarks[8][1]);

    rotate(a);

    text("E", 0, 0);

    pop();

  //Rec Button auf Handfläche

  //  push();

  //  imageMode(CENTER);

  //  a = Math.atan2(hands[0].landmarks[9][1] - hands[0].landmarks[0][1], hands[0].landmarks[9][0] - hands[0].landmarks[0][0]) + PI/2;

  //  translate(hands[0].landmarks[9][0], hands[0].landmarks[0][1]);

  //  rotate(a);

  //  image(rec_on, 0,-70, 90,90);

  //  pop();

    //Rec Button auf Daumen

    push();

    imageMode(CENTER);

    a = Math.atan2(hands[0].landmarks[4][1] - hands[0].landmarks[1][1], hands[0].landmarks[4][0] - hands[0].landmarks[1][0]) + PI/2;

    translate(hands[0].landmarks[4][0], hands[0].landmarks[4][1]);

    rotate(a);

    scale(s/120);

    image(rec_on,0,0,60,60);

    pop();

    //image(rec_on, hands[0].landmarks[9][0], hands[0].landmarks[0][1]-120, 60,60);

    //fill(223, 33,33);

    //ellipse(580,60,60,60);

    noStroke();

    fill(240);

    strokeWeight(1);

    textSize(20);

    text("left right for weight, up down for size",300,450);

  }

  else{

    noStroke();

    fill(240);

    textSize(20);

    textAlign(CENTER,CENTER);

    //tint(100);

    filter(GRAY);

    text("show right hand to go live",300,450 );

  }

}

​

// When the model is loaded

function modelLoaded() {

  console.log('Handpose loaded!');

  handpose.on('predict', gotHands);

}

​

// Listen to new 'predict' events

function gotHands(results) {

  hands = results;

}

​

​

// Listen to new 'predict' events

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

  predictions = results;

});