Add completed the edge detection filter

2021-08-02 19:47:26 -05:00
parent 8849a58e16
commit 939df66c85
6 changed files with 16045 additions and 0 deletions
--- a/filter/assets/seaNettles.jpg
+++ b/filter/assets/seaNettles.jpg
--- a/filter/index.html
+++ b/filter/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>randomDot</title>
+    <script src="libraries/p5.min.js" type="text/javascript"></script>
+
+    <script src="libraries/p5.dom.js" type="text/javascript"></script>
+    <script src="libraries/p5.sound.js" type="text/javascript"></script>
+
+    <script src="sketch.js" type="text/javascript"></script>
+
+    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
+  </head>
+  <body>
+  </body>
+</html>
--- a/filter/libraries/p5.dom.js
+++ b/filter/libraries/p5.dom.js
--- a/filter/libraries/p5.min.js
+++ b/filter/libraries/p5.min.js
--- a/filter/libraries/p5.sound.js
+++ b/filter/libraries/p5.sound.js
--- a/filter/sketch.js
+++ b/filter/sketch.js
@ -0,0 +1,88 @@
+let imgIn;
+// vertical edges
+let matrixVer =[
+  [-1, -2, -1],
+  [ 0,  0,  0],
+  [ 1,  2,  1]
+];
+
+// horizontal edges
+let matrixHor =[
+  [ 1,  0, -1],
+  [ 2,  0, -2],
+  [ 1,  0, -1]
+];
+
+function preload() {
+  imgIn = loadImage("assets/seaNettles.jpg");
+}
+
+function setup() {
+  createCanvas(imgIn.width * 2 + 20, imgIn.height);
+  pixelDensity(1);
+}
+
+function draw() {
+  background(255);
+  imgIn.filter('GRAY');
+  image(imgIn, 0, 0);
+  image(edgeFilter(imgIn), imgIn.width + 20, 0);
+  noLoop();
+}
+
+function edgeFilter(img) {
+  let imgOut = createImage(img.width, img.height);
+  imgOut.loadPixels();
+  img.loadPixels();
+
+  let matrixSizeVer = matrixVer.length;
+  let matrixSizeHor = matrixHor.length;
+
+  for (let y = 0; y < img.height; y++) {
+    for (let x = 0; x < img.width; x++) {
+
+      let index = (img.width * y + x) * 4;
+      let cX = convolution(x, y, matrixVer, matrixSizeVer, img);
+      // max will be (1+2+1)*255 = 1020
+      cX = map(abs(cX[0]), 0, 1020, 0, 255);
+
+      let cY = convolution(x, y, matrixHor, matrixSizeHor, img);
+      // max will be (1+2+1)*255 = 1020
+      cY = map(abs(cY[0]), 0, 1020, 0, 255);
+
+      let combo = cX + cY;
+
+      imgOut.pixels[index + 0] = combo;
+      imgOut.pixels[index + 1] = combo;
+      imgOut.pixels[index + 2] = combo;
+      imgOut.pixels[index + 3] = 255;
+    }
+  }
+  imgOut.updatePixels();
+  return imgOut;
+}
+
+function convolution(x, y, matrix, matrixSize, img)
+{
+  let totalRed = 0;
+  let totalGrn = 0;
+  let totalBlu = 0;
+
+  let offset = floor(matrixSize/2);
+
+  for (let i=0; i<matrixSize; i++)
+  {
+    for(let j=0; j<matrixSize; j++)
+    {
+      let xloc = x + i - offset;
+      let yloc = y + j - offset;
+
+      let index = (img.width * yloc + xloc) * 4;
+      index = constrain(index, 0, img.pixels.length - 1);
+      totalRed += img.pixels[index + 0] * matrix[i][j];
+      totalGrn += img.pixels[index + 1] * matrix[i][j];
+      totalBlu += img.pixels[index + 2] * matrix[i][j];
+    }
+  }
+  return [totalRed, totalGrn, totalBlu];
+}