done with section 7

Author: sm7515

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,14 +1,16 @@
 /*
- * @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;
 
 function preload() {
-  img = loadImage('assets/moonwalk.jpg');
+  img = loadImage("assets/moonwalk.jpg");
 }
 
 function setup() {
@@ -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');

src/data/examples/zh-Hans/07_Color/04_Relativity.js

@@ -1,8 +1,8 @@
 /*
- * @name Relativity
- * @description Each color is perceived in relation to other colors. The top
- * and bottom bars each contain the same component colors, but a different
- * display order causes individual colors to appear differently.
+ * @name 相对性
+ * @description 我们对每个颜色的感知都是相对于其他颜色而言的。
+ * 上半部分和下半部分的条形具有相同的颜色构成，但是他们呈现每个颜色的顺序不同，
+ * 让同一个颜色看起来也不一样。
  */
 let a, b, c, d, e;
 
@@ -14,7 +14,7 @@ function setup() {
   c = color(42, 106, 105);
   d = color(165, 89, 20);
   e = color(146, 150, 127);
-  noLoop(); // Draw only one time
+  noLoop(); // 只画一次
 }
 
 function draw() {

src/data/examples/zh-Hans/07_Color/05_Linear_Gradient.js

@@ -1,17 +1,16 @@
 /*
- * @name Linear Gradient
- * @description The lerpColor() function is useful for interpolating between
- * two colors.
+ * @name 线性渐变
+ * @description lerpColor()函数可用于在两个颜色之间插值。
  */
-// Constants
+// 常量
 const Y_AXIS = 1;
 const X_AXIS = 2;
 let b1, b2, c1, c2;
 
 function setup() {
   createCanvas(710, 400);
 
-  // Define colors
+  // 定义颜色
   b1 = color(255);
   b2 = color(0);
   c1 = color(204, 102, 0);
@@ -21,10 +20,10 @@ function setup() {
 }
 
 function draw() {
-  // Background
+  // 背景
   setGradient(0, 0, width / 2, height, b1, b2, X_AXIS);
   setGradient(width / 2, 0, width / 2, height, b2, b1, X_AXIS);
-  // Foreground
+  // 前景
   setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
   setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
 }
@@ -33,15 +32,15 @@ function setGradient(x, y, w, h, c1, c2, axis) {
   noFill();
 
   if (axis === Y_AXIS) {
-    // Top to bottom gradient
+    // 从上到下的渐变
     for (let i = y; i <= y + h; i++) {
       let inter = map(i, y, y + h, 0, 1);
       let c = lerpColor(c1, c2, inter);
       stroke(c);
       line(x, i, x + w, i);
     }
   } else if (axis === X_AXIS) {
-    // Left to right gradient
+    // 从左到右的渐变
     for (let i = x; i <= x + w; i++) {
       let inter = map(i, x, x + w, 0, 1);
       let c = lerpColor(c1, c2, inter);

src/data/examples/zh-Hans/07_Color/06_Radial_Gradient.js

@@ -1,7 +1,6 @@
 /*
- * @name Radial Gradient
- * @description Draws a series of concentric circles to create a gradient
- * from one color to another.
+ * @name 径向渐变
+ * @description 绘制一系列同心圆，创造出从一个颜色到另一个颜色到渐变效果。
  */
 let dim;
 

src/data/examples/zh-Hans/07_Color/07_Lerp_Color.js

@@ -1,7 +1,6 @@
 /*
  * @name Lerp Color
- * @description Loop random shapes,
- * lerp color from red to blue.
+ * @description 随机循环形状，颜色从红色到蓝色。
  */
 function setup() {
   createCanvas(720, 400);
@@ -18,31 +17,47 @@ function draw() {
   for (let i = 0; i < 15; i++) {
     fill(from);
     quad(
-      random(-40, 220), random(height),
-      random(-40, 220), random(height),
-      random(-40, 220), random(height),
-      random(-40, 220), random(height)
+      random(-40, 220),
+      random(height),
+      random(-40, 220),
+      random(height),
+      random(-40, 220),
+      random(height),
+      random(-40, 220),
+      random(height)
     );
     fill(c1);
     quad(
-      random(140, 380), random(height),
-      random(140, 380), random(height),
-      random(140, 380), random(height),
-      random(140, 380), random(height)
+      random(140, 380),
+      random(height),
+      random(140, 380),
+      random(height),
+      random(140, 380),
+      random(height),
+      random(140, 380),
+      random(height)
     );
     fill(c2);
     quad(
-      random(320, 580), random(height),
-      random(320, 580), random(height),
-      random(320, 580), random(height),
-      random(320, 580), random(height)
+      random(320, 580),
+      random(height),
+      random(320, 580),
+      random(height),
+      random(320, 580),
+      random(height),
+      random(320, 580),
+      random(height)
     );
     fill(to);
     quad(
-      random(500, 760), random(height),
-      random(500, 760), random(height),
-      random(500, 760), random(height),
-      random(500, 760), random(height)
+      random(500, 760),
+      random(height),
+      random(500, 760),
+      random(height),
+      random(500, 760),
+      random(height),
+      random(500, 760),
+      random(height)
     );
   }
   frameRate(5);