done

Author: sm7515

src/data/examples/zh-Hans/10_Interaction/20_Follow1.js

@@ -1,8 +1,8 @@
 /*
- * @name Follow 1
+ * @name 跟随 1
  * @frame 710,400
- * @description A line segment is pushed and pulled by the cursor.
- * Based on code from Keith Peters.
+ * @description 被光标拉扯的一条线段。
+ * 基于 Keith Peters 的代码。
  */
 let x = 100,
   y = 100,

src/data/examples/zh-Hans/10_Interaction/21_Follow2.js

@@ -1,9 +1,9 @@
 /*
- * @name Follow 2
+ * @name 跟随 2
  * @frame 710,400
- * @description A two-segmented arm follows the cursor position. The relative
- * angle between the segments is calculated with atan2() and the position
- * calculated with sin() and cos(). Based on code from Keith Peters.
+ * @description 跟随光标移动的两段式手臂。
+ * 两个手臂之间的相对角度是用 atan2() 计算的，位置是用 sin() 和 cos() 计算的。
+ * 基于 Keith Peters 的代码。
  */
 let x = [0, 0],
   y = [0, 0],

src/data/examples/zh-Hans/10_Interaction/22_Follow3.js

@@ -1,9 +1,9 @@
 /*
- * @name Follow 3
+ * @name 跟随 3
  * @frame 710,400
- * @description A segmented line follows the mouse. The relative angle from
- * each segment to the next is calculated with atan2() and the position of
- * the next is calculated with sin() and cos(). Based on code from Keith Peters.
+ * @description 随鼠标移动的一条分段式线条。
+ * 每段之间的相对角度是用 atan2() 计算的，位置是用 sin() 和 cos() 计算的。
+ * 基于 Keith Peters 的代码。
  */
 let x = [],
   y = [],

src/data/examples/zh-Hans/10_Interaction/23_snake.js

@@ -1,17 +1,16 @@
 /*
- * @name Snake game
- * @description The famous snake game! Once you click run, click anywhere
- * inside the black area, and control the snake using i j k and l. Don't let
- * the snake hit itself or the wall!<br>
- * Example created by <a href='https://github.com/prashantgupta24' target='_blank'>Prashant Gupta
+ * @name 贪吃蛇
+ * @description 著名的贪吃蛇游戏！点击 run 后，在黑色区域里任意点击， 
+ * 使用 i j k 和 l 控制蛇。注意不要让蛇碰到自己或者墙。<br>
+ * 由 <a href='https://github.com/prashantgupta24' target='_blank'>Prashant Gupta 创作的范例
  */
 
-// the snake is divided into small segments, which are drawn and edited on each 'draw' call
+// 蛇被分为几小段，在每次调用 draw() 时进行绘制和编辑
 let numSegments = 10;
 let direction = 'right';
 
-const xStart = 0; //starting x coordinate for snake
-const yStart = 250; //starting y coordinate for snake
+const xStart = 0; // 蛇的初始 x 坐标
+const yStart = 250; //蛇的初始 y 坐标
 const diff = 10;
 
 let xCor = [];
@@ -50,15 +49,12 @@ function draw() {
 }
 
 /*
- The segments are updated based on the direction of the snake.
- All segments from 0 to n-1 are just copied over to 1 till n, i.e. segment 0
- gets the value of segment 1, segment 1 gets the value of segment 2, and so on,
- and this results in the movement of the snake.
-
- The last segment is added based on the direction in which the snake is going,
- if it's going left or right, the last segment's x coordinate is increased by a
- predefined value 'diff' than its second to last segment. And if it's going up
- or down, the segment's y coordinate is affected.
+ 根据蛇的方向更新每个小段。
+ 从 0 至 n-1 的所有片段都被复制到 1 至 n，也就是说，段 0 获取 段 1 的值，
+ 段 1 获取 段 2 的值，以此类推，导致蛇的运动。
+
+ 最后一小段根据蛇运动的方向添加。如果蛇在左后移动，最后一小段的 x 坐标值将比倒数第二小段
+ 增加预定义值 "diff"；如果上下移动，则更改其 y 坐标值。
 */
 function updateSnakeCoordinates() {
   for (let i = 0; i < numSegments - 1; i++) {
@@ -86,9 +82,8 @@ function updateSnakeCoordinates() {
 }
 
 /*
- I always check the snake's head position xCor[xCor.length - 1] and
- yCor[yCor.length - 1] to see if it touches the game's boundaries
- or if the snake hits itself.
+ 检查蛇头的位置 xCor[xCor.length - 1] 和 yCor[yCor.length - 1] 来看它是否
+ 碰到边界或者自己。
 */
 function checkGameStatus() {
   if (
@@ -105,8 +100,7 @@ function checkGameStatus() {
 }
 
 /*
- If the snake hits itself, that means the snake head's (x,y) coordinate
- has to be the same as one of its own segment's (x,y) coordinate.
+ 如果蛇碰到自己，说明蛇头的 (x,y) 坐标和它自身的小段之一的 (x,y) 坐标相同。
 */
 function checkSnakeCollision() {
   const snakeHeadX = xCor[xCor.length - 1];
@@ -119,9 +113,8 @@ function checkSnakeCollision() {
 }
 
 /*
- Whenever the snake consumes a fruit, I increment the number of segments,
- and just insert the tail segment again at the start of the array (basically
- I add the last segment again at the tail, thereby extending the tail)
+ 蛇每吃一个水果，小段的数量就会增加，然后将尾段插入数组的开头
+ （将最后一个小段再次添加到尾部，从而延长了尾部）
 */
 function checkForFruit() {
   point(xFruit, yFruit);
@@ -137,9 +130,8 @@ function checkForFruit() {
 
 function updateFruitCoordinates() {
   /*
-    The complex math logic is because I wanted the point to lie
-    in between 100 and width-100, and be rounded off to the nearest
-    number divisible by 10, since I move the snake in multiples of 10.
+    这里的数学逻辑是因为我希望这个点位于 100 和 width-100 之间，并四舍五入到
+    10 的倍数 ，因为蛇以 10 的倍数移动。
   */
 
   xFruit = floor(random(10, (width - 100) / 10)) * 10;

src/data/examples/zh-Hans/10_Interaction/24_Wavemaker.js

@@ -1,8 +1,8 @@
 /*
- * @name Wavemaker
- * @description This illustrates how waves (like water waves) emerge
- * from particles oscillating in place. Move your mouse to direct the wave.
- * Contributed by Aatish Bhatia, inspired by <a href="https://beesandbombs.tumblr.com/post/45513650541/orbiters">Orbiters</a> by Dave Whyte.
+ * @name 造波器
+ * @description 此范例说明了波（如水波）是如何在粒子摆动中产生的。
+ * 移动鼠标以引导波浪。
+ * 由 Aatish Bhatia 贡献，灵感来自 Dave Whyte 的 <a href="https://beesandbombs.tumblr.com/post/45513650541/orbiters">Orbiters</a>。
  */
 
 let t = 0; // time variable
@@ -14,24 +14,24 @@ function setup() {
 }
 
 function draw() {
-  background(10, 10); // translucent background (creates trails)
+  background(10, 10); // 半透明背景（创建足迹）
 
-  // make a x and y grid of ellipses
+  // 创建 x 和 y 网格上的椭圆 
   for (let x = 0; x <= width; x = x + 30) {
     for (let y = 0; y <= height; y = y + 30) {
-      // starting point of each circle depends on mouse position
+      // 每个圆的初始位置取决于鼠标位置
       const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);
       const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true);
-      // and also varies based on the particle's location
+      // 也根据粒子的位置变化 
       const angle = xAngle * (x / width) + yAngle * (y / height);
 
-      // each particle moves in a circle
+      // 每个粒子绕圈运动 
       const myX = x + 20 * cos(2 * PI * t + angle);
       const myY = y + 20 * sin(2 * PI * t + angle);
 
-      ellipse(myX, myY, 10); // draw particle
+      ellipse(myX, myY, 10); // 绘制粒子
     }
   }
 
-  t = t + 0.01; // update time
+  t = t + 0.01; // 更新时间
 }

src/data/examples/zh-Hans/10_Interaction/25_reach1.js

@@ -1,8 +1,8 @@
 /*
- * @name Reach 1
+ * @name 延伸 1
  * @frame 710,400
- * @description The arm follows the position of the mouse by calculating the
- * angles with atan2(). Based on code from Keith Peters.
+ * @description 手臂随鼠标的位置移动，使用 atan2() 计算角度。
+ * 基于 Keith Peters 的代码。
  */
 let segLength = 80,
   x,

src/data/examples/zh-Hans/10_Interaction/26_reach2.js

@@ -1,8 +1,8 @@
 /*
- * @name Reach 2
+ * @name 延伸 2
  * @frame 710,400
- * @description The arm follows the position of the mouse by calculating the
- * angles with atan2(). Based on code from Keith Peters.
+ * @description 手臂随鼠标的位置移动，使用 atan2() 计算角度。
+ * 基于 Keith Peters 的代码。
  */
 let numSegments = 10,
   x = [],
@@ -23,8 +23,8 @@ function setup() {
   strokeWeight(20);
   stroke(255, 100);
 
-  x[x.length - 1] = width / 2; // Set base x-coordinate
-  y[x.length - 1] = height; // Set base y-coordinate
+  x[x.length - 1] = width / 2; // // 设置基础 x 坐标 
+  y[x.length - 1] = height; // 设置基础 y 坐标
 }
 
 function draw() {

src/data/examples/zh-Hans/10_Interaction/27_reach3.js

@@ -1,8 +1,8 @@
 /*
- * @name Reach 3
+ * @name 延伸 3
  * @frame 710,400
- * @description The arm follows the position of the ball by calculating the
- * angles with atan2(). Based on code from Keith Peters.
+ * @description 手臂随球的位置移动，使用 atan2() 计算角度。
+ * 基于 Keith Peters 的代码。
  */
 let numSegments = 8,
   x = [],
@@ -28,8 +28,8 @@ function setup() {
   stroke(255, 100);
   noFill();
 
-  x[x.length - 1] = width / 2; // Set base x-coordinate
-  y[x.length - 1] = height; // Set base y-coordinate
+  x[x.length - 1] = width / 2; // 设置基础 x 坐标 
+  y[x.length - 1] = height; // 设置基础 y 坐标
 }
 
 function draw() {

src/data/examples/zh-Hans/10_Interaction/28_ArduinoSensor.js

@@ -1,36 +1,36 @@
 /*
- * @name Arduino sensor data via WebJack
- * @description WebJack is a way to read data from an Arduino (and other sources)
- * using audio -- it basically turns your Arduino into an audio modem.
+ * @name 通过 WebJack 读取 Arduino 传感器数据
+ * @description WebJack 是使用音频从 Arduino（和其他来源） 
+ * 读取数据的方式 -- 它基本上将 Arduino 变成了音频调制解调器。
  * 
  * https://github.com/publiclab/webjack
  * 
- * Note: WebJack and p5-webjack libraries must be added to your index.html as follows:
+ * 注： WebJack 和 p5-webjack 库必须以以下方式添加到 index.html：
  * <pre><code class="language-markup">&lt;script src="https://webjack.io/dist/webjack.js">&lt;/script></code></pre>
  * <pre><code class="language-markup">&lt;script src="https://jywarren.github.io/p5-webjack/lib.js">&lt;/script></code></pre>
  * 
- * Working example: https://editor.p5js.org/jywarren/sketches/rkztwSt8M
+ * 实例: https://editor.p5js.org/jywarren/sketches/rkztwSt8M
  * 
- * Testing audio: https://www.youtube.com/watch?v=GtJW1Dlt3cg
- * Load this sketch onto an Arduino: 
+ * 测试音频: https://www.youtube.com/watch?v=GtJW1Dlt3cg
+ * 将此草图加载到 Arduino:
  * https://create.arduino.cc/editor/jywarren/023158d8-be51-4c78-99ff-36c63126b554/preview
- * Arduino will output audio from pin 3 + ground. Use microphone or an audio cable.
+ *  Arduino will output audio from pin 3 + ground. 请使用使用麦克风或音频线。
  */
 
-function setup() { 
+function setup() {
   createCanvas(400, 400);
   noStroke();
   fill('#ff00aa22');
   receiveSensorData(handleData);
-} 
+}
 
 function handleData(data) {
 
-  console.log(data); // output the values to log
-  // data[0] is the 1st value, data[1] 2nd, etc.
+  console.log(data); // 打出数据 
+  // data[0] 是第一个值, data[1] 是第二个, 以此类推.
 
-  // draw stuff! Browse http://p5js.org/reference/
+  // 绘制！ 参见 http://p5js.org/reference/
   background('#ddd');
-  ellipse(100, 200, data[0]+10, data[0]+10);
+  ellipse(100, 200, data[0] + 10, data[0] + 10);
 
 }

src/data/examples/zh-Hans/10_Interaction/29_kaleidoscope.js

@@ -1,47 +1,52 @@
 /*
- * @name Kaleidoscope
- * @description A kaleidoscope is an optical instrument with two or more reflecting surfaces tilted to each other in an angle. This example tries to replicate the behavior of a kaleidoscope. Set the number of reflections at the symmetry variable and start drawing on the screen. Adjust the brush size with the help of the slider. The clear screen as it says clears the screen. The save button will download a .jpg file of the art that you have created.
+ * @name 万花筒
+ * @description 万花筒是一个光学仪器，具有两个或多个互相倾斜的反射面。
+ * 此范例尝试模仿万花筒的效果。
+ * 通过 symmetry 变量设定反射的数量，并开始在屏幕上绘制。
+ * 通过 slider 调整画笔的大小。
+ * clearScreen()，顾名思义，清空屏幕。
+ * save 按钮将你绘制的艺术品以 .jpg 的文件格式下载下来。
  */
-// Symmetry corresponding to the number of reflections. Change the number for different number of reflections 
-let symmetry = 6;   
+// Symmetry 指反射的次数。更改此数值以改变反射的次数。 
+let symmetry = 6;
 
 let angle = 360 / symmetry;
 let saveButton, clearButton, mouseButton, keyboardButton;
 let slider;
 
-function setup() { 
+function setup() {
   createCanvas(710, 710);
   angleMode(DEGREES);
   background(127);
 
-  // Creating the save button for the file
+  // 制作保存文件的按钮
   saveButton = createButton('save');
   saveButton.mousePressed(saveFile);
 
-  // Creating the clear screen button
+  // 制作清空屏幕的按钮
   clearButton = createButton('clear');
   clearButton.mousePressed(clearScreen);
 
-  // Creating the button for Full Screen
+  // 制作全屏按钮 
   fullscreenButton = createButton('Full Screen');
   fullscreenButton.mousePressed(screenFull);
 
-  // Setting up the slider for the thickness of the brush
+  // 设置 slider 以改变笔刷的粗细 
   brushSizeSlider = createButton('Brush Size Slider');
   sizeSlider = createSlider(1, 32, 4, 0.1);
 }
 
-// Save File Function
+// 保存文件函数
 function saveFile() {
   save('design.jpg');
 }
 
-// Clear Screen function
+// 清空屏幕函数 
 function clearScreen() {
   background(127);
 }
 
-// Full Screen Function
+// 全屏函数 
 function screenFull() {
   let fs = fullscreen();
   fullscreen(!fs);
@@ -55,7 +60,7 @@ function draw() {
     let my = mouseY - height / 2;
     let pmx = pmouseX - width / 2;
     let pmy = pmouseY - height / 2;
-    
+
     if (mouseIsPressed) {
       for (let i = 0; i < symmetry; i++) {
         rotate(angle);