drawable mirror

// create buffer variables to work on different layers

// video buffer handles the background video

let videoBuffer;

// frame buffer handles the grey canvas plattform that can change shape

let frameBuffer;

// draw buffer handles the input by hands/mouse

let drawBuffer;

​

let sizeSlider;

let lastInput;

let input;

let video;

let handpose;

let hands;

​

function setup() {

  createCanvas(800, 800);

  background('white');

  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();

  video = createCapture(VIDEO);

  video.size(windowWidth, windowHeight);

  video.hide();

  handpose = ml5.handpose(video, modelLoaded);

  // setup buffer as graphics

  videoBuffer = createGraphics(800, 800);

  frameBuffer = createGraphics(800, 800);

  drawBuffer = createGraphics(800, 800);

}

​

function draw() {

  // render different layers

  drawVideo();

  drawFrame();

  drawCanvas();

  // show current layers states

  image(videoBuffer, 0, 0);

  image(frameBuffer, 0, 0);

  image(drawBuffer, 0, 0);

  drawDate();

}

​

// take current screenshot

function savePicture() {

    save('screenshot.png')

}

​

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

  })

}

​

function drawVideo() {

  videoBuffer.image(video, 0, 0, width, height);

}

​

function drawFrame() {

  lastInput = input;

  input = sizeSlider.value();

  if (lastInput != input) {

    frameBuffer.noStroke();

    frameBuffer.clear();

    frameBuffer.fill(220, 240);

    frameBuffer.rectMode(CENTER);

    //frameBuffer.background(255);

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

  }

}

​

function drawCanvas() {

  drawBuffer.noStroke();

  if (mouseIsPressed) {

    drawBuffer.fill(penColor);

    drawBuffer.ellipse(mouseX, mouseY, 20, 20);

  }

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

    drawBuffer.fill(penColor);

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

  }

}

​

​

​

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

}