translate all examples in 08_Math

Author: MuyingLi

src/data/examples/zh-Hans/08_Math/00_incrementdecrement.js

@@ -1,7 +1,6 @@
 /*
- * @name Increment Decrement
- * @description Writing "a++" is equivalent to "a = a + 1".
- * Writing "a--" is equivalent to "a = a - 1".
+ * @name 增量/减量
+ * @description "a++" 等于 "a = a + 1"。 "a--" 等于 "a = a - 1"。
  */
 let a;
 let b;

src/data/examples/zh-Hans/08_Math/01_operatorprecedence.js

@@ -1,24 +1,20 @@
 /*
- * @name Operator Precedence
- * @description If you don't explicitly state the order in which an
- * expression is evaluated, they are evaluated based on the operator
- * precedence. For example, in the statement "4+2*8", the 2 will
- * first be multiplied by 8 and then the result will be added to 4.
- * This is because the "*" has a higher precedence than the "+". To avoid
- * ambiguity in reading the program, it is recommended that is statement
- * is written as "4+(2*8)". The order of evaluation can be controlled
- * through placement of parenthesis in the code. A table of operator
- * precedence follows below.
+ * @name 操作符优先级
+ * @description 如果没有明确地指明表达式求值的次序，表达式将根据操作符的优先级来求值。
+ * 例如，在 "4+2*8" 的语句中, 2 会先乘 8，其结果再加上 4。
+ * 这是因为 "*" 的优先级比 "+" 的高。
+ * 为了避免读取程序时的模凌两可，建议将该语句写成 "4+(2*8)"。
+ * 在代码中加上括号可以控制求值的次序。
+ * 以下是操作符优先级列表。
  */
-// The highest precedence is at the top of the list and
-// the lowest is at the bottom.
-// Multiplicative: * / %
-// Additive: + -
-// Relational: < > <= >=
-// Equality: == !=
-// Logical AND: &&
-// Logical OR: ||
-// Assignment: = += -= *= /= %=
+// 最高级（最先执行）的位于列表上方，最低级（最后执行）的位于下方。
+// 乘法: * / %
+// 加法: + -
+// 比较: < > <= >=
+// 相等: == !=
+// 逻辑与 (AND): &&
+// 逻辑或 (OR): ||
+// 赋值: = += -= *= /= %=
 function setup() {
   createCanvas(710, 400);
   background(51);
@@ -27,25 +23,23 @@ function setup() {
 
   stroke(204);
   for (let i = 0; i < width - 20; i += 4) {
-    // The 30 is added to 70 and then evaluated
-    // if it is greater than the current value of "i"
-    // For clarity, write as "if (i > (30 + 70)) {"
+    // 30 和 70 先相加，其结果再和现在的 i 值比较大小
+    // 更清楚的写法是："if (i > (30 + 70)) {"
     if (i > 30 + 70) {
       line(i, 0, i, 50);
     }
   }
 
   stroke(255);
-  // The 2 is multiplied by the 8 and the result is added to the 4
-  // For clarity, write as "rect(5 + (2 * 8), 0, 90, 20);"
+  // 2 和 8 先相乘，其结果再加 4
+  // 更清楚的写法是："rect(5 + (2 * 8), 0, 90, 20);"
   rect(4 + 2 * 8, 52, 290, 48);
   rect((4 + 2) * 8, 100, 290, 49);
 
   stroke(153);
   for (let i = 0; i < width; i += 2) {
-    // The relational statements are evaluated
-    // first, and then the logical AND statements and
-    // finally the logical OR. For clarity, write as:
+    // 先算关系表达式，再是逻辑与 (AND)，最后是逻辑或 (OR)
+    // 更清楚的写法是： 
     // "if(((i > 20) && (i < 50)) || ((i > 100) && (i < width-20))) {"
     if ((i > 20 && i < 50) || (i > 100 && i < width - 20)) {
       line(i, 151, i, height - 1);

src/data/examples/zh-Hans/08_Math/02_distance1d.js

@@ -1,7 +1,6 @@
 /*
- * @name Distance 1D
- * @description Move the mouse left and right to control
- * the speed and direction of the moving shapes.
+ * @name 一维间距
+ * @description 左右移动鼠标来控制移动形状的速度和方向。
  */
 let xpos1;
 let xpos2;

src/data/examples/zh-Hans/08_Math/03_distance2d.js

@@ -1,8 +1,7 @@
 /*
- * @name Distance 2D
- * @description Move the mouse across the image to obscure
- * and reveal the matrix. Measures the distance from the mouse
- * to each square and sets the size proportionally.
+ * @name 二维间距
+ * @description 在图片上移动鼠标来遮盖并显示矩阵。
+ * 测量鼠标到每个正方形的距离，并按比例设置大小。
  */
 let max_distance;
 

src/data/examples/zh-Hans/08_Math/04_sine.js

@@ -1,6 +1,6 @@
 /*
- * @name Sine
- * @description Smoothly scaling size with the sin() function.
+ * @name 正弦
+ * @description 使用 sin() 函数平滑地缩放大小。
  */
 let diameter;
 let angle = 0;
@@ -18,7 +18,7 @@ function draw() {
   let d1 = 10 + (sin(angle) * diameter) / 2 + diameter / 2;
   let d2 = 10 + (sin(angle + PI / 2) * diameter) / 2 + diameter / 2;
   let d3 = 10 + (sin(angle + PI) * diameter) / 2 + diameter / 2;
-
+  
   ellipse(0, height / 2, d1, d1);
   ellipse(width / 2, height / 2, d2, d2);
   ellipse(width, height / 2, d3, d3);

src/data/examples/zh-Hans/08_Math/05_sincosine.js

@@ -1,9 +1,8 @@
 /*
- * @name Sine Cosine
- * @description Linear movement with sin() and cos().
- * Numbers between 0 and PI*2 (TWO_PI which angles roughly 6.28)
- * are put into these functions and numbers between -1 and 1 are returned.
- * These values are then scaled to produce larger movements.
+ * @name 正弦余弦
+ * @description sin() 函数和 cos() 函数的线性运动。
+ * 将 0 到 PI*2 (TWO_PI 的角度大致是 6.28) 之间的数字放进这些函数将返回 -1 到 1 之间的数字。
+ * 然后这些数字将缩放以产生更大的运动。
  */
 let angle1 = 0;
 let angle2 = 0;

src/data/examples/zh-Hans/08_Math/06_sinewave.js

@@ -1,16 +1,16 @@
 /*
- * @name Sine Wave
- * @description Render a simple sine wave.
- * Original by Daniel Shiffman.
+ * @name 正弦波
+ * @description Render 是一个简单的正弦波。
+ * 作者：Daniel Shiffman
  */
 
-let xspacing = 16; // Distance between each horizontal location
-let w; // Width of entire wave
-let theta = 0.0; // Start angle at 0
-let amplitude = 75.0; // Height of wave
-let period = 500.0; // How many pixels before the wave repeats
-let dx; // Value for incrementing x
-let yvalues; // Using an array to store height values for the wave
+let xspacing = 16; // 每个水平位置的距离
+let w; // 波的宽度
+let theta = 0.0; // 初始角度为 0
+let amplitude = 75.0; // 波的高度
+let period = 500.0; // 波在重复前的像素个数
+let dx; // x 的增量
+let yvalues; // 保存波的高度的数组
 
 function setup() {
   createCanvas(710, 400);
@@ -26,11 +26,8 @@ function draw() {
 }
 
 function calcWave() {
-  // Increment theta (try different values for
-  // 'angular velocity' here)
-  theta += 0.02;
-
-  // For every x value, calculate a y value with sine function
+  // theta 增量（尝试赋予 ‘角速度’ 不同的数值）
+  // 对于每一个 x 值，使用正弦函数计算 y 值
   let x = theta;
   for (let i = 0; i < yvalues.length; i++) {
     yvalues[i] = sin(x) * amplitude;
@@ -41,7 +38,7 @@ function calcWave() {
 function renderWave() {
   noStroke();
   fill(255);
-  // A simple way to draw the wave with an ellipse at each location
+  // 在波上的每个位置画椭圆
   for (let x = 0; x < yvalues.length; x++) {
     ellipse(x * xspacing, height / 2 + yvalues[x], 16, 16);
   }

src/data/examples/zh-Hans/08_Math/07_additivewave.js

@@ -1,19 +1,17 @@
 /*
- * @name Additive Wave
- * @description Create a more complex wave by adding two waves together.
- * Original by Daniel Shiffman
+ * @name 加性波
+ * @description 通过相加两个波来绘制一个更复杂的波。
+ * 作者：Daniel Shiffman
  */
-let xspacing = 8; // Distance between each horizontal location
-let w; // Width of entire wave
-let maxwaves = 4; // total # of waves to add together
+let xspacing = 8; // 每个水平位置的距离
+let w; // 波的宽度
+let maxwaves = 4; // 相加的波的总数
 
 let theta = 0.0;
-let amplitude = new Array(maxwaves); // Height of wave
-// Value for incrementing X, to be calculated
-// as a function of period and xspacing
+let amplitude = new Array(maxwaves); // 波的高度
+// x 的增量值，根据周期和水平位置距离来计算
 let dx = new Array(maxwaves);
-// Using an array to store height values
-// for the wave (not entirely necessary)
+// 用数组保存波的高度（不完全需要）
 let yvalues;
 
 function setup() {
@@ -24,7 +22,7 @@ function setup() {
 
   for (let i = 0; i < maxwaves; i++) {
     amplitude[i] = random(10, 30);
-    let period = random(100, 300); // Num pixels before wave repeats
+    let period = random(100, 300); // 波在重复前的像素个数
     dx[i] = (TWO_PI / period) * xspacing;
   }
 
@@ -38,20 +36,19 @@ function draw() {
 }
 
 function calcWave() {
-  // Increment theta (try different values
-  // for 'angular velocity' here
+  // theta 增量（尝试赋予 ‘角速度’ 不同的数值）
   theta += 0.02;
 
-  // Set all height values to zero
+  // 所有高度设为 0
   for (let i = 0; i < yvalues.length; i++) {
     yvalues[i] = 0;
   }
 
-  // Accumulate wave height values
+  // 累积波的高度
   for (let j = 0; j < maxwaves; j++) {
     let x = theta;
     for (let i = 0; i < yvalues.length; i++) {
-      // Every other wave is cosine instead of sine
+      // 每一个其他的波是余弦，而不是正弦
       if (j % 2 === 0) yvalues[i] += sin(x) * amplitude[j];
       else yvalues[i] += cos(x) * amplitude[j];
       x += dx[j];
@@ -60,7 +57,7 @@ function calcWave() {
 }
 
 function renderWave() {
-  // A simple way to draw the wave with an ellipse at each location
+  // 在波上的每个位置画椭圆
   noStroke();
   fill(255, 50);
   ellipseMode(CENTER);

src/data/examples/zh-Hans/08_Math/08_polartocartesian.js

@@ -1,20 +1,19 @@
 /*
  * @name PolarToCartesian
- * @description Convert a polar coordinate (r,theta)
- * to cartesian (x,y): x = rcos(theta) y = rsin(theta)
- * Original by Daniel Shiffman.
+ * @description 转换极坐标 (r,theta) 到笛卡尔坐标 (x,y): x = rcos(theta) y = rsin(theta)。
+ * 作者：Daniel Shiffman
  */
 let r;
 
-// Angle and angular velocity, accleration
+// 角度，角速度，角加速度
 let theta;
 let theta_vel;
 let theta_acc;
 
 function setup() {
   createCanvas(710, 400);
 
-  // Initialize all values
+  // 初始化所有值
   r = height * 0.45;
   theta = 0;
   theta_vel = 0;
@@ -24,21 +23,21 @@ function setup() {
 function draw() {
   background(0);
 
-  // Translate the origin point to the center of the screen
+  // 将原点设为屏幕中心
   translate(width/2, height/2);
 
-  // Convert polar to cartesian
+  // 转换极坐标到笛卡尔坐标
   let x = r * cos(theta);
   let y = r * sin(theta);
 
-  // Draw the ellipse at the cartesian coordinate
+  // 在笛卡尔坐标系上画椭圆
   ellipseMode(CENTER);
   noStroke();
   fill(200);
   ellipse(x, y, 32, 32);
 
-  // Apply acceleration and velocity to angle
-  // (r remains static in this example)
+  // 应用加速度和速度到角度上
+  // （此示例中 r 保持静态）
   theta_vel += theta_acc;
   theta += theta_vel;
 }

src/data/examples/zh-Hans/08_Math/09_arctangent.js

@@ -1,6 +1,7 @@
 /*
- * @name Arctangent
- * @description Move the mouse to change the direction of the eyes.<br>The atan2() function computes the angle from each eye to the cursor.
+ * @name 反正切
+ * @description 移动鼠标来改变眼球的方向。<br>
+ * atan2() 函数计算每个眼球到鼠标的角度。
  */
 let e1, e2, e3;