Merge pull request processing#12 from greg-kennedy/image-processing

Updates to "Image Processing" topic.

Author: SableRaf

Topics/Image Processing/Blur/Blur.pde

@@ -1,53 +1,85 @@
 /**
- * Blur. 
- * 
- * A low-pass filter blurs an image. This program analyzes every
- * pixel in an image and blends it with the neighboring pixels
- * to blur the image. 
+ * Blur.
+ *
+ * This program analyzes every pixel in an image and blends it with the
+ * neighboring pixels to blur the image.
+ *
+ * This is an example of an "image convolution" using a kernel (small matrix)
+ * to analyze and transform a pixel based on the values of its neighbors.
+ *
+ * Image blur is also called a "low-pass filter".  Pixels of low frequency
+ * change (similar brightness as neighbors) are left mostly unchanged, while
+ * those with high frequency change (sharply different values) are smoothed
+ * out.
+ *
+ * The kernel here is a Box Blur, in which all components are equally valued.
+ * Another common blur is "Gaussian Blur", in which pixels nearer the center
+ * of the kernel have more weight than those further away.
+ *
+ * An example 3x3 Gaussian kernel might be:          [ 1  2  1 ]
+ *                                            1/16 * [ 2  4  2 ]
+ *                                                   [ 1  2  1 ]
+ *
+ * An example 5x5 kernel, which creates a greater blur effect:
+ *                                                   [ 1   4   6   4  1 ]
+ *                                                   [ 4  16  24  16  4 ]
+ *                                           1/256 * [ 6  24  36  24  6 ]
+ *                                                   [ 4  16  24  16  4 ]
+ *                                                   [ 1   4   6   4  1 ]
  */
 
 float v = 1.0 / 9.0;
-float[][] kernel = {{ v, v, v }, 
-                    { v, v, v }, 
+float[][] kernel = {{ v, v, v },
+                    { v, v, v },
                     { v, v, v }};
-                    
+
 PImage img;
 
 void setup() {
   size(640, 360);
   img = loadImage("moon.jpg"); // Load the original image
   noLoop();
-} 
+}
 
 void draw() {
-  image(img, 0, 0); // Displays the image from point (0,0) 
+  image(img, 0, 0); // Displays the image from point (0,0)
   img.loadPixels();
 
   // Create an opaque image of the same size as the original
-  PImage edgeImg = createImage(img.width, img.height, RGB);
+  PImage blurImg = createImage(img.width, img.height, RGB);
 
   // Loop through every pixel in the image
   for (int y = 1; y < img.height-1; y++) {   // Skip top and bottom edges
     for (int x = 1; x < img.width-1; x++) {  // Skip left and right edges
-      float sum = 0; // Kernel sum for this pixel
+      float sumRed = 0;   // Kernel sums for this pixel
+      float sumGreen = 0;
+      float sumBlue = 0;
       for (int ky = -1; ky <= 1; ky++) {
         for (int kx = -1; kx <= 1; kx++) {
           // Calculate the adjacent pixel for this kernel point
           int pos = (y + ky)*img.width + (x + kx);
-          // Image is grayscale, red/green/blue are identical
-          float val = red(img.pixels[pos]);
+
+          // Process each channel separately, Red first.
+          float valRed = red(img.pixels[pos]);
           // Multiply adjacent pixels based on the kernel values
-          sum += kernel[ky+1][kx+1] * val;
+          sumRed += kernel[ky+1][kx+1] * valRed;
+
+          // Green
+          float valGreen = green(img.pixels[pos]);
+          sumGreen += kernel[ky+1][kx+1] * valGreen;
+
+          // Blue
+          float valBlue = blue(img.pixels[pos]);
+          sumBlue += kernel[ky+1][kx+1] * valBlue;
         }
       }
-      // For this pixel in the new image, set the gray value
+      // For this pixel in the new image, set the output value
       // based on the sum from the kernel
-      edgeImg.pixels[y*img.width + x] = color(sum);
+      blurImg.pixels[y*blurImg.width + x] = color(sumRed, sumGreen, sumBlue);
     }
   }
-  // State that there are changes to edgeImg.pixels[]
-  edgeImg.updatePixels();
+  // State that there are changes to blurImg.pixels[]
+  blurImg.updatePixels();
 
-  image(edgeImg, width/2, 0); // Draw the new image
+  image(blurImg, width/2, 0); // Draw the new image
 }
-

Topics/Image Processing/Convolution/Convolution.pde

@@ -1,31 +1,103 @@
 /**
  * Convolution
- * by Daniel Shiffman.  
- * 
- * Applies a convolution matrix to a portion of an image. Move mouse to 
- * apply filter to different parts of the image.
+ * by Daniel Shiffman.
+ *
+ * Applies a convolution matrix to a portion of an image. Move mouse to
+ * apply filter to different parts of the image. Click mouse to cycle
+ * through different effects (kernels).
  */
 
 PImage img;
+int effect = 0;
 int w = 120;
 
-// It's possible to convolve the image with many different 
-// matrices to produce different effects. This is a high-pass 
-// filter; it accentuates the edges. 
-float[][] matrix = { { -1, -1, -1 },
-                     { -1,  9, -1 },
-                     { -1, -1, -1 } }; 
+// It's possible to convolve the image with many different
+// matrices to produce different effects.  Here are some
+// example kernels to try.
+float[][] identity = { { 0, 0, 0 },
+                       { 0, 1, 0 },
+                       { 0, 0, 0 } };
 
+float[][] darken =   { { 0,   0, 0 },
+                       { 0, 0.5, 0 },
+                       { 0,   0, 0 } };
+
+float[][] lighten =  { { 0, 0, 0 },
+                       { 0, 2, 0 },
+                       { 0, 0, 0 } };
+
+float[][] sharpen =  { {  0, -1,  0 },
+                       { -1,  5, -1 },
+                       {  0, -1,  0 } };
+
+float[][] sharpen2 = { { -1, -1, -1 },
+                       { -1,  9, -1 },
+                       { -1, -1, -1 } };
+
+float[][] box_blur = { { 1.0/9.0, 1.0/9.0, 1.0/9.0 },
+                       { 1.0/9.0, 1.0/9.0, 1.0/9.0 },
+                       { 1.0/9.0, 1.0/9.0, 1.0/9.0 } };
+
+float[][] edge_det = { { 0,  1, 0 },
+                       { 1, -4, 1 },
+                       { 0,  1, 0 } };
+
+float[][] emboss =   { { -2, -1, 0 },
+                       { -1,  1, 1 },
+                       {  0,  1, 2 } };
+
+// collect the kernels and names into arrays for our program
+float[][][] kernels = {
+  identity,
+  darken,
+  lighten,
+  sharpen,
+  sharpen2,
+  box_blur,
+  edge_det,
+  emboss
+};
+
+String[] effect_names = {
+  "Identity (no change)",
+  "Darken",
+  "Lighten",
+  "Sharpen",
+  "Sharpen More",
+  "Box Blur",
+  "Edge Detect",
+  "Emboss"
+};
+
+//
 void setup() {
   size(640, 360);
-  img = loadImage("moon-wide.jpg"); 
+  img = loadImage("moon-wide.jpg");
+
+  noLoop();
+}
+
+// Clicking the mouse advances to the next effect
+void mousePressed() {
+  effect++;
+  if (effect >= effect_names.length) effect = 0;
+
+  redraw();
+}
+
+// Moving the mouse triggers a screen redraw
+void mouseMoved() {
+  redraw();
+}
+void mouseDragged() {
+  redraw();
 }
 
 void draw() {
   // We're only going to process a portion of the image
   // so let's set the whole image as the background first
   image(img, 0, 0);
-  
+
   // Calculate the small rectangle we will process
   int xstart = constrain(mouseX - w/2, 0, img.width);
   int ystart = constrain(mouseY - w/2, 0, img.height);
@@ -36,12 +108,15 @@ void draw() {
   // Begin our loop for every pixel in the smaller image
   for (int x = xstart; x < xend; x++) {
     for (int y = ystart; y < yend; y++ ) {
-      color c = convolution(x, y, matrix, matrixsize, img);
+      color c = convolution(x, y, kernels[effect], matrixsize, img);
       int loc = x + y*img.width;
       pixels[loc] = c;
     }
   }
   updatePixels();
+
+  textSize(24);
+  text(effect_names[effect], 4, 24);
 }
 
 color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
@@ -71,4 +146,3 @@ color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
   // Return the resulting color
   return color(rtotal, gtotal, btotal);
 }
-

Topics/Image Processing/EdgeDetection/EdgeDetection.pde

@@ -1,49 +1,74 @@
 /**
- * Edge Detection. 
- * 
- * A high-pass filter sharpens an image. This program analyzes every
- * pixel in an image in relation to the neighboring pixels to sharpen 
- * the image. This example is currently not accurate in JavaScript mode.
+ * Edge Detection.
+ *
+ * This program analyzes every pixel in an image and compares it with thee
+ * neighboring pixels to identify edges.
+ *
+ * This is an example of an "image convolution" using a kernel (small matrix)
+ * to analyze and transform a pixel based on the values of its neighbors.
+ *
+ * This kernel describes a "Laplacian Edge Detector".  It is effective,
+ * but sensitive to noise.  One common enhancement is to add a Gaussian
+ * blur to the source image first, as in
+ *   grayImg.filter(BLUR);
+ * to reduce impact of noise on the output.  The combination is often called
+ * "Laplace of Gaussian", or "LoG" for short.
+ *
+ * For weaker detection effect, try this kernel:     [  0  -1   0 ]
+ *                                                   [ -1   4  -1 ]
+ *                                                   [  0  -1   0 ]
  */
 
-float[][] kernel = {{ -1, -1, -1}, 
-                    { -1,  9, -1}, 
+float[][] kernel = {{ -1, -1, -1},
+                    { -1,  8, -1},
                     { -1, -1, -1}};
-                    
+
 PImage img;
 
-void setup() { 
+void setup() {
   size(640, 360);
   img = loadImage("moon.jpg"); // Load the original image
   noLoop();
 }
 
 void draw() {
-  image(img, 0, 0); // Displays the image from point (0,0) 
+  image(img, 0, 0); // Displays the image from point (0,0)
   img.loadPixels();
+
+  // Edge detection should be done on a grayscale image.
+  //  Create a copy of the source image, and convert to gray.
+  PImage grayImg = img.copy();
+  grayImg.filter(GRAY);
+  // grayImg.filter(BLUR);
+
   // Create an opaque image of the same size as the original
-  PImage edgeImg = createImage(img.width, img.height, RGB);
-  // Loop through every pixel in the image.
-  for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges
-    for (int x = 1; x < img.width-1; x++) { // Skip left and right edges
-      float sum = 0; // Kernel sum for this pixel
+  PImage edgeImg = createImage(grayImg.width, grayImg.height, RGB);
+
+  // Loop through every pixel in the image
+  for (int y = 1; y < grayImg.height-1; y++) {   // Skip top and bottom edges
+    for (int x = 1; x < grayImg.width-1; x++) {  // Skip left and right edges
+      // Output of this filter is shown as offset from 50% gray.
+      // This preserves transitions from low (dark) to high (light) value.
+      // Starting from zero will show only high edges on black instead.
+      float sum = 128;
       for (int ky = -1; ky <= 1; ky++) {
         for (int kx = -1; kx <= 1; kx++) {
           // Calculate the adjacent pixel for this kernel point
-          int pos = (y + ky)*img.width + (x + kx);
+          int pos = (y + ky)*grayImg.width + (x + kx);
+
           // Image is grayscale, red/green/blue are identical
-          float val = red(img.pixels[pos]);
+          float val = blue(grayImg.pixels[pos]);
           // Multiply adjacent pixels based on the kernel values
           sum += kernel[ky+1][kx+1] * val;
         }
       }
-      // For this pixel in the new image, set the gray value
+      // For this pixel in the new image, set the output value
       // based on the sum from the kernel
-      edgeImg.pixels[y*img.width + x] = color(sum, sum, sum);
+      edgeImg.pixels[y*edgeImg.width + x] = color(sum);
     }
   }
   // State that there are changes to edgeImg.pixels[]
   edgeImg.updatePixels();
+
   image(edgeImg, width/2, 0); // Draw the new image
 }
-