​

let facemesh;

let video;

let predictions = [];

let canvas_w = 700;

let canvas_h = 600;

let video_w = 640;

let video_h = 480;

let margin_left = 30;

let margin_top = 50;

let clr = random();

let keypointsX = [];

var keys = false; // Added to indicate whether to show red circles or not

var mouse = false;

//let micLevel;

//let mic; 

​

function rasterizeVideo() {

  let tiles = float(100);

  let tileSize = float(canvas_w / tiles) * 0.8;

  translate(margin_left + tileSize / 2, margin_top + tileSize / 2);

  let x, y;

  colorMode(HSB, 255);

  for (x = 0; x < tiles; x++) {

    for (y = 0; y < tiles; y++) {

      let c = video.get(x * tileSize, y * tileSize);

      let brightnessVal = brightness(c);

      let size = map(brightnessVal, 0, 255, tileSize, 0);

      fill("green");

      noStroke();

      rect(x * tileSize, y * tileSize, size, size);

    }

  }

}

​

function preload() {

  monitor = loadImage("monitor.png");

  keyboard = loadImage("keyboard.png");

  wall = loadImage("wall.png");

  city = loadImage("city.png");

  desk = loadImage("desk.png");

  stuff1 = loadImage("stuff1.png");

  stuff2 = loadImage("stuff2.png");

}

​

function setup() {

  createCanvas(canvas_w, canvas_h);

  video = createCapture(VIDEO);

  video.size(video_w, video_h);

​

  facemesh = ml5.facemesh(video, modelReady);

​

  facemesh.on("predict", (results) => {

    predictions = results;

  });

​

  video.hide();

  nose_x = 0;

​

  mic = new p5.AudioIn();

  mic.start();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  drawBackground();

  fill("black");

​

  translate(canvas_w, 0);

  scale(-1, 1);

​

  image(video, -margin_left - video_w, margin_top, video_w, video_h);

​

  rasterizeVideo();

  resetMatrix();

  colorMode(RGB, 255);

​

  drawKeypoints();

  drawForeground();

  micLevel = mic.getLevel();

}

​

function drawBackground() {

  background("black");

}

​

function drawBox() {

  noFill();

  square(nose_x, height / 2, 100);

}

​

function drawKeypoints() {

  let keypointsX = [];

​

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

    const keypoints = predictions[i].scaledMesh;

​

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

      const [x, y] = keypoints[j];

      keypointsX[j] = x;

      if (j == 6) {

        nose_x = x;

      }

      push();

      translate(margin_left, margin_top);

      textAlign(CENTER, CENTER);

      if (keys) { // Draw circles only if keys is true

        noStroke();

        let loud = map (micLevel,0,10,4,width);

        fill("red");

        circle(x, y, loud);

      }

      if (mouse) {

        noStroke();

        fill("blue");

        circle(x,y,5);

      }

      pop();

    }

  }

}

​

​

function toggleCircles() {

  keys = !keys; 

}

​

function toggleMouse() {

  mouse = !mouse; 

}

​

function drawForeground() {

  drawBox();

  paraWind = map(nose_x, 0, width, -10, 10);

  paraWall = map(nose_x, 0, width, -50, 50);

  paraComp = map(nose_x, 0, width, -75, 75);

  paraKey = map(nose_x, 0, width, -100, 100);

​

  //background window

  image(city, paraComp - 195, 0);

​

  //background wall

  image(wall, paraComp - 175, 0);

​

  //desk

  image(desk, paraKey - 175, 0);

​

  //computer monitor

  fill(0, 0, 0, 120);

  rect(paraKey + 200, 100, 280, 270); //monitor black mirror

​

  image(monitor, paraComp - 175, 0);

​

  //computer keyboard

  image(keyboard, paraKey - 175, 0);

​

  //mess

  image(stuff2, paraComp - 175, 0);

  image(stuff1, paraKey - 175, 0);

 let button = createButton("");

  button.position(paraKey + 300, 520);

  button.size(250, 100);

  button.style("background-color", "transparent"); 

  button.style("border", "none"); // Remove the border

  button.mousePressed(toggleCircles);

let mouseButton = createButton("");

  mouseButton.position(paraKey + 560, 520);

  mouseButton.size(100, 120);

  mouseButton.style("background-color", "transparent");

  mouseButton.style("border", "none"); // Remove the border

  mouseButton.mousePressed(toggleMouse);

​

}

​