Examples mods for 2.0

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

@@ -1,43 +1,55 @@
 /**
  * Blur. 
  * 
- * Bluring half of an image by processing it through a
- * low-pass filter. 
+ * Bluring a grayscale image by processing it through a low-pass filter. 
  */
 
-float v = 1.0/9.0;
-float[][] kernel = { { v, v, v },
-                     { v, v, v },
-                     { v, v, v } };
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
 
-size(200, 200); 
+float v = 1.0 / 9.0;
+float[][] kernel = {{ v, v, v }, 
+                    { v, v, v }, 
+                    { v, v, v }};
+                    
+PImage img;
 
-PImage img = loadImage("trees.jpg"); // Load the original image
-image(img, 0, 0); // Displays the image from point (0,0) 
-img.loadPixels();
+void setup() {
+  size(640, 360);
+  img = loadImage("moon.jpg"); // Load the original image
+  noLoop();
+} 
 
-// Create an opaque image of the same size as the original
-PImage edgeImg = createImage(img.width, img.height, RGB);
+void draw() {
+  image(img, 0, 0); // Displays the image from point (0,0) 
+  img.loadPixels();
 
-// 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
-    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]);
-        // Multiply adjacent pixels based on the kernel values
-        sum += kernel[ky+1][kx+1] * val;
+  // 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
+      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]);
+          // 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
+      // based on the sum from the kernel
+      edgeImg.pixels[y*img.width + x] = color(sum);
     }
-    // For this pixel in the new image, set the gray value
-    // based on the sum from the kernel
-    edgeImg.pixels[y*img.width + x] = color(sum);
   }
+  // State that there are changes to edgeImg.pixels[]
+  edgeImg.updatePixels();
+
+  image(edgeImg, width/2, 0); // Draw the new image
 }
-// State that there are changes to edgeImg.pixels[]
-edgeImg.updatePixels();
-image(edgeImg, 100, 0); // Draw the new image
+

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

@@ -5,7 +5,11 @@
  * Adjusts the brightness of part of the image
  * Pixels closer to the mouse will appear brighter. 
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="wires.jpg"; */ 
+
 PImage img;
 
 void setup() {

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

@@ -2,41 +2,45 @@
  * Convolution
  * by Daniel Shiffman.  
  * 
- * Applies a convolution matrix to a portion of the index.  
+ * Applies a convolution matrix to a portion of an image.  
  * Move mouse to apply filter to different parts of the image. 
  */
 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon-wide.jpg"; */ 
+
 PImage img;
-int w = 80;
+int w = 120;
 
 // It's possible to convolve the image with 
-// many different matrices
-
-  float[][] matrix = { { -1, -1, -1 },
-                       { -1,  9, -1 },
-                       { -1, -1, -1 } }; 
+// 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 } }; 
 
 void setup() {
-  size(200, 200);
-  frameRate(30);
-  img = loadImage("end.jpg");
+  size(640, 360);
+  img = loadImage("moon-wide.jpg"); 
 }
 
 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);
+  image(img, 0, 0);
   // Where is 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 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
   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, matrix, matrixsize, img);
       int loc = x + y*img.width;
       pixels[loc] = c;
     }
@@ -44,7 +48,7 @@ void draw() {
   updatePixels();
 }
 
-color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)
+color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
 {
   float rtotal = 0.0;
   float gtotal = 0.0;
@@ -65,10 +69,10 @@ color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)
     }
   }
   // Make sure RGB is within range
-  rtotal = constrain(rtotal,0,255);
-  gtotal = constrain(gtotal,0,255);
-  btotal = constrain(btotal,0,255);
+  rtotal = constrain(rtotal, 0, 255);
+  gtotal = constrain(gtotal, 0, 255);
+  btotal = constrain(btotal, 0, 255);
   // Return the resulting color
-  return color(rtotal,gtotal,btotal);
+  return color(rtotal, gtotal, btotal);
 }
 

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

@@ -5,35 +5,48 @@
  * by processing it through a high-pass filter. 
  */
 
-float[][] kernel = { { -1, -1, -1 },
-                     { -1,  9, -1 },
-                     { -1, -1, -1 } };
-  
-size(200, 200);
-PImage img = loadImage("house.jpg"); // Load the original image
-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);
-// 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
-    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]);
-        // 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
-    // based on the sum from the kernel
-    edgeImg.pixels[y*img.width + x] = color(sum);
-  }
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="house.jpg"; */
+
+float[][] kernel = {{ -1, -1, -1}, 
+                    { -1,  9, -1}, 
+                    { -1, -1, -1}};
+                    
+PImage img;
+
+void setup() { 
+  size(200, 200);
+  img = loadImage("house.jpg"); // Load the original image
+  noLoop();
 }
-// State that there are changes to edgeImg.pixels[]
-edgeImg.updatePixels();
-image(edgeImg, 100, 0); // Draw the new image
+
+void draw() {
+  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);
+  // 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
+      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]);
+          // 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
+      // based on the sum from the kernel
+      edgeImg.pixels[y*img.width + x] = color(sum);
+    }
+  }
+  // State that there are changes to edgeImg.pixels[]
+  edgeImg.updatePixels();
+  image(edgeImg, 100, 0); // Draw the new image
+}
+

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

@@ -6,7 +6,11 @@
  * Maps pixels from a 2D image into 3D space. Pixel brightness controls 
  * translation along z axis. 
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="eames.jpg"; */ 
+
 PImage img;       // The source image
 int cellsize = 2; // Dimensions of each cell in the grid
 int columns, rows;   // Number of columns and rows in our system

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

@@ -5,6 +5,10 @@
  * around the center.
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 PImage extrude;
 int[][] values;
 float angle = 0;

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

@@ -9,7 +9,11 @@
  * Note that this sketch will behave differently on Android, 
  * since most images will no longer be full 24-bit color.
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 size(200, 200);
 
 // Load an image from the data directory

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

@@ -3,10 +3,12 @@
  * 
  * Click and drag mouse up and down to control the signal. 
  * Press and hold any key to watch the scanning. 
- *
- * Updated 28 February 2010.
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 PImage img;
 int direction = 1;
 

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

@@ -6,7 +6,11 @@
  * This program sequentially reads the color of every pixel of an image
  * and displays this color to fill the window.  
  */
- 
+
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="moon.jpg"; */ 
+
 PImage img;
 int direction = 1;
 float signal;

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

@@ -2,20 +2,21 @@
  * Zoom. 
  * 
  * Move the cursor over the image to alter its position. Click and press
- * the mouse to zoom and set the density of the matrix by typing numbers 1-5.
- * This program displays a series of lines with their heights corresponding to 
- * a color value read from an image. 
+ * the mouse to zoom. This program displays a series of lines with their 
+ * heights corresponding to a color value read from an image. 
  */
 
+// @pjs preload must be used to preload media if the program is 
+// running with Processing.js
+/* @pjs preload="ystone08.jpg"; */ 
+
 PImage img;
-//boolean onetime = true;
 int[][] imgPixels;
 float sval = 1.0;
 float nmx, nmy;
 int res = 5;
 
-void setup() 
-{
+void setup() {
   size(640, 360, P3D);
   noFill();
   stroke(255);
@@ -28,11 +29,10 @@ void setup()
   }
 }
 
-void draw() 
-{
+void draw() {
   background(0);
 
-  nmx = nmx + (mouseX-nmx)/20; 
+  nmx += (mouseX-nmx)/20; 
   nmy += (mouseY-nmy)/20; 
 
   if(mousePressed) { 
@@ -42,9 +42,9 @@ void draw()
     sval -= 0.01; 
   }
 
-  sval = constrain(sval, 1.0, 2.5);
+  sval = constrain(sval, 1.0, 2.0);
 
-  translate(width/2 + nmx * sval-100, height/2 + nmy*sval - 200, -50);
+  translate(width/2 + nmx * sval-100, height/2 + nmy*sval - 100, -50);
   scale(sval);
   rotateZ(PI/9 - sval + 1.0);
   rotateX(PI/sval/8 - 0.125);
@@ -64,24 +64,6 @@ void draw()
   }
 }
 
-void keyPressed() {
-  if(key == '1') {
-    res = 1;
-  } 
-  else if (key == '2') {
-    res = 2; 
-  } 
-  else if (key == '3') {
-    res = 3;
-  } 
-  else if (key == '4') {
-    res = 4;
-  } 
-  else if (key == '5') {
-    res = 5;
-  }
-}
-