let cvFlag = false;

​

const w = 640;

const h = 480;

​

function setup() {

  canvas = createCanvas(w, h);

  pg = createGraphics(width, height);

​

  capture = createCapture(VIDEO);

  capture.size(640, 480);

  capture.hide();

}

​

function draw() {

  background(120);

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

  pg.image(capture, 0, 0, width, height);

​

  if (cvFlag) {

    // let src = cv.imread(pg.elt);

    // let dst = new cv.Mat();

    // cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);

    // cv.imshow(canvas.elt, dst);

    // src.delete();

    // dst.delete();

    // 色の抽出・二値化

    const srcMat = cv.imread(pg.elt);

    const binMat = new cv.Mat();

    const minMat = cv.matFromArray(1,3,cv.CV_8UC1,[0, 128, 128]);

    const maxMat = cv.matFromArray(1,3,cv.CV_8UC1,[10, 255, 255]);

    cv.cvtColor(srcMat, binMat, cv.COLOR_RGB2HSV_FULL);

    cv.inRange(binMat, minMat, maxMat, binMat);

​

    //輪郭の抽出

    let contours = new cv.MatVector();

    let hierarchy = new cv.Mat();

    cv.findContours(binMat, contours, hierarchy, cv.RETR_LIST, cv.CHAIN_APPROX_SIMPLE, {

        x: 0,

        y: 0

    });

​

    /*

    for (let i = 0; i < contours.size(); i++)

    {

      var cnt = contours.get(i);

      var area = cv.contourArea(cnt, false);

      let color = new cv.Scalar(255, 0, 0);

      cv.drawContours(mask, contours, i, color, -1);

    }

    */

​

    //let color = new cv.Scalar(255, 0, 0);

    //cv.drawContours(mask, contours, 0, color, -1);

​

    //let drawCs = new cv.Mat();

    //var cnt = contours.get(0);

    //var area = cv.contourArea(cnt, false);

​

    //cv.drawContours(mask, contours, 0, 128, 1);

    let cx, cy;

    let m00, m01, m10, m11, m02, m20;

    let theta;

    if (contours.size() > 0){

      let M = cv.moments(binMat, false);

      m00 = M.m00;

      m01 = M.m01;

      m10 = M.m10;

      m11 = M.m11;

      m02 = M.m02;

      m20 = M.m20;

      cx = (m00 > 0) ? m10/m00 : 0;

      cy = (m00 > 0) ? m01/m00 : 0;

      let cnt = contours.get(0);

      print(cnt);

      let rotatedRect = cv.minAreaRect(cnt);

      //print(rotatedRect.center);

      let rx = rotatedRect.center.x;

      let ry = rotatedRect.center.y;

​

      circle(rx/2,ry/2,30,30);

      circle(cx/2,cy/2,50,50);

    }

    //cv.imshow(canvas.elt, binMat);

    srcMat.delete();

    binMat.delete();

  }

}

​

window.addEventListener("load", (event) => {

  console.log("The page has fully loaded");

​

  let script = document.createElement("script");

  script.addEventListener("load", (event) => {

    console.log("opencv.js file has been loaded");

    cv["onRuntimeInitialized"] = () => {

      console.log("onRuntimeInitialized");

      cvFlag = true;

    };

  });

​

  script.src = "https://docs.opencv.org/4.7.0/opencv.js";

  document.body.appendChild(script);

});