Merge pull request #648 from nyu-ossd-s20/translate

translate examples 05_Image and 07_Color into Chinese

Author: limzykenneth

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>
+ * @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);
+  // mask() 函数将图像遮罩覆盖在图像上
   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);
+  // 设置图像大小 230x230 像素
   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);
 }

src/data/examples/zh-Hans/07_Color/00_Hue.js

@@ -1,8 +1,8 @@
 /*
- * @name Hue
- * @description Hue is the color reflected from or transmitted through an
- * object and is typically referred to as the name of the color (red, blue,
- * yellow, etc.) Move the cursor vertically over each bar to alter its hue.
+ * @name 色调
+ * @description 色调是从物件反射或透过物件传播得到的颜色，
+ * 通常指颜色的名字（红色，蓝色，黄色等）。
+ * 将光标在每个条形上垂直移动以更改其色调。
  */
 const barWidth = 20;
 let lastBar = -1;

src/data/examples/zh-Hans/07_Color/01_Saturation.js

@@ -1,9 +1,8 @@
 /*
- * @name Saturation
- * @description Saturation is the strength or purity of the color and
- * represents the amount of gray in proportion to the hue. A "saturated"
- * color is pure and an "unsaturated" color has a large percentage of gray.
- * Move the cursor vertically over each bar to alter its saturation.
+ * @name 饱和度
+ * @description 饱和度是颜色的强度或者纯度，代表与色调成比例的灰色量。
+ * “饱和”的颜色是纯色；“不饱和”的颜色含有很大比例的灰色。
+ * 将光标在每个条形上垂直移动以更改其饱和度。
  */
 const barWidth = 20;
 let lastBar = -1;

src/data/examples/zh-Hans/07_Color/02_Brightness.js

@@ -1,9 +1,11 @@
 /*
- * @name Brightness
- * @description By Dan Shiffman. This program adjusts the brightness of a part
- * of the image by calculating the distance of each pixel to the mouse.
- * <p><em><span class="small"> To run this example locally, you will need
- * at least 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 作者 Dan Shiffman。
+ * 此程序通过计算每个像素距离光标的距离调整图像的局部亮度。
+ * <p><em><span class="small">
+ * 要在本地运行此范例，您需要至少一个图像文件，并运行在
+ * <a href="https://github.com/processing/p5.js/wiki/Local-server">
+ * 本地伺服器 </a>上。</span></em></p>
  */
 let img;
 
@@ -21,19 +23,19 @@ function setup() {
 function draw() {
   for (let x = 0; x < img.width; x++) {
     for (let y = 0; y < img.height; y++) {
-      // Calculate the 1D location from a 2D grid
+      // 通过 2D 网格计算1D位置
       let loc = (x + y * img.width) * 4;
-      // Get the R,G,B values from image
+      // 从图像里获取 R,G,B 数值
       let r, g, b;
       r = img.pixels[loc];
-      // Calculate an amount to change brightness based on proximity to the mouse
+      // 根据距离光标的距离计算亮度改变的量
       let maxdist = 50;
       let d = dist(x, y, mouseX, mouseY);
       let adjustbrightness = (255 * (maxdist - d)) / maxdist;
       r += adjustbrightness;
-      // Constrain RGB to make sure they are within 0-255 color range
+      // 限制 RGB 以确保它们在 0-255 的颜色范围内
       r = constrain(r, 0, 255);
-      // Make a new color and set pixel in the window
+      // 创建一个新颜色，并在窗口里设置像素
       //color c = color(r, g, b);
       let pixloc = (y * width + x) * 4;
       pixels[pixloc] = r;

src/data/examples/zh-Hans/07_Color/03_Color_Variables.js

@@ -1,7 +1,7 @@
 /*
- * @name Color Variables
- * @description (Homage to Albers.) This example creates variables for colors
- * that may be referred to in the program by a name, rather than a number.
+ * @name 颜色变量
+ * @description (向 Albers 致敬。) 此范例为颜色们建立了变量。
+ * 这样它们可以在程序中以名字指代，而非数字。
  */
 function setup() {
   createCanvas(710, 400);
@@ -12,8 +12,8 @@ function setup() {
   let middle = color(204, 153, 0);
   let outside = color(153, 51, 0);
 
-  // These statements are equivalent to the statements above.
-  // Programmers may use the format they prefer.
+  // 以下语句与上面的语句等效。
+  // 程序员可以选择他们喜欢的格式。
   //let inside = color('#CC6600');
   //let middle = color('#CC9900');
   //let outside = color('#993300');