Merge pull request #1359 from Acha0203/fix/indentation-of-source-code-for-example-05-image

Change indentation and format of source code for some examples/en/05_Image/.js files

Author: limzykenneth

src/data/examples/en/05_Image/06_Blur.js

@@ -10,17 +10,21 @@
 // v is the normalized value
 let v = 1.0 / 9.0;
 // kernel is the 3x3 matrix of normalized values
-let kernel = [[ v, v, v ], [ v, v, v ], [ v, v, v ]]; 
+let kernel = [
+  [v, v, v],
+  [v, v, v],
+  [v, v, v]
+];
 
 // preload() runs once, before setup()
 // loadImage() needs to occur here instead of setup()
-// if loadImage() is called in setup(), the image won't appear 
+// if loadImage() is called in setup(), the image won't appear
 // since noLoop() restricts draw() to execute only once
 // (one execution of draw() is not enough time for the image to load),
 // preload() makes sure image is loaded before anything else occurs
 function preload() {
   // load the original image
-  img = loadImage("assets/rover.png"); 
+  img = loadImage('assets/rover.png');
 }
 
 // setup() runs once after preload
@@ -31,7 +35,6 @@ function setup() {
   noLoop();
 }
 
-
 // draw() runs after setup(), normally on a loop
 // in this case it runs only once, because of noDraw()
 function draw() {
@@ -43,7 +46,7 @@ function draw() {
 
   // load its pixels
   edgeImg.loadPixels();
-  
+
   // two for() loops, to iterate in x axis and y axis
   // since the kernel assumes that the pixel
   // has pixels above, under, left, and right
@@ -53,18 +56,18 @@ function draw() {
   for (let x = 1; x < img.width; x++) {
     for (let y = 1; y < img.height; y++) {
       // kernel sum for the current pixel starts as 0
-      let sum = 0; 
+      let sum = 0;
 
       // kx, ky variables for iterating over the kernel
       // kx, ky have three different values: -1, 0, 1
       for (kx = -1; kx <= 1; kx++) {
         for (ky = -1; ky <= 1; ky++) {
           let xpos = x + kx;
           let ypos = y + ky;
-          
-          // since our image is grayscale, 
+
+          // since our image is grayscale,
           // RGB values are identical
-          // we retrieve the red value for this example 
+          // we retrieve the red value for this example
           // (green and blue work as well)
           let val = red(img.get(xpos, ypos));
 
@@ -74,7 +77,7 @@ function draw() {
           // if we add 1 to kx and ky, we get 0, 1, 2
           // with that we can use it to iterate over kernel
           // and calculate the accumulated sum
-          sum += kernel[kx+1][ky+1] * val;
+          sum += kernel[kx + 1][ky + 1] * val;
         }
       }
 
@@ -84,7 +87,7 @@ function draw() {
   }
   // updatePixels() to write the changes on edgeImg
   edgeImg.updatePixels();
-  
+
   // draw edgeImg at the right of the original image
   image(edgeImg, img.width, 0);
-}
+}

src/data/examples/en/05_Image/07_EdgeDetection.js

@@ -1,7 +1,7 @@
 /*
  * @name Edge Detection
  * @arialabel Astronaut rendered in black and white on the left and a highly sharpened version of the image on the right
- * @description 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. 
+ * @description 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.
  * <br><br><span class="small"><em>This example is ported from the <a href="https://processing.org/examples/edgedetection.html">Edge Detection example</a>
  * on the Processing website</em></span>
  */
@@ -12,17 +12,21 @@
 // to consider all neighboring pixels we use a 3x3 array
 // and normalize these values
 // kernel is the 3x3 matrix of normalized values
-let kernel = [[-1, -1, -1 ], [ -1,  9, -1 ], [-1, -1, -1 ]]; 
+let kernel = [
+  [-1, -1, -1],
+  [-1,  9, -1],
+  [-1, -1, -1]
+];
 
 // preload() runs once, before setup()
 // loadImage() needs to occur here instead of setup()
-// if loadImage() is called in setup(), the image won't appear 
+// if loadImage() is called in setup(), the image won't appear
 // since noLoop() restricts draw() to execute only once
 // (one execution of draw() is not enough time for the image to load),
 // preload() makes sure image is loaded before anything else occurs
 function preload() {
   // load the original image
-  img = loadImage("assets/rover.png"); 
+  img = loadImage('assets/rover.png');
 }
 
 // setup() runs after preload, once()
@@ -36,17 +40,15 @@ function setup() {
 // draw() runs after setup(), normally on a loop
 // in this case it runs only once, because of noDraw()
 function draw() {
-  
   // place the original image on the upper left corner
   image(img, 0, 0);
 
   // create a new image, same dimensions as img
   edgeImg = createImage(img.width, img.height);
-  
+
   // load its pixels
   edgeImg.loadPixels();
 
-  
   // two for() loops, to iterate in x axis and y axis
   // since the kernel assumes that the pixel
   // has pixels above, under, left, and right
@@ -57,17 +59,16 @@ function draw() {
   for (let x = 1; x < img.width - 1; x++) {
     for (let y = 1; y < img.height - 1; y++) {
       // kernel sum for the current pixel starts as 0
-      let sum = 0; 
-      
+      let sum = 0;
+
       // kx, ky variables for iterating over the kernel
       // kx, ky have three different values: -1, 0, 1
       for (kx = -1; kx <= 1; kx++) {
         for (ky = -1; ky <= 1; ky++) {
-          
           let xpos = x + kx;
           let ypos = y + ky;
-          let pos = (y + ky)*img.width + (x + kx);
-          // since our image is grayscale, 
+          let pos = (y + ky) * img.width + (x + kx);
+          // since our image is grayscale,
           // RGB values are identical
           // we retrieve the red value for this example
           let val = red(img.get(xpos, ypos));
@@ -77,18 +78,18 @@ function draw() {
           // if we add 1 to kx and ky, we get 0, 1, 2
           // with that we can use it to iterate over kernel
           // and calculate the accumulated sum
-          sum += kernel[ky+1][kx+1] * val;
+          sum += kernel[ky + 1][kx + 1] * val;
         }
       }
-      
-      // set the pixel value of the edgeImg 
+
+      // set the pixel value of the edgeImg
       edgeImg.set(x, y, color(sum, sum, sum));
     }
   }
-  
+
   // updatePixels() to write the changes on edgeImg
   edgeImg.updatePixels();
-  
+
   // draw edgeImg at the right of the original image
   image(edgeImg, img.width, 0);
-}
+}

src/data/examples/en/05_Image/08_Brightness.js

@@ -5,17 +5,17 @@
  * <br><br><span class="small"><em>This example is ported from the <a href="https://processing.org/examples/brightness.html">Brightness example</a>
  * on the Processing website</em></span>
  */
-// This program adjusts the brightness 
-// of a part of the image by 
-// calculating the distance of 
+// This program adjusts the brightness
+// of a part of the image by
+// calculating the distance of
 // each pixel to the mouse.
 let img;
 // preload() runs once, before setup()
 // loadImage() needs to occur here instead of setup()
 // preload() makes sure image is loaded before anything else occurs
 function preload() {
   // load the original image
-  img = loadImage("assets/rover_wide.jpg");  
+  img = loadImage('assets/rover_wide.jpg');
 }
 // setup() runs after preload, once()
 function setup() {
@@ -25,40 +25,40 @@ function setup() {
 }
 
 function draw() {
-    image(img,0,0);
-    // Only need to load the pixels[] array once, because we're only
-    // manipulating pixels[] inside draw(), not drawing shapes.
-    loadPixels();
-    // We must also call loadPixels() on the PImage since we are going to read its pixels.
-    img.loadPixels();
-    for (let x = 0; x < img.width; x++) {
-        for (let y = 0; y < img.height; y++ ) {
-        // Calculate the 1D location from a 2D grid
-        let loc = (x + y*img.width)*4;
-        // Get the R,G,B values from image
-        let r,g,b;
-        r = img.pixels[loc];
-        // g = img.pixels[loc+1];
-        // b = img.pixels[loc+2];
-        // Calculate an amount to change brightness based on proximity to the mouse
-        // The closer the pixel is to the mouse, the lower the value of "distance"
-        let maxdist = 50;//dist(0,0,width,height);
-        let d = dist(x, y, mouseX, mouseY);
-        let 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
-        let pixloc = (y*width + x)*4;
-        pixels[pixloc] = r;
-        pixels[pixloc+1] = r;
-        pixels[pixloc+2] = r;
-        pixels[pixloc+3] = 255; // Always have to set alpha
-        }
+  image(img, 0, 0);
+  // Only need to load the pixels[] array once, because we're only
+  // manipulating pixels[] inside draw(), not drawing shapes.
+  loadPixels();
+  // We must also call loadPixels() on the PImage since we are going to read its pixels.
+  img.loadPixels();
+  for (let x = 0; x < img.width; x++) {
+    for (let y = 0; y < img.height; y++) {
+      // Calculate the 1D location from a 2D grid
+      let loc = (x + y * img.width) * 4;
+      // Get the R,G,B values from image
+      let r, g, b;
+      r = img.pixels[loc];
+      // g = img.pixels[loc+1];
+      // b = img.pixels[loc+2];
+      // Calculate an amount to change brightness based on proximity to the mouse
+      // The closer the pixel is to the mouse, the lower the value of "distance"
+      let maxdist = 50; //dist(0,0,width,height);
+      let d = dist(x, y, mouseX, mouseY);
+      let 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
+      let pixloc = (y * width + x) * 4;
+      pixels[pixloc] = r;
+      pixels[pixloc + 1] = r;
+      pixels[pixloc + 2] = r;
+      pixels[pixloc + 3] = 255; // Always have to set alpha
     }
-    updatePixels();
-}
+  }
+  updatePixels();
+}

src/data/examples/en/05_Image/09_Convolution.js

@@ -6,16 +6,18 @@
  * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
  * local server</a>.</span></em></p>
  */
- 
+
 let img;
 let w = 80;
 
-// 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. 
-const 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. This is a high-pass
+// filter; it accentuates the edges.
+const matrix = [
+  [-1, -1, -1],
+  [-1,  9, -1],
+  [-1, -1, -1]
+];
 
 function preload() {
   img = loadImage('assets/moonwalk.jpg');
@@ -36,20 +38,20 @@ function draw() {
   background(img);
 
   // Calculate the small rectangle we will process
-  const xstart = constrain(mouseX - w/2, 0, img.width);
-  const ystart = constrain(mouseY - w/2, 0, img.height);
-  const xend = constrain(mouseX + w/2, 0, img.width);
-  const yend = constrain(mouseY + w/2, 0, img.height);
+  const xstart = constrain(mouseX - w / 2, 0, img.width);
+  const ystart = constrain(mouseY - w / 2, 0, img.height);
+  const xend = constrain(mouseX + w / 2, 0, img.width);
+  const yend = constrain(mouseY + w / 2, 0, img.height);
   const matrixsize = 3;
 
   loadPixels();
   // Begin our loop for every pixel in the smaller image
   for (let x = xstart; x < xend; x++) {
-    for (let y = ystart; y < yend; y++ ) {
+    for (let y = ystart; y < yend; y++) {
       let c = convolution(x, y, matrix, matrixsize, img);
-      
+
       // retrieve the RGBA values from c and update pixels()
-      let loc = (x + y*img.width) * 4;
+      let loc = (x + y * img.width) * 4;
       pixels[loc] = red(c);
       pixels[loc + 1] = green(c);
       pixels[loc + 2] = blue(c);
@@ -64,29 +66,28 @@ function convolution(x, y, matrix, matrixsize, img) {
   let gtotal = 0.0;
   let btotal = 0.0;
   const offset = Math.floor(matrixsize / 2);
-  for (let i = 0; i < matrixsize; i++){
-    for (let j = 0; j < matrixsize; j++){
-      
+  for (let i = 0; i < matrixsize; i++) {
+    for (let j = 0; j < matrixsize; j++) {
       // What pixel are we testing
-      const xloc = (x + i - offset);
-      const yloc = (y + j - offset);
+      const xloc = x + i - offset;
+      const yloc = y + j - offset;
       let loc = (xloc + img.width * yloc) * 4;
 
       // Make sure we haven't walked off our image, we could do better here
-      loc = constrain(loc, 0 , img.pixels.length - 1);
+      loc = constrain(loc, 0, img.pixels.length - 1);
 
       // Calculate the convolution
       // retrieve RGB values
-      rtotal += (img.pixels[loc]) * matrix[i][j];
-      gtotal += (img.pixels[loc + 1]) * matrix[i][j];
-      btotal += (img.pixels[loc + 2]) * matrix[i][j];
+      rtotal += img.pixels[loc] * matrix[i][j];
+      gtotal += img.pixels[loc + 1] * matrix[i][j];
+      btotal += img.pixels[loc + 2] * 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);
-} 
+}

src/data/examples/en/05_Image/10_Copy_Method.js

@@ -6,13 +6,13 @@
  */
 let draft, ready;
 function preload() {
-  ready = loadImage("assets/parrot-color.png");
-  draft = loadImage("assets/parrot-bw.png");
+  ready = loadImage('assets/parrot-color.png');
+  draft = loadImage('assets/parrot-bw.png');
 }
 function setup() {
   createCanvas(600, 400);
   noCursor();
-  cursor("assets/brush.png", 20, -10);
+  cursor('assets/brush.png', 20, -10);
   image(ready, 0, 0);
   image(draft, 0, 0);
 }