stomach, full

/*
 * stomach, full by shibomb.
 *
 * copyright (c) shibomb.
 * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
 */

const DEBUG_MODE = false;

// -------------------------------------
// ml5
// -------------------------------------

const VIDEO_WIDTH = 640;
const VIDEO_HEIGHT = 480;

let video;
let vcFitTo;
let vcScale;
let vcAspectRatio;

let faceMesh;
let faces = [];
let options = { maxFaces: 3, refineLandmarks: false, flipHorizontal: true };

let g1, g2, buffer;

//　call in preload function.
function preloadMl5() {
  // Load the faceMesh model
  faceMesh = ml5.faceMesh(options);
}

//　call in setup function.
function setupMl5() {
  // Create the webcam video and hide it
  video = createCapture(VIDEO);
  video.size(VIDEO_WIDTH, VIDEO_HEIGHT);
  video.hide();

  //
  if (windowHeight > video.height * (windowWidth / video.width)) {
    vcFitTo = "width";
    vcScale = windowWidth / video.width;
    vcAspectRatio = video.width / video.height;
  } else {
    vcFitTo = "height";
    vcScale = windowHeight / video.height;
    vcAspectRatio = video.width / video.height;
  }
  // console.log(vcFitTo);

  // Start detecting faces from the webcam video
  faceMesh.detectStart(video, gotFaces);
}

// Callback function for when faceMesh outputs data
function gotFaces(results) {
  // Save the output to the faces variable
  faces = results;

  // convert video pos to canvas pos
  for (let i = 0; i < faces.length; i++) {
    let face = faces[i];

    if (face.faceOval) {
      const keypoints = [];
      for (let j = 0; j < face.faceOval.keypoints.length; j++) {
        let keypoint = face.faceOval.keypoints[j];

        keypoint.x *= vcScale;
        keypoint.y *= vcScale;
        keypoint.z *= vcScale;
        keypoints.push(keypoint);
      }

      face.faceOval.keypoints = keypoints;
    }
  }
}

//　call in draw function.
function drawVideoFliped() {
  g1.push();
  g1.translate(width, 0);
  g1.scale(-1, 1);
  g1.image(
    video,
    0,
    0,
    width,
    height,
    0,
    0,
    video.width,
    video.height,
    CONTAIN
  );
  g1.pop();
}

// -------------------------------------
// main
// -------------------------------------

let g, gl;

let cc1, cc2;

let c11, c12;
let c21, c22;

let ca1 = 0;
let ca2 = 0.5;
let caa1 = 0.001;
let caa2 = 0.001;

let objs = [];
let MAX = 128;

let keypoints = [];

function preload() {
  preloadMl5();
}

function setup() {
  setupMl5();

  if (vcFitTo == "width") {
    createCanvas(windowWidth, video.height * vcScale);
  } else {
    createCanvas(video.width * vcScale, windowHeight);
  }
  g1 = createGraphics(width, height);
  g2 = createGraphics(width, height);
  g2.translate(g2.width / 2, g2.height / 2);
  buffer = createGraphics(width, height);
}

function draw() {
  background(0, 10);

  // Draw the webcam video
  g1.noErase();
  drawVideoFliped();

  // g1.image(video, 0, 0, width, height);

  for (let i = 0; i < faces.length; i++) {
    g1.erase();
    if (faces[i].faceOval) {
      let parts;
      parts = faces[i].faceOval;
      drawEllipse(parts);
    }
  }

  g2.background(255);
  g2.imageMode(CENTER);
  g2.push();
  {
    g2.rotate(-0.05);
    g2.tint(255, 250);
    // g.image(buffer, 0, 0, g.width * 0.996, g.height * 0.996);
    g2.image(
      buffer,
      noise(frameCount * 0.01) * 10 - 5,
      0,
      g1.width * 0.979,
      g1.height * 0.979
    );
    // g.image(buffer, 0, 0, g.width * 1.004, g.height * 1.04);
  }
  g2.pop();

  g2.image(g1, 0, 0);

  buffer.copy(
    // source
    g2,
    // source x, y, w, h
    0,
    0,
    g2.width,
    g2.height,
    // destination x, y, w, h
    0,
    0,
    buffer.width,
    buffer.height
  );

  //
  image(g2, 0, 0, width, height);
}

function drawEllipse(parts) {
  g1.beginShape();

  g1.curveTightness(0);

  for (let i = 0; i < parts.keypoints.length; i++) {
    let p = parts.keypoints[i];
    g1.curveVertex(p.x, p.y);
  }

  for (let i = 0; i < 3; i++) {
    let p = parts.keypoints[i];
    g1.curveVertex(p.x, p.y);
  }

  g1.endShape();
}