done

Author: sm7515

i18n-tracking.yml

@@ -179,6 +179,7 @@ es:
     line 608: '  book-1-authors'
     line 617: '  book-2-authors'
     line 409: '  p5.bots'
+    line 656: '  Image_Processing'
 zh-Hans:
   src/data/en.yml:
     line 480: '  notes3'
@@ -287,3 +288,4 @@ zh-Hans:
     line 608: '  book-1-authors'
     line 617: '  book-2-authors'
     line 409: '  p5.bots'
+    line 656: '  Image_Processing'

src/data/en.yml

@@ -653,6 +653,7 @@ examples:
   Arrays: "Arrays"
   Control: "Control"
   Image: "Image"
+  Image_Processing: "Image Processing"
   Color: "Color"
   Math: "Math"
   Simulate: "Simulate"

src/data/es.yml

@@ -654,6 +654,7 @@ examples:
   Arrays: "Arreglos"
   Control: "Control"
   Image: "Imagen"
+  Image_Processing: "Procesamiento de imagen"
   Color: "Color"
   Math: "Matemática"
   Simulate: "Simulación"

src/data/examples/assets/sea.jpg

@@ -0,0 +1,44 @@
+/*
+ * @name Pixel Array
+ * @description 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.
+ */
+
+let img;
+let direction = 1;
+let signal = 0;
+
+function setup() {
+  createCanvas(640, 360);
+  noFill();
+  stroke(255);
+  frameRate(30);
+  img = loadImage('assets/sea.jpg');
+}
+
+function draw() {
+  if (signal > img.width * img.height - 1 || signal < 0) {
+    direction = direction * -1;
+  }
+
+  if (mouseIsPressed) {
+    let mx = constrain(mouseX, 0, img.width - 1);
+    let my = constrain(mouseY, 0, img.height - 1);
+    signal = my * img.width + mx;
+  } else {
+    signal += 0.33 * direction;
+  }
+
+  let sx = int(signal) % img.width;
+  let sy = int(signal) / img.width;
+  if (keyIsPressed) {
+    set(0, 0, img); // fast way to draw an image
+    point(sx, sy);
+    rect(sx - 5, sy - 5, 10, 10);
+  } else {
+    let c = img.get(sx, sy);
+    background(c);
+  }
+}

src/data/examples/en/06_Image_Processing/00_ Pixel_Array.js

@@ -0,0 +1,44 @@
+/*
+ * @name Pixel Array
+ * @description 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.
+ */
+
+let img;
+let direction = 1;
+let signal = 0;
+
+function setup() {
+  createCanvas(640, 360);
+  noFill();
+  stroke(255);
+  frameRate(30);
+  img = loadImage('assets/sea.jpg');
+}
+
+function draw() {
+  if (signal > img.width * img.height - 1 || signal < 0) {
+    direction = direction * -1;
+  }
+
+  if (mouseIsPressed) {
+    let mx = constrain(mouseX, 0, img.width - 1);
+    let my = constrain(mouseY, 0, img.height - 1);
+    signal = my * img.width + mx;
+  } else {
+    signal += 0.33 * direction;
+  }
+
+  let sx = int(signal) % img.width;
+  let sy = int(signal) / img.width;
+  if (keyIsPressed) {
+    set(0, 0, img); // fast way to draw an image
+    point(sx, sy);
+    rect(sx - 5, sy - 5, 10, 10);
+  } else {
+    let c = img.get(sx, sy);
+    background(c);
+  }
+}

src/data/examples/es/06_Image_Processing/00_ Pixel_Array.js

@@ -0,0 +1,44 @@
+/*
+ * @name Pixel Array
+ * @description 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.
+ */
+
+let img;
+let direction = 1;
+let signal = 0;
+
+function setup() {
+  createCanvas(640, 360);
+  noFill();
+  stroke(255);
+  frameRate(30);
+  img = loadImage('assets/sea.jpg');
+}
+
+function draw() {
+  if (signal > img.width * img.height - 1 || signal < 0) {
+    direction = direction * -1;
+  }
+
+  if (mouseIsPressed) {
+    let mx = constrain(mouseX, 0, img.width - 1);
+    let my = constrain(mouseY, 0, img.height - 1);
+    signal = my * img.width + mx;
+  } else {
+    signal += 0.33 * direction;
+  }
+
+  let sx = int(signal) % img.width;
+  let sy = int(signal) / img.width;
+  if (keyIsPressed) {
+    set(0, 0, img); // fast way to draw an image
+    point(sx, sy);
+    rect(sx - 5, sy - 5, 10, 10);
+  } else {
+    let c = img.get(sx, sy);
+    background(c);
+  }
+}

src/data/examples/zh-Hans/06_Image_Processing/00_ Pixel_Array.js

@@ -653,6 +653,7 @@ examples:
   Arrays: "数组"
   Control: "控制"
   Image: "图像"
+  Image_Processing: "图像处理"
   Color: "颜色"
   Math: "数学"
   Simulate: "模拟"