Merge pull request #663 from sm7515/chinese_translate

translating Interaction section

Author: limzykenneth

src/data/examples/zh-Hans/10_Interaction/10_Tickle.js

@@ -1,14 +1,14 @@
 /*
  * @name Tickle
- * @description The word "tickle" jitters when the cursor hovers over.
- * Sometimes, it can be tickled off the screen.
+ * @description "tickle" 这个单词会在光标移至它时抖动。
+ * 有时还会抖出屏幕。
  */
 let message = 'tickle',
   font,
-  bounds, // holds x, y, w, h of the text's bounding box
+  bounds, // 存储文本框的 x, y, w, h 值
   fontsize = 60,
   x,
-  y; // x and y coordinates of the text
+  y; // 文本的 x 和 y 坐标
 
 function preload() {
   font = loadFont('assets/SourceSansPro-Regular.otf');
@@ -17,11 +17,11 @@ function preload() {
 function setup() {
   createCanvas(710, 400);
 
-  // set up the font
+  // 设置字体
   textFont(font);
   textSize(fontsize);
 
-  // get the width and height of the text so we can center it initially
+  // 获取文本的宽度和高度，以便我们可以首先将其居中
   bounds = font.textBounds(message, 0, 0, fontsize);
   x = width / 2 - bounds.w / 2;
   y = height / 2 - bounds.h / 2;
@@ -30,12 +30,12 @@ function setup() {
 function draw() {
   background(204, 120);
 
-  // write the text in black and get its bounding box
+  // 写出黑色的文本并获取其文本框
   fill(0);
   text(message, x, y);
   bounds = font.textBounds(message, x, y, fontsize);
 
-  // check if the mouse is inside the bounding box and tickle if so
+  // 检查鼠标是否在文本框里；如果在文本框内，抖动文本
   if (
     mouseX >= bounds.x &&
     mouseX <= bounds.x + bounds.w &&

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,34 @@
 /*
- * @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
- * 
- * Testing audio: https://www.youtube.com/watch?v=GtJW1Dlt3cg
- * Load this sketch onto an Arduino: 
+ *
+ * 实例: https://editor.p5js.org/jywarren/sketches/rkztwSt8M
+ *
+ * 测试音频: 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.
+ * 从引脚 3 + 地引脚（GND）输出音频。请使用使用麦克风或音频线。
  */
 
-function setup() { 
+function setup() {
   createCanvas(400, 400);
   noStroke();
   fill('#ff00aa22');
   receiveSensorData(handleData);
-} 
+}
 
 function handleData(data) {
+  console.log(data); // 打出数据
+  // data[0] 是第一个值, data[1] 是第二个, 以此类推.
 
-  console.log(data); // output the values to log
-  // data[0] is the 1st value, data[1] 2nd, etc.
-
-  // 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);
 }