var buffer;

var result;

var w = 640,

    h = 480;

var capimg;

let capturePixelCopy;

​

function setup() {

    capture = createCapture({

        audio: false,

        video: {

            width: w,

            height: h

        }

    }, function() {

        console.log('capture ready.')

    });

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

    createCanvas(w, h);

    capture.size(w, h);

    capture.hide();

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

    capture.loadPixels();

    capturePixelCopy = capture.pixels.slice();

}

​

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;//r

        dstData[j++] = cur;//g

        dstData[j++] = cur;//b

        dstData[j++] = 130;//a

    }

    dst.updatePixels();

    return dst;

//   for (let col=0; col<captimage.width; col+=4){

//     for (let row=0;row<captimage.height; row+=4){

//   let xPos = col;

//   let yPos = row;

//   let myColor = captimage.get(xPos, yPos);

//   push()

//   translate(xPos, yPos);

//   noFill();

//   stroke(color(myColor))

//   strokeWeight(random(5));

//   point(xPos, yPos);

//   pop();

//   }

// }

}

​

function draw() {

    image(capture, 0, 0, 640, 480);

     capture.loadPixels();

        //my pixellation

  var stepSize = 16;

  for (var x = 0; x < capture.width; x += stepSize) {

    for (var y = 0; y < capture.height; y += stepSize) {

      var index = ((y*capture.width) + x) * 4;

      var redVal = capture.pixels[index];

      var greenVal = capture.pixels[index + 1];

      var blueVal = capture.pixels[index + 2];

      fill(redVal, greenVal, blueVal);

      ellipse(x, y, stepSize, stepSize);

    }

  }   

//detection option

  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, 640, 480);

    }

​

 //color filters 

capimg = capture.get(); 

    if(capimg.width > 0) {

        capimg.loadPixels(); // getting pixel array

        for(var i = 0; i < capimg.pixels.length; i += 4) 

        {   

            var r = capimg.pixels[i+0];

            var g = capimg.pixels[i+1];

            var b = capimg.pixels[i+2];

            var a = capimg.pixels[i+3];

            capimg.pixels[i+0] = mouseY;

            capimg.pixels[i+1] = mouseX;

            capimg.pixels[i+2] = 255;

            capimg.pixels[i+3] = 80

        }

        capimg.updatePixels();

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

    }

   //sparkling camera flare

​

       var sparkle = {

        locationX: random(width),

        locationY: random(height),

        size: random(1, 50)

    }

​

    fill (255,30);

    noStroke();

    ellipse(mouseX, mouseY, sparkle.size, sparkle.size);

    ellipse(mouseX-100, mouseY-100, sparkle.size, sparkle.size);

    ellipse(sparkle.locationX, sparkle.locationY, sparkle.size, sparkle.size);

    ellipse(sparkle.locationX+100, sparkle.locationY+100, sparkle.size, sparkle.size);

}

​