let video;

let segmentation;

let img;

​

let w;

let h;

​

let step = 0.005;

let amount = 0;

let bg;

​

const options = {

  outputStride: 32, // 8, 16, or 32, default is 16

  segmentationThreshold: 0.5 // 0 - 1, defaults to 0.5 

}

​

function setup() {

  w = 960;

  h = 540;

  // w = 1920;

  // h = 1080;

  // w = windowWidth;

  // h = windowHeight;

  createCanvas(w, h);

​

  // load up your video

  video = createCapture(VIDEO);

  video.size(w, h);

  video.hide(); // Hide the video element, and just show the canvas

  bodypix = ml5.bodyPix(video, modelReady)

}

​

function modelReady() {

  // console.log('ready!')

  bodypix.segment(gotResults, options)

}

​

function draw(){

  if (amount > 1 || amount < 0) {

    step *= -1;

  }

  amount += step;

  let red = color(255, 0, 0);

  let blue = color(0, 0, 255);

  let redBlueLerp = lerpColor(red, blue, amount);

  let blueRedLerp = lerpColor(blue, red, amount);

  bg = color(blueRedLerp);

}

​

function gotResults(err, result) {

  if (err) {

    console.log(err)

    return

  }

  // console.log(result);

  segmentation = result;

​

  background(bg);

  // background(255, 175, 0);

  //image(video, 0, 0, width, height)

  image(segmentation.maskBackground, 0, 0, w, h)

  bodypix.segment(gotResults, options)

}

​

/* 

function windowResized() {

  w = windowWidth;

  h = windowHeight;

  resizeCanvas(windowWidth, windowHeight);

}

*/