translate all exmaples in section 05_Image into Chinese and all Chinese inline documentations

Author: MuyingLi

src/data/examples/zh-Hans/05_Image/00_Load_and_Display_Image.js

@@ -1,22 +1,20 @@
 /*
- * @name Load and Display Image
- * @description Images can be loaded and displayed to the screen at their
- * actual size or any other size.
- * <p><em><span class="small"> To run this example locally, you will need an 
- * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
- * local server</a>.</span></em></p>
+ * @name 加载(Load)和显示(Display)图像
+ * @description 图像可以以原图大小或自定义大小被加载和显示。
+ * <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * 本地伺服器</a>上。</span></em></p>
 
  */
-let img; // Declare variable 'img'.
+let img; // 声明变量'img'
 
 function setup() {
   createCanvas(720, 400);
-  img = loadImage('assets/moonwalk.jpg'); // Load the image
+  img = loadImage('assets/moonwalk.jpg'); // 加载图像
 }
 
 function draw() {
-  // Displays the image at its actual size at point (0,0)
+  // 在坐标(0, 0)，显示原图大小的图像 
   image(img, 0, 0);
-  // Displays the image at point (0, height/2) at half size
+  // 在坐标(0, 高度/2)，显示一半原图大小的图像
   image(img, 0, height / 2, img.width / 2, img.height / 2);
 }

src/data/examples/zh-Hans/05_Image/01_Background_Image.js

@@ -1,19 +1,16 @@
 /*
- * @name Background Image
- * @description This example presents the fastest way to load a
- * background image. To load an image as the background,
- * it must be the same width and height as the program.
- * <p><em><span class="small"> To run this example locally, you will need an
- * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
- * local server</a>.</span></em></p>
+ * @name 背景图像
+ * @description 此范例展示了最快加载背景图像的方法。
+ * 若需将一张图像作为背景，它必须和程序有相同的宽度和高度。
+ * <p><em><span class="small">要在本地运行此示例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * 本地伺服器</a>上。</span></em></p>
  */
 let bg;
 let y = 0;
 
 function setup() {
-  // The background image must be the same size as the parameters
-  // into the createCanvas() method. In this program, the size of
-  // the image is 720x400 pixels.
+  // 背景图像的大小必须和createCanvas() 函数中的参数一样。
+  // 该图像大小为720x400 像素。
   bg = loadImage('assets/moonwalk.jpg');
   createCanvas(720, 400);
 }

src/data/examples/zh-Hans/05_Image/02_Transparency.js

@@ -1,25 +1,23 @@
 /*
- * @name Transparency
- * @description Move the pointer left and right across the image to change its
- * position. This program overlays one image over another by modifying the
- * alpha value of the image with the tint() function.
- * <p><em><span class="small"> To run this example locally, you will need an
- * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
- * local server</a>.</span></em></p>
+ * @name 透明度
+ * @description 左右移动指针（光标）来改变图像位置
+ * 此程序为一张图像叠加在另一张上，通过tint() 函数来改变它的透明度值(alpha value)。
+ * <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * 本地伺服器</a>上。</span></em></p>
  */
 let img;
 let offset = 0;
 let easing = 0.05;
 
 function setup() {
   createCanvas(720, 400);
-  img = loadImage('assets/moonwalk.jpg'); // Load an image into the program
+  img = loadImage('assets/moonwalk.jpg'); // 加载图像
 }
 
 function draw() {
-  image(img, 0, 0); // Display at full opacity
+  image(img, 0, 0); // 完全不透明
   let dx = mouseX - img.width / 2 - offset;
   offset += dx * easing;
-  tint(255, 127); // Display at half opacity
+  tint(255, 127); // 半透明
   image(img, offset, 0);
 }

src/data/examples/zh-Hans/05_Image/03_Alpha_Mask.js

@@ -1,22 +1,22 @@
 /*
  * @name Alpha Mask
- * @description Loads a "mask" for an image to specify the transparency in
- * different parts of the image. The two images are blended together using
- * the mask() method of p5.Image.
- * <p><em><span class="small"> To run this example locally, you will need two
- * image files, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
- * local server</a>.</span></em></p>
+ * @description 在图像上加载一个蒙版来改变图像中不同位置的透明度。
+ * 通过拍p5.Image 中的mask() 函数来混合两张图像（图像和蒙版）。
+ * <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * 本地伺服器</a>上。</span></em></p>
  */
 let img;
 let imgMask;
 
 function preload() {
+  // 加载图像及图像蒙版
   img = loadImage('assets/moonwalk.jpg');
   imgMask = loadImage('assets/mask.png');
 }
 
 function setup() {
   createCanvas(720, 400);
+  // maske()函数将图像蒙版覆盖在图像上
   img.mask(imgMask);
   imageMode(CENTER);
 }

src/data/examples/zh-Hans/05_Image/04_Create_Image.js

@@ -1,20 +1,25 @@
 /*
- * @name Create Image
- * @description The createImage() function provides a fresh buffer of pixels to
- * play with. This example creates an image gradient.
+ * @name 创建图像
+ * @description createImage() 函数能让我们巧妙地操控一堆像素。 此范例创建了一个渐变图像。
  */
-let img; // Declare variable 'img'.
+let img; // 声明变量'img'
 
 function setup() {
   createCanvas(720, 400);
+  // 设置图像大小230*230 像素
   img = createImage(230, 230);
+
+  // 将显示窗口的像素资料加载到 pixels[] 数组里
+  // 这函数必须在读写 pixels[] 之前被调用
   img.loadPixels();
   for (let x = 0; x < img.width; x++) {
     for (let y = 0; y < img.height; y++) {
       let a = map(y, 0, img.height, 255, 0);
+      // 使用set() 设置该位置像素的颜色
       img.set(x, y, [0, 153, 204, a]);
     }
   }
+  // 使用set() 后，必须调用updatePixels() 以使改变生效
   img.updatePixels();
 }
 

src/data/examples/zh-Hans/05_Image/05_Pointillism.js

@@ -1,34 +1,43 @@
 /*
- * @name Pointillism
- * @description By Dan Shiffman. Mouse horizontal location controls size of
- * dots. Creates a simple pointillist effect using ellipses colored according
- * to pixels in an image.
- * <p><em><span class="small"> To run this example locally, you will need an
- * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
- * local server</a>.</span></em></p>
+ * @name 点画(Pointillism)
+ * @description 作者：Dan Shiffman。
+ * 鼠标水平位置控制点的大小，由左到右对应由小到大的点。
+ * 通过带有原图像素颜色的椭圆创建出一副简单的点画。
+ * <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * 本地伺服器</a>上。</span></em></p>
  */
+// 声明变量'img', 'smallPoint', 'largePoing'
 let img;
 let smallPoint, largePoint;
 
 function preload() {
+  // 加载图像
   img = loadImage('assets/moonwalk.jpg');
 }
 
 function setup() {
   createCanvas(720, 400);
+  // 设置最小点宽度为4，最大点宽度为40
   smallPoint = 4;
   largePoint = 40;
   imageMode(CENTER);
   noStroke();
+  // 设置背景颜色为白色
   background(255);
   img.loadPixels();
 }
 
 function draw() {
+  // map() 函数根据鼠标水平位置，
+  // 将其在[0, 画布宽度] 的数值对应到[最小点宽度, 最大点宽度] ([4,40]) 之中，
+  // 对应的数值即为点的大小
   let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
+  // 随机生成坐标(x, y)
   let x = floor(random(img.width));
   let y = floor(random(img.height));
+  // 得到图像中坐标(x, y) 的颜色
   let pix = img.get(x, y);
+  // fill(灰度值，透明度值)
   fill(pix, 128);
   ellipse(x, y, pointillize, pointillize);
 }