// https://kylemcdonald.github.io/cv-examples/EdgeDetection/

// https://gist.github.com/fritz-c/edf804755f788d6ac7422b3e315529b2

// https://docs.opencv.org/3.3.1/d3/de6/tutorial_js_houghlines.html

// https://en.wikipedia.org/wiki/Hough_transform

​

var capture;

var buffer;

var result;

var lines;

var w = 640,

    h = 480;

​

function setup() {

    capture = createCapture(VIDEO);

    createCanvas(w, h);

    capture.size(w, h);

    capture.hide();

    buffer = new jsfeat.matrix_t(w, h, jsfeat.U8C1_t);

      stroke('red');

    strokeWeight(2);

}

​

function draw() {

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

    capture.loadPixels();

    if (capture.pixels.length > 0) { // don't forget this!        

        var blurSize = select('#blurSize').elt.value;

        var lowThreshold = select('#lowThreshold').elt.value;

        var highThreshold = select('#highThreshold').elt.value;

        blurSize = map(blurSize, 0, 100, 1, 12);

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

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

        jsfeat.imgproc.grayscale(capture.pixels, w, h, buffer);

        jsfeat.imgproc.gaussian_blur(buffer, buffer, blurSize, 0);

        jsfeat.imgproc.canny(buffer, buffer, lowThreshold, highThreshold);

        var n = buffer.rows * buffer.cols;

        // uncomment the following lines to invert the image

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

//            buffer.data[i] = 255 - buffer.data[i];

//        }

        result = jsfeatToP5(buffer, result);

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

        /*

        lines = probabilisticHoughTransform(buffer.data, 

                                            640, 480, 

                                            1, PI/180, 

                                            50,0,0,50);

        for (let myLine of lines) {

          var x0 = myLine[0].x;

          var y0 = myLine[0].y;

          var x1 = myLine[1].x;

          var y1 = myLine[1].y;

          line(x0,y0,x1,y1);

          //console.log(myLine);

        }

        */

    }

}

​

​

// convert grayscale jsfeat image to p5 rgba image

// usage: dst = jsfeatToP5(src, dst)

function jsfeatToP5(src, dst) {

    if (!dst || dst.width != src.cols || dst.height != src.rows) {

        dst = createImage(src.cols, src.rows);

    }

    var n = src.data.length;

    dst.loadPixels();

    var srcData = src.data;

    var dstData = dst.pixels;

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

        var cur = srcData[i];

        dstData[j++] = cur;

        dstData[j++] = cur;

        dstData[j++] = cur;

        dstData[j++] = 255;

    }

    dst.updatePixels();

    return dst;

}

​