​

                                 👻👻👻👻👻👻

                               👻Spectral Lights👻

                                 👻👻👻👻👻👻

​

​

                              by Danny Baghdasarians

                                                                                                              [Using ml5.js Machine Learning Library]

               👻[Mouse Click]: Change Locations of Spectral Lights👻                                                                                            

*/

​

//

// Declaring our Variables

//

let faceapi;

let video;

let detections;

let backgroundImage;

let randLocationX = [];

let randLocationY = [];

let randScale = [];

const detection_options = {

  withLandmarks: true,

  withDescriptors: false,

};

​

//

// Preloading our Images

//

function preload() {

  backgroundImage = loadImage("Background.jpg");

}

​

//

// Setting up our variables and Canvas

//

function setup() {

  createCanvas(450, 400);

​

  // load up your video

  video = createCapture(VIDEO);

  video.size(width, height);

  faceapi = ml5.faceApi(video, detection_options, modelReady);

​

  setArrays();

}

​

//

// Make our background an image

//

function drawBackground() {

  background(backgroundImage);

}

​

//

// Filling our Arrays for location and scale

//

function setArrays() {

  for (let i = 0; i < 15; i++) {

    let randomLocationX = random(-100, 200);

    let randomLocationY = random(-100, 200);

    let randomScale = random(0.1, 1);

​

    randLocationX[i] = randomLocationX;

    randLocationY[i] = randomLocationY;

    randScale[i] = randomScale;

  }

}

​

//

// Check to see if the model is good to go

//

function modelReady() {

  faceapi.detect(gotResults);

}

​

//

// If all good to go, spawn in our spectral figures

//

function gotResults(err, result) {

  if (err) {

    console.log(err);

    return;

  }

  detections = result;

​

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

  if (detections) {

    if (detections.length > 0) {

      randomSpawner(detections);

    }

  }

  faceapi.detect(gotResults);

}

​

//

// Spawn in our spectral figures randomly

//

function randomSpawner(detections) {

  drawBackground();

​

  for (let i = 0; i < 15; i++) {

    push();

    translate(randLocationX[i], randLocationY[i]);

    scale(randScale[i]);

    drawFace(detections);

    drawLandmarks(detections);

    pop();

  }

}

​

//

// Draw the Ellipsoids that create our face and spectral lines

//

function drawFace(detections) {

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

    const alignedRect = detections[i].alignedRect;

    const x = alignedRect._box._x;

    const y = alignedRect._box._y;

    const boxWidth = alignedRect._box._width;

    const boxHeight = alignedRect._box._height;

​

    let rand = random(220, 255);

​

    noStroke();

    for (let j = 0; j < 20; j++) {

      push();

      let randAlpha = random(50, 150);

​

      fill(rand - j * 10, rand - j * 10, rand - j * 10, randAlpha);

      ellipse(x + 50, y + 30, boxWidth - 5 * j, boxHeight + 30 * j);

      pop();

    }

​

    fill(rand, rand, rand, 150);

    ellipse(x + 50, y + 30, boxWidth - 5, boxHeight + 30);

  }

}

​

//

// Setup our facial features

//

function drawLandmarks(detections) {

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

    const mouth = detections[i].parts.mouth;

    const nose = detections[i].parts.nose;

    const leftEye = detections[i].parts.leftEye;

    const rightEye = detections[i].parts.rightEye;

    const rightEyeBrow = detections[i].parts.rightEyeBrow;

    const leftEyeBrow = detections[i].parts.leftEyeBrow;

​

    drawPart(mouth, true);

    drawPart(nose, false);

    drawPart(leftEye, true);

    drawPart(leftEyeBrow, false);

    drawPart(rightEye, true);

    drawPart(rightEyeBrow, false);

  }

}

​

//

// Draw our facial features

//

function drawPart(feature, closed) {

  beginShape();

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

    const x = feature[i]._x;

    const y = feature[i]._y;

    vertex(x, y - 10);

    noStroke();

    fill(200, 200, 200);

  }

​

  if (closed === true) {

    endShape(CLOSE);

  } else {

    endShape();

  }

}

​

//

// Click to change spectral locations and scales randomly

//

function mousePressed() {

  setArrays();

}

​