contours

// DPD 2020

//

// trying out opencv

// reference code https://kylemcdonald.github.io/cv-examples/ContourDetection-opencvjs/sketch.js

// a webcam is required 

// schien@mail.ncku.edu.tw, 2020-12-30

​

​

​

var capture;

var w = 640;

var h = 480;

​

function setup() {

    capture = createCapture({

        audio: false,

        video: {

            width: w,

            height: h

        }

    }, function() {

        console.log('capture ready.')

    });

    capture.elt.setAttribute('playsinline', '');

    capture.size(w, h);

    createCanvas(w, h);

    capture.hide();

}

​

var captureMat, gray, blurred, thresholded;

var contours, hierarchy;

function cvSetup() {

    captureMat = new cv.Mat(h, w, cv.CV_8UC4);

    gray = new cv.Mat(h, w, cv.CV_8UC1);

    blurred = new cv.Mat(h, w, cv.CV_8UC1);

    thresholded = new cv.Mat(h, w, cv.CV_8UC1);

}

​

var ready = false;

function cvReady() {

  if(!cv) {

    console.log('cv not available.');

    return false;

  }

  //if(!cv.loaded) {

  //  console.log('cv not loaded.');

  //  return false;

  //}

  if(ready) return true;

  cvSetup();

  ready = true;

  console.log('cv ready.');

  return true;

}

​

var showThresholded = false;

function draw() {

  if (cvReady()) {

    capture.loadPixels();

    if (capture.pixels.length > 0) {

      captureMat.data.set(capture.pixels);

​

      var blurRadius = 50;

      blurRadius = map(blurRadius, 0, 100, 1, 10);

​

      var threshold = 50;

      threshold = map(threshold, 0, 100, 0, 255);

​

      cv.cvtColor(captureMat, gray, cv.COLOR_RGBA2GRAY, 0);

      var ksize = new cv.Size(blurRadius, blurRadius);

      var anchor = new cv.Point(-1, -1);

      cv.blur(gray, blurred, ksize, anchor, cv.BORDER_DEFAULT);

      cv.threshold(blurred, thresholded, threshold, 255, cv.THRESH_BINARY);

​

      if (showThresholded) {

          var src = thresholded.data;

          var dst = capture.pixels;

          var n = src.length;

          var j = 0;

          for (var i = 0; i < n; i++) {

              dst[j++] = src[i];

              dst[j++] = src[i];

              dst[j++] = src[i];

              dst[j++] = 255;

          }

          capture.updatePixels();

      }

​

      contours = new cv.MatVector();

      hierarchy = new cv.Mat();

      var offset = new cv.Point(0, 0);

      cv.findContours(thresholded, contours, hierarchy, 3, 2, offset);

    }

​

    image(capture, 0, 0, w, h);

​

    if (contours && !showThresholded) {

      noStroke();

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

        fill(0, 0, 255, 128);

        var contour = contours.get(i);

        var cnt = contour.total();

        //var chn = contour.channels();

        //var tye = contour.type();

        //var r = contour.row;

        //var c = contour.col;

        //var n = contour.checkVector(chn);

        //var st = contour.step();

        //var kd = contour.isVector();

        //console.log('contour total: ' + cnt);

        //console.log('contour channels: ' + chn);

        //console.log('contour type: ' + tye);

        //console.log('contour rows: ' + r.length);

        //console.log('contour cols: ' + c.length);

        //console.log('contour elements: ' + n);

        beginShape();

        var k = 0;

        for (var j = 0; j < contour.total(); j++) {

          //var x = contour.step();

          //console.log('element of a contour: ' + x);

            //var x = contour.get_int_at(k++);

            //var y = contour.get_int_at(k++);

            //vertex(x, y);

        }

        endShape(CLOSE);

​

        noFill();

        stroke(255, 255, 255)

        var box = cv.boundingRect(contour);

        rect(box.x, box.y, box.width, box.height);

​

      }

    }

  }

}

​

function mousePressed() {

  showThresholded = !showThresholded;

}