Image Processing examples for 2.0

java/examples/Topics/Image Processing/Blur/Blur.pde

@@ -1,7 +1,9 @@
 /**
  * Blur. 
  * 
- * Bluring a grayscale image by processing it through a low-pass filter. 
+ * 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. 
  */
 
 // @pjs preload must be used to preload media if the program is 

java/examples/Topics/Image Processing/Brightness/Brightness.pde

@@ -2,20 +2,20 @@
  * Brightness
  * by Daniel Shiffman. 
  * 
- * Adjusts the brightness of part of the image
- * Pixels closer to the mouse will appear brighter. 
+ * This program adjusts the brightness of a part of the image by
+ * calculating the distance of each pixel to the mouse.
  */
 
 // @pjs preload must be used to preload media if the program is 
 // running with Processing.js
-/* @pjs preload="wires.jpg"; */ 
+/* @pjs preload="moon-wide.jpg"; */ 
 
 PImage img;
 
 void setup() {
-  size(200, 200);
+  size(640, 360);
   frameRate(30);
-  img = loadImage("wires.jpg");
+  img = loadImage("moon-wide.jpg");
   img.loadPixels();
   // Only need to load the pixels[] array once, because we're only
   // manipulating pixels[] inside draw(), not drawing shapes.
@@ -34,17 +34,17 @@ void draw() {
       //b = blue (img.pixels[loc]);
       // Calculate an amount to change brightness based on proximity to the mouse
       float maxdist = 50;//dist(0,0,width,height);
-      float d = dist(x,y,mouseX,mouseY);
+      float d = dist(x, y, mouseX, mouseY);
       float adjustbrightness = 255*(maxdist-d)/maxdist;
       r += adjustbrightness;
       //g += adjustbrightness;
       //b += adjustbrightness;
       // Constrain RGB to make sure they are within 0-255 color range
-      r = constrain(r,0,255);
-      //g = constrain(g,0,255);
-      //b = constrain(b,0,255);
+      r = constrain(r, 0, 255);
+      //g = constrain(g, 0, 255);
+      //b = constrain(b, 0, 255);
       // Make a new color and set pixel in the window
-      //color c = color(r,g,b);
+      //color c = color(r, g, b);
       color c = color(r);
       pixels[y*width + x] = c;
     }

java/examples/Topics/Image Processing/Convolution/Convolution.pde

@@ -14,9 +14,9 @@
 PImage img;
 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. 
+// 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 } }; 
@@ -30,14 +30,15 @@ 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);
-  // Where is the small rectangle we will process
+  
+  // 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);
   int xend = constrain(mouseX + w/2, 0, img.width);
   int yend = constrain(mouseY + w/2, 0, img.height);
   int matrixsize = 3;
   loadPixels();
-  // Begin our loop for every pixel
+  // 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);

java/examples/Topics/Image Processing/EdgeDetection/EdgeDetection.pde

@@ -1,13 +1,14 @@
 /**
  * Edge Detection. 
  * 
- * Exposing areas of contrast within an image 
- * by processing it through a high-pass filter. 
+ * 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. 
  */
 
 // @pjs preload must be used to preload media if the program is 
 // running with Processing.js
-/* @pjs preload="house.jpg"; */
+/* @pjs preload="moon.jpg"; */
 
 float[][] kernel = {{ -1, -1, -1}, 
                     { -1,  9, -1}, 
@@ -16,8 +17,8 @@ float[][] kernel = {{ -1, -1, -1},
 PImage img;
 
 void setup() { 
-  size(200, 200);
-  img = loadImage("house.jpg"); // Load the original image
+  size(640, 360);
+  img = loadImage("moon.jpg"); // Load the original image
   noLoop();
 }
 
@@ -47,6 +48,6 @@ void draw() {
   }
   // State that there are changes to edgeImg.pixels[]
   edgeImg.updatePixels();
-  image(edgeImg, 100, 0); // Draw the new image
+  image(edgeImg, width/2, 0); // Draw the new image
 }
 

java/examples/Topics/Image Processing/Histogram/Histogram.pde

@@ -12,13 +12,13 @@
 
 // @pjs preload must be used to preload media if the program is 
 // running with Processing.js
-/* @pjs preload="moon.jpg"; */ 
+/* @pjs preload="frontier.jpg"; */ 
 
-size(200, 200);
+size(640, 360);
 
 // Load an image from the data directory
 // Load a different image by modifying the comments
-PImage img = loadImage("cdi01_g.jpg");
+PImage img = loadImage("frontier.jpg");
 image(img, 0, 0);
 int[] hist = new int[256];
 
@@ -36,7 +36,7 @@ int histMax = max(hist);
 stroke(255);
 // Draw half of the histogram (skip every second value)
 for (int i = 0; i < img.width; i += 2) {
-  // Map i (from 0..img.width-1) to a location in the histogram (0..255)
+  // Map i (from 0..img.width) to a location in the histogram (0..255)
   int which = int(map(i, 0, img.width, 0, 255));
   // Convert the histogram value to a location between 
   // the bottom and the top of the picture

java/examples/Topics/Image Processing/LinearImage/LinearImage.pde

@@ -7,7 +7,7 @@
 
 // @pjs preload must be used to preload media if the program is 
 // running with Processing.js
-/* @pjs preload="moon.jpg"; */ 
+/* @pjs preload="sea.jpg"; */ 
 
 PImage img;
 int direction = 1;
@@ -15,9 +15,9 @@ int direction = 1;
 float signal;
 
 void setup() {
-  size(200, 200);
+  size(640, 360);
   stroke(255);
-  img = loadImage("florence03.jpg");
+  img = loadImage("sea.jpg");
   img.loadPixels();
   loadPixels();
 }

java/examples/Topics/Image Processing/PixelArray/PixelArray.pde

@@ -9,18 +9,18 @@
 
 // @pjs preload must be used to preload media if the program is 
 // running with Processing.js
-/* @pjs preload="moon.jpg"; */ 
+/* @pjs preload="sea.jpg"; */ 
 
 PImage img;
 int direction = 1;
 float signal;
 
 void setup() {
-  size(200, 200);
+  size(640, 360);
   noFill();
   stroke(255);
   frameRate(30);
-  img = loadImage("ystone08.jpg");
+  img = loadImage("sea.jpg");
 }
 
 void draw() {