Initial Commit

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Blending/Blending.pde

@@ -0,0 +1,83 @@
+/**
+ * Blending 
+ * by Andres Colubri. 
+ * 
+ * Images can be blended using one of the 10 blending modes 
+ * (currently available only in P2D and P3).
+ * Click to go to cycle through the modes.  
+ */
+
+// NOTE: THIS EXAMPLE IS IN PROGRESS -- REAS
+
+PImage img1, img2;
+int selMode = REPLACE;
+String name = "REPLACE";
+int picAlpha = 255;
+
+void setup() {
+  size(640, 360, P3D);
+  img1 = loadImage("layer1.jpg");
+  img2 = loadImage("layer2.jpg"); 
+  noStroke();
+}
+
+void draw() {
+  
+  picAlpha = int(map(mouseX, 0, width, 0, 255));
+  
+  background(0);
+  
+  tint(255, 255);
+  image(img1, 0, 0);
+
+  blendMode(selMode);  
+  tint(255, picAlpha);
+  image(img2, 0, 0);
+
+  blendMode(REPLACE); 
+  fill(255);
+  rect(0, 0, 94, 22);
+  fill(0);
+  text(name, 10, 15);
+}
+
+void mousePressed() {
+  
+  if (selMode == REPLACE) { 
+    selMode = BLEND;
+    name = "BLEND";
+  } else if (selMode == BLEND) { 
+    selMode = ADD;
+    name = "ADD";
+  } else if (selMode == ADD) { 
+    selMode = SUBTRACT;
+    name = "SUBTRACT";
+  } else if (selMode == SUBTRACT) { 
+    selMode = LIGHTEST;
+    name = "LIGHTEST";
+  } else if (selMode == LIGHTEST) { 
+    selMode = DARKEST;
+    name = "DARKEST";
+  } else if (selMode == DARKEST) { 
+    selMode = DIFFERENCE;
+    name = "DIFFERENCE";
+  } else if (selMode == DIFFERENCE) { 
+    selMode = EXCLUSION;  
+    name = "EXCLUSION";
+  } else if (selMode == EXCLUSION) { 
+    selMode = MULTIPLY;  
+    name = "MULTIPLY";
+  } else if (selMode == MULTIPLY) { 
+    selMode = SCREEN;
+    name = "SCREEN";
+  } else if (selMode == SCREEN) { 
+    selMode = REPLACE;
+    name = "REPLACE";
+  }
+}
+
+void mouseDragged() {
+  if (height - 50 < mouseY) {
+    picAlpha = int(map(mouseX, 0, width, 0, 255));
+  }
+}

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Blur/Blur.pde

@@ -0,0 +1,53 @@
+/**
+ * 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. 
+ */
+
+float v = 1.0 / 9.0;
+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) 
+  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, width/2, 0); // Draw the new image
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Brightness/Brightness.pde

@@ -0,0 +1,49 @@
+/**
+ * Brightness
+ * by Daniel Shiffman. 
+ * 
+ * This program adjusts the brightness of a part of the image by
+ * calculating the distance of each pixel to the mouse.
+ */
+
+PImage img;
+
+void setup() {
+  size(640, 360);
+  frameRate(30);
+  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.
+  loadPixels();
+}
+
+void draw() {
+  for (int x = 0; x < img.width; x++) {
+    for (int y = 0; y < img.height; y++ ) {
+      // Calculate the 1D location from a 2D grid
+      int loc = x + y*img.width;
+      // Get the R,G,B values from image
+      float r,g,b;
+      r = red (img.pixels[loc]);
+      //g = green (img.pixels[loc]);
+      //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 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);
+      // Make a new color and set pixel in the window
+      //color c = color(r, g, b);
+      color c = color(r);
+      pixels[y*width + x] = c;
+    }
+  }
+  updatePixels();
+}

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Convolution/Convolution.pde

@@ -0,0 +1,75 @@
+/**
+ * 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. This example is currently
+ * not accurate in JavaScript mode.
+ */
+
+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. 
+float[][] matrix = { { -1, -1, -1 },
+                     { -1,  9, -1 },
+                     { -1, -1, -1 } }; 
+
+void setup() {
+  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);
+  
+  // 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 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);
+      int loc = x + y*img.width;
+      pixels[loc] = c;
+    }
+  }
+  updatePixels();
+}
+
+color convolution(int x, int y, float[][] matrix, int matrixsize, PImage img)
+{
+  float rtotal = 0.0;
+  float gtotal = 0.0;
+  float btotal = 0.0;
+  int offset = matrixsize / 2;
+  for (int i = 0; i < matrixsize; i++){
+    for (int j= 0; j < matrixsize; j++){
+      // What pixel are we testing
+      int xloc = x+i-offset;
+      int yloc = y+j-offset;
+      int loc = xloc + img.width*yloc;
+      // Make sure we haven't walked off our image, we could do better here
+      loc = constrain(loc,0,img.pixels.length-1);
+      // Calculate the convolution
+      rtotal += (red(img.pixels[loc]) * matrix[i][j]);
+      gtotal += (green(img.pixels[loc]) * matrix[i][j]);
+      btotal += (blue(img.pixels[loc]) * matrix[i][j]);
+    }
+  }
+  // Make sure RGB is within range
+  rtotal = constrain(rtotal, 0, 255);
+  gtotal = constrain(gtotal, 0, 255);
+  btotal = constrain(btotal, 0, 255);
+  // Return the resulting color
+  return color(rtotal, gtotal, btotal);
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/EdgeDetection/EdgeDetection.pde

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+
+float[][] kernel = {{ -1, -1, -1}, 
+                    { -1,  9, -1}, 
+                    { -1, -1, -1}};
+                    
+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) 
+  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, sum, sum);
+    }
+  }
+  // State that there are changes to edgeImg.pixels[]
+  edgeImg.updatePixels();
+  image(edgeImg, width/2, 0); // Draw the new image
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Explode/Explode.pde

@@ -0,0 +1,43 @@
+/**
+ * Explode 
+ * by Daniel Shiffman. 
+ * 
+ * Mouse horizontal location controls breaking apart of image and 
+ * Maps pixels from a 2D image into 3D space. Pixel brightness controls 
+ * translation along z axis. 
+ */
+
+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
+
+void setup() {
+  size(640, 360, P3D); 
+  img = loadImage("eames.jpg");  // Load the image
+  columns = img.width / cellsize;  // Calculate # of columns
+  rows = img.height / cellsize;  // Calculate # of rows
+}
+
+void draw() {
+  background(0);
+  // Begin loop for columns
+  for ( int i = 0; i < columns; i++) {
+    // Begin loop for rows
+    for ( int j = 0; j < rows; j++) {
+      int x = i*cellsize + cellsize/2;  // x position
+      int y = j*cellsize + cellsize/2;  // y position
+      int loc = x + y*img.width;  // Pixel array location
+      color c = img.pixels[loc];  // Grab the color
+      // Calculate a z position as a function of mouseX and pixel brightness
+      float z = (mouseX / float(width)) * brightness(img.pixels[loc]) - 20.0;
+      // Translate to the location, set fill and stroke, and draw the rect
+      pushMatrix();
+      translate(x + 200, y + 100, z);
+      fill(c, 204);
+      noStroke();
+      rectMode(CENTER);
+      rect(0, 0, cellsize, cellsize);
+      popMatrix();
+    }
+  }
+}

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Extrusion/Extrusion.pde

@@ -0,0 +1,49 @@
+/**
+ * Extrusion. 
+ * 
+ * Converts a flat image into spatial data points and rotates the points
+ * around the center.
+ */
+
+PImage a;
+boolean onetime = true;
+int[][] aPixels;
+int[][] values;
+float angle;
+
+void setup() {
+  size(640, 360, P3D);
+  
+  aPixels = new int[width][height];
+  values = new int[width][height];
+  noFill();
+
+  // Load the image into a new array
+  // Extract the values and store in an array
+  a = loadImage("ystone08.jpg");
+  a.loadPixels();
+  for (int i = 0; i < a.height; i++) {
+    for (int j = 0; j < a.width; j++) {
+      aPixels[j][i] = a.pixels[i*a.width + j];
+      values[j][i] = int(blue(aPixels[j][i]));
+    }
+  }
+}
+
+void draw() {
+  background(0);
+  translate(width/2, height/2, -height/2);
+  scale(2.0);
+  
+  // Update and constrain the angle
+  angle += 0.005;
+  rotateY(angle);  
+  
+  // Display the image mass
+  for (int i = 0; i < a.height; i += 4) {
+    for (int j = 0; j < a.width; j += 4) {
+      stroke(values[j][i], 255);
+      line(j-a.width/2, i-a.height/2, -values[j][i], j-a.width/2, i-a.height/2, -values[j][i]-10);
+    }
+  }
+}

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Histogram/Histogram.pde

@@ -0,0 +1,41 @@
+/**
+ * Histogram. 
+ * 
+ * Calculates the histogram of an image. 
+ * A histogram is the frequency distribution 
+ * of the gray levels with the number of pure black values
+ * displayed on the left and number of pure white values on the right. 
+ *
+ * Note that this sketch will behave differently on Android, 
+ * since most images will no longer be full 24-bit color.
+ */
+
+size(640, 360);
+
+// Load an image from the data directory
+// Load a different image by modifying the comments
+PImage img = loadImage("frontier.jpg");
+image(img, 0, 0);
+int[] hist = new int[256];
+
+// Calculate the histogram
+for (int i = 0; i < img.width; i++) {
+  for (int j = 0; j < img.height; j++) {
+    int bright = int(brightness(get(i, j)));
+    hist[bright]++; 
+  }
+}
+
+// Find the largest value in the histogram
+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) 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
+  int y = int(map(hist[which], 0, histMax, img.height, 0));
+  line(i, img.height, i, y);
+}

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/LinearImage/LinearImage.pde

@@ -0,0 +1,44 @@
+/**
+ * Linear Image. 
+ * 
+ * Click and drag mouse up and down to control the signal. 
+ * Press and hold any key to watch the scanning. 
+ */
+
+PImage img;
+int direction = 1;
+
+float signal;
+
+void setup() {
+  size(640, 360);
+  stroke(255);
+  img = loadImage("sea.jpg");
+  img.loadPixels();
+  loadPixels();
+}
+
+void draw() {
+  if (signal > img.height-1 || signal < 0) { 
+    direction = direction * -1;
+  }
+  if (mousePressed == true) {
+    signal = abs(mouseY % img.height);
+  } 
+  else {
+    signal += (0.3*direction);
+  }
+
+  if (keyPressed == true) {
+    set(0, 0, img);
+    line(0, signal, img.width, signal);
+  } 
+  else {
+    int signalOffset = int(signal)*img.width;
+    for (int y = 0; y < img.height; y++) {
+      arrayCopy(img.pixels, signalOffset, pixels, y*width, img.width);
+    }
+    updatePixels();
+  }
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/PixelArray/PixelArray.pde

@@ -0,0 +1,46 @@
+/**
+ * Pixel Array. 
+ * 
+ * Click and drag the mouse up and down to control the signal and 
+ * press and hold any key to see the current pixel being read. 
+ * This program sequentially reads the color of every pixel of an image
+ * and displays this color to fill the window.  
+ */
+
+PImage img;
+int direction = 1;
+float signal;
+
+void setup() {
+  size(640, 360);
+  noFill();
+  stroke(255);
+  frameRate(30);
+  img = loadImage("sea.jpg");
+}
+
+void draw() {
+  if (signal > img.width*img.height-1 || signal < 0) { 
+    direction = direction * -1; 
+  }
+
+  if (mousePressed) {
+    int mx = constrain(mouseX, 0, img.width-1);
+    int my = constrain(mouseY, 0, img.height-1);
+    signal = my*img.width + mx;
+  } else {
+    signal += 0.33*direction;
+  }
+
+  int sx = int(signal) % img.width;
+  int sy = int(signal) / img.width;
+
+  if (keyPressed) {
+    set(0, 0, img);  // fast way to draw an image
+    point(sx, sy);
+    rect(sx - 5, sy - 5, 10, 10);
+  } else {
+    color c = img.get(sx, sy);
+    background(c);
+  }
+}

Java/Processing/processing-3.3.6/modes/java/examples/Topics/Image Processing/Zoom/Zoom.pde

@@ -0,0 +1,67 @@
+/**
+ * Zoom. 
+ * 
+ * Move the cursor over the image to alter its position. Click and press
+ * the mouse to zoom. This program displays a series of lines with their 
+ * heights corresponding to a color value read from an image. 
+ */
+
+PImage img;
+int[][] imgPixels;
+float sval = 1.0;
+float nmx, nmy;
+int res = 5;
+
+void setup() {
+  size(640, 360, P3D);
+  noFill();
+  stroke(255);
+  img = loadImage("ystone08.jpg");
+  imgPixels = new int[img.width][img.height];
+  for (int i = 0; i < img.height; i++) {
+    for (int j = 0; j < img.width; j++) {
+      imgPixels[j][i] = img.get(j, i);
+    }
+  }
+}
+
+void draw() {
+  background(0);
+
+  nmx += (mouseX-nmx)/20; 
+  nmy += (mouseY-nmy)/20; 
+
+  if(mousePressed) { 
+    sval += 0.005; 
+  } 
+  else {
+    sval -= 0.01; 
+  }
+
+  sval = constrain(sval, 1.0, 2.0);
+
+  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);
+  rotateY(sval/8 - 0.125);
+
+  translate(-width/2, -height/2, 0);
+
+  for (int i = 0; i < img.height; i += res) {
+    for (int j = 0; j < img.width; j += res) {
+      float rr = red(imgPixels[j][i]); 
+      float gg = green(imgPixels[j][i]);
+      float bb = blue(imgPixels[j][i]);
+      float tt = rr+gg+bb;
+      stroke(rr, gg, gg);
+      line(i, j, tt/10-20, i, j, tt/10 );
+    }
+  }
+}
+
+
+
+
+
+