笑い男メーカー

概要

p5.js と ml5.js を利用して、Web カメラからリアルタイムで顔の検出 + 笑い男化するクソアプリを作りました。 デモを用意しているので、ぜひ実際にやってみてください。

demo: https://editor.p5js.org/bighope-lumiere/sketches/CcOtWZA-e

コード

処理自体は顔の検出と、検出した顔の四角形に対して gif 画像を載せて描画するだけなので非常にかんたんです。 顔になんかする系のクソアプリを作成する際に使えると思いますので、ぜひ試してみてください。

let faceapi;
let video;
let detections;

const detection_options = {
  withLandmarks: true,
  withDescriptors: false,
};

let mask;
function preload() {
  mask = loadImage("waraiotoko.gif");
}

function setup() {
  createCanvas(360 * 2, 270 * 2);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
  faceapi = ml5.faceApi(video, detection_options, modelReady);
  textAlign(RIGHT);
}

function modelReady() {
  console.log("ready!");
  console.log(faceapi);
  faceapi.detect(gotResults);
}

function gotResults(err, result) {
  if (err) {
    console.log(err);
    return;
  }
  detections = result;

  background(255);
  image(video, 0, 0, width, height);
  if (detections) {
    if (detections.length > 0) {
      drawBox(detections);
    }
  }
  faceapi.detect(gotResults);
}

function drawBox(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;

    noFill();
    stroke(161, 95, 251);
    strokeWeight(2);
    rect(x, y, boxWidth, boxHeight);
    image(mask, x, y, boxWidth, boxHeight);
  }
}