var detections = [];

​

let video;

let canvas;

let img;

let rotated = false;

​

function preload() {

  img = loadImage('assets/cheems.png');

  img1 = loadImage('assets/cheems1.png')

}

​

function setup() {

  canvas = createCanvas(480, 360);

  canvas.id("canvas");

​

  video = createCapture(VIDEO);// Creat the video: ビデオオブジェクトを作る

  video.id("video");

  video.size(width, height);

​

  const faceOptions = {

    withLandmarks: true,

    withExpressions: false,

    withDescriptors: false,

    minConfidence: 0.5

  };

​

  //Initialize the model: モデルの初期化

  faceapi = ml5.faceApi(video, faceOptions, faceReady);

}

​

function faceReady() {

  faceapi.detect(gotFaces);// Start detecting faces: 顔認識開始

}

​

// Got faces: 顔を検知

function gotFaces(error, result) {

  if (error) {

    console.log(error);

    return;

  }

​

  detections = result;　//Now all the data in this detections: 全ての検知されたデータがこのdetectionの中に

  // console.log(detections);

​

  clear();//Draw transparent background;: 透明の背景を描く

  // drawBoxs(detections);//Draw detection box: 顔の周りの四角の描画

  // drawLandmarks(detections);//// Draw all the face points: 全ての顔のポイントの描画

  // drawExpressions(detections, 20, 250, 14);//Draw face expression: 表情の描画

  faceapi.detect(gotFaces);// Call the function again at here: 認識実行の関数をここでまた呼び出す

}

​

function drawBoxs(detections){

  if (detections.length > 0) {//If at least 1 face is detected: もし1つ以上の顔が検知されていたら

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

      let {_x, _y, _width, _height} = detections[f].alignedRect._box;

      stroke(44, 169, 225);

      strokeWeight(1);

      noFill();

      rect(_x, _y, _width, _height);

    }

  }

}

​

function drawNonLa() {

  if(detections.length > 0){

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

      x = detections[i].detection._box._x

      y = detections[i].detection._box._y

      w = detections[i].detection._box._width

      h = detections[i].detection._box._height

      image(img, x - 90, y - 70 ,200, 200)

      image(img1, x + 80, y - 70 ,200, 150)

//       if (rotated) {

//         rotate_and_draw_image(x-90, y-70, 200, 200, 50)

​

//         rotated = false;

//       } else {

//         image(img, x - 90, y - 70 ,200, 200)

//         rotate(PI / 180 * 20);

//         rotated = true;

//       }

    }

​

  }

}

​

​

function rotate_and_draw_image(img_x, img_y, img_width, img_height, img_angle){

  imageMode(CENTER);

  translate(img_x+img_width/2, img_y+img_width/2);

  rotate(PI/180);

  image(img, 0, 0, img_width, img_height);

  rotate(-PI / 180 * img_angle);

  translate(-(img_x+img_width/2), -(img_y+img_width/2));

  imageMode(CORNER);

}

​

function draw() {

  drawNonLa();

}