let options = {

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

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

}

​

let drawCount = 0;

let resCount = 0;

​

let cam;

​

let img

​

let partMask;

let personMask;

let bgMask;

​

function preload() {

  img = loadImage('assets/marielle.jpg');

  bodypix = ml5.bodyPix(options);

}

​

function setup() {

  createCanvas(600, 400);

  noSmooth();

  let d = 5;

  cam = createCapture(VIDEO);

  cam.size(width/d,height/d);

  cam.hide();

  bodypix.segmentWithParts(cam,gotResults,options);

}

​

function draw() {

  background(0,0,255);

  noTint();

  if (partMask != null &&

      personMask != null &&

      bgMask   != null) {

    partMask.mask(personMask);

​

    tint(0,0,0);

    image(partMask,0,0,width,height); 

    let scale = 0.90

    tint(0,0,255);

    image(partMask,0,0,

          width*scale+50,height*scale+50); 

​

  }

}

​

​

function gotResults(err,res) {

  if (err) {

    console.log(err);

    return;

  }

  partMask = res.partMask;

  personMask = res.personMask;

  bgMask = res.backgroundMask;

  bodypix.segmentWithParts(cam,gotResults,options);

}

​

​

// ROTEIRO

// 0) apresentação

// 1) o que é ml5 (ml5js.org) e BodyPix

// 2) boiler plate (ml5/BodyPix)

// 3) .segment()

// 4) .segmentWithParts()

// 5) explorando segmentações