Merge branch 'translate' of https://github.com/nyu-ossd-s20/p5.js-website into translate

merge with section 5

Author: sm7515

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

@@ -5,7 +5,7 @@
  * 本地伺服器</a>上。</span></em></p>
 
  */
-let img; // 声明变量'img'
+let img; // 声明变量 'img'
 
 function setup() {
   createCanvas(720, 400);

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

@@ -9,8 +9,8 @@ let bg;
 let y = 0;
 
 function setup() {
-  // 背景图像的大小必须和createCanvas() 函数中的参数一样。
-  // 该图像大小为720x400 像素。
+  // 背景图像的大小必须和 createCanvas() 函数中的参数一样。
+  // 该图像大小为 720x400 像素。
   bg = loadImage('assets/moonwalk.jpg');
   createCanvas(720, 400);
 }

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

@@ -1,22 +1,22 @@
 /*
- * @name Alpha Mask
- * @description 在图像上加载一个蒙版来改变图像中不同位置的透明度。
- * 通过拍p5.Image 中的mask() 函数来混合两张图像（图像和蒙版）。
+ * @name 透明度遮罩 (Alpha Mask)
+ * @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()函数将图像蒙版覆盖在图像上
+  // mask() 函数将图像遮罩覆盖在图像上
   img.mask(imgMask);
   imageMode(CENTER);
 }

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

@@ -1,12 +1,12 @@
 /*
  * @name 创建图像
- * @description createImage() 函数能让我们巧妙地操控一堆像素。 此范例创建了一个渐变图像。
+ * @description createImage() 函数能让我们巧妙地操控一个像素缓冲区。 此范例创建了一个渐变图像。
  */
-let img; // 声明变量'img'
+let img; // 声明变量 'img'
 
 function setup() {
   createCanvas(720, 400);
-  // 设置图像大小230*230 像素
+  // 设置图像大小 230x230 像素
   img = createImage(230, 230);
 
   // 将显示窗口的像素资料加载到 pixels[] 数组里
@@ -15,11 +15,11 @@ function setup() {
   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() 设置该位置像素的颜色
+      // 使用 set() 设置该位置像素的颜色
       img.set(x, y, [0, 153, 204, a]);
     }
   }
-  // 使用set() 后，必须调用updatePixels() 以使改变生效
+  // 使用 set() 后，必须调用updatePixels() 以使改变生效
   img.updatePixels();
 }
 

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

@@ -6,7 +6,7 @@
  * <p><em><span class="small">要在本地运行此范例，您需要一个图像文件，并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">
  * 本地伺服器</a>上。</span></em></p>
  */
-// 声明变量'img', 'smallPoint', 'largePoing'
+// 声明变量 'img', 'smallPoint', 'largePoing'
 let img;
 let smallPoint, largePoint;
 
@@ -17,7 +17,7 @@ function preload() {
 
 function setup() {
   createCanvas(720, 400);
-  // 设置最小点宽度为4，最大点宽度为40
+  // 设置最小点宽度为 4，最大点宽度为 40
   smallPoint = 4;
   largePoint = 40;
   imageMode(CENTER);
@@ -29,13 +29,13 @@ function setup() {
 
 function draw() {
   // map() 函数根据鼠标水平位置，
-  // 将其在[0, 画布宽度] 的数值对应到[最小点宽度, 最大点宽度] ([4,40]) 之中，
+  // 将其在 [0, 画布宽度] 的数值对应到 [最小点宽度, 最大点宽度] ([4,40]) 之中，
   // 对应的数值即为点的大小
   let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
-  // 随机生成坐标(x, y)
+  // 随机生成坐标 (x, y)
   let x = floor(random(img.width));
   let y = floor(random(img.height));
-  // 得到图像中坐标(x, y) 的颜色
+  // 得到图像中坐标 (x, y) 的颜色
   let pix = img.get(x, y);
   // fill(灰度值，透明度值)
   fill(pix, 128);