updated example previews

Author: pepc84

__pycache__/generate_example_thumbnails.cpython-314.pyc

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ */
+
+float v = 1.0 / 9.0;
+float kernel[3][3] = {{ 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* 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 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);
+
+          // Process each channel separately, Red first.
+          float valRed = red(img->pixels[pos]);
+          // Multiply adjacent pixels based on the kernel values
+          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 output value
+      // based on the sum from the kernel
+      blurImg->pixels[y * blurImg->width + x] = color(sumRed, sumGreen, sumBlue);
+    }
+  }
+  // State that there are changes to blurImg->pixels[]
+  blurImg->updatePixels();
+
+  image(blurImg, width / 2, 0); // Draw the new image
+}

assets/examples/Topics/image_processing/Blur/Blur.pde

@@ -0,0 +1,49 @@
+/**
+ * Brightness Pixels
+ * 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();
+}

assets/examples/Topics/image_processing/Blur/data/moon.jpg

@@ -0,0 +1,148 @@
+/**
+ * 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. 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.  Here are some
+// example kernels to try.
+float identity[3][3] = { { 0, 0, 0 },
+                          { 0, 1, 0 },
+                          { 0, 0, 0 } };
+
+float darken[3][3]   = { { 0,   0, 0 },
+                          { 0, 0.5, 0 },
+                          { 0,   0, 0 } };
+
+float lighten[3][3]  = { { 0, 0, 0 },
+                          { 0, 2, 0 },
+                          { 0, 0, 0 } };
+
+float sharpen[3][3]  = { {  0, -1,  0 },
+                          { -1,  5, -1 },
+                          {  0, -1,  0 } };
+
+float sharpen2[3][3] = { { -1, -1, -1 },
+                          { -1,  9, -1 },
+                          { -1, -1, -1 } };
+
+float box_blur[3][3] = { { 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[3][3] = { { 0,  1, 0 },
+                          { 1, -4, 1 },
+                          { 0,  1, 0 } };
+
+float emboss[3][3]   = { { -2, -1, 0 },
+                          { -1,  1, 1 },
+                          {  0,  1, 2 } };
+
+// Arrays can't hold other arrays by value, so this is an
+// array of pointers to 3x3 float arrays. Kept as raw arrays
+// (not Array<T>) deliberately: convolution() below is a per-pixel
+// hot loop, and this avoids the extra bounds-checked vector
+// indirection Array<Array<float>> would add for no real benefit here.
+float (*kernels[8])[3] = {
+  identity,
+  darken,
+  lighten,
+  sharpen,
+  sharpen2,
+  box_blur,
+  edge_det,
+  emboss
+};
+
+Array<String> effect_names = {
+  String("Identity (no change)"),
+  String("Darken"),
+  String("Lighten"),
+  String("Sharpen"),
+  String("Sharpen More"),
+  String("Box Blur"),
+  String("Edge Detect"),
+  String("Emboss")
+};
+
+void setup() {
+  size(640, 360);
+  img = loadImage("moon-wide.jpg");
+
+  noLoop();
+}
+
+// Clicking the mouse advances to the next effect
+void mousePressed() {
+  effect++;
+  if (effect >= 8) 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);
+  int xend = constrain(mouseX + w/2, 0, img->width);
+  int yend = constrain(mouseY + w/2, 0, img->height);
+  int matrixsize = 3;
+  loadPixels();
+  for (int x = xstart; x < xend; x++) {
+    for (int y = ystart; y < yend; y++ ) {
+      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[3][3], 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++){
+      int xloc = x+i-offset;
+      int yloc = y+j-offset;
+      int loc = xloc + img->width*yloc;
+      // img->pixels is a std::vector<unsigned int>, so .size() gives
+      // the real element count -- the faithful translation of Java's
+      // img.pixels.length.
+      loc = constrain(loc, 0, (int)img->pixels.size() - 1);
+      rtotal += (red(img->pixels[loc]) * matrix[i][j]);
+      gtotal += (green(img->pixels[loc]) * matrix[i][j]);
+      btotal += (blue(img->pixels[loc]) * matrix[i][j]);
+    }
+  }
+  rtotal = constrain(rtotal, 0, 255);
+  gtotal = constrain(gtotal, 0, 255);
+  btotal = constrain(btotal, 0, 255);
+  return color(rtotal, gtotal, btotal);
+}

assets/examples/Topics/image_processing/Brightness_Pixels/Brightness_Pixels.pde

@@ -0,0 +1,80 @@
+/**
+ * Edge Detection.
+ *
+ * This program analyzes every pixel in an image and compares it with the
+ * 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[3][3] = {{ -1, -1, -1},
+                       { -1,  8, -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();
+
+  // Edge detection should be done on a grayscale image.
+  //  Create a copy of the source image, and convert to gray.
+  // PImage's copy CONSTRUCTOR is deleted (see E0002 in Processing.h --
+  // it owns a GPU texture, so value-style copying isn't supported), but
+  // PImage::copy() is a real method that duplicates the whole image into
+  // an independent PImage. It returns by value, so wrap it in `new` to
+  // fit this codebase's PImage* convention -- the move constructor
+  // handles the transfer, no pixel data is copied twice.
+  PImage* grayImg = new PImage(img->copy());
+  grayImg->filter(GRAY);
+  // grayImg->filter(BLUR);
+
+  // Create an opaque image of the same size as the original
+  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) * grayImg->width + (x + kx);
+
+          // Image is grayscale, red/green/blue are identical
+          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 output value
+      // based on the sum from the kernel
+      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
+}

assets/examples/Topics/image_processing/Brightness_Pixels/data/moon-wide.jpg

@@ -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);
+IntList hist(256); // 256 zero-initialized entries, matching Java's "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 = hist.max();
+
+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);
+}