Spiegel Hand Silvana

let sizeSlider;

let lastInput;

let input;

let video;

​

let handpose;

let hands;

​

function setup() {

  createCanvas(800, 800);

  //background('white');

  video = createCapture(VIDEO);

  video.size(800,800);

  video.hide(); 

​

  handpose = ml5.handpose(video, modelLoaded);

  penColor = 'red';

  sizeSlider = createSlider(0, width / 2, width / 4);

  sizeSlider.position(width / 2 +110, windowHeight * 7 / 8);

  sizeSlider.style("width", "400px");

  lastInput = 0;

  input = 0;

  //Create Save Button:

  saveButton = createButton('SAVE')

  saveButton.position(360, 47)

  saveButton.size(80, 30)

  saveButton.style('color', '#fff');

  saveButton.style('font-size', '16px');

  saveButton.style('background-color', '#f0553a');

  saveButton.style('border', 'none');

  saveButton.mousePressed(savePicture);

  drawColorBar();

}

​

function draw() {

​

  //imageMode(CENTER);

  //image(video,width/2,height/2,1000,800);

  //image(video,0,0);

  noStroke();

  background(255,0.1);

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

    fill(penColor);

    ellipse(hands[0].landmarks[8][0]+50, hands[0].landmarks[8][1]+70, 20, 20);

  }

  /// rect to circle

  lastInput = input;

  input = sizeSlider.value();

  if (lastInput != input) {

    push();

    fill(220);

    noStroke();

    rectMode(CENTER);

    background(255);

    rect(width / 2, height / 2, 800, 800, sizeSlider.value());

    pop();

  }

  drawDate()

}

​

//Function to save the picture

function savePicture() {

    save('pic.png')

}

​

//Function to draw the Date on canvas

function drawDate() {

  fill(0)

  textSize(24);

  text(day() + "." + month() + "." + year(), 650, 70)

}

​

function drawColorBar() {

  //create 6 buttons for each color

  btnRed = createButton('')

  btnRed.position(0, 0)

​

  btnOrange = createButton('')

  btnOrange.position(0, height / 6)

​

  btnYellow = createButton('')

  btnYellow.position(0, height / 3)

​

  btnGreen = createButton('')

  btnGreen.position(0, height / 2)

​

  btnBlue = createButton('')

  btnBlue.position(0, height / 1.5)

​

  btnPurple = createButton('')

  btnPurple.position(0, height / 1.2)

  //Create an array of buttons

  btnArr = [btnRed, btnOrange, btnYellow, btnGreen, btnBlue, btnPurple]

  const colorArr = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']

  let i = 0 //Index to switch between colors of colorArr

  //Looping over the Array of buttons and applying styling and functionality on each of them 

  btnArr.forEach((btn) => {

    btn.size(50, height / 6)

    btn.style('border', 'none');

    btn.style('color', '#fff');

    btn.style('background-color', colorArr[i])

    let x = i

    btn.mousePressed(() => {

      penColor = String(colorArr[x])

    })

    i++;

  })

}

​

​

// 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;

});

*/