Merge pull request #1288 from 0Susie0/Improve'Transfrom'Translation

Translate examples in transform module into Chinese

Author: limzykenneth

src/data/examples/zh-Hans/18_Transform/00_Translate.js

@@ -1,9 +1,8 @@
 /*
- * @name Translate
- * @description The translate() function allows objects to be
- * moved to any location within the window. The first parameter
- * sets the x-axis offset and the second parameter sets the
- * y-axis offset. This example shows how transforms accumulate.
+ * @name 平移
+ * @description translate() 函数能够让所有的对象都能够在窗口的任意位置移动.
+ * 第一个参数设置X轴的偏移量,第二个函数设置Y轴的偏移量. 这个例子展示了变化是如何累积的.
+ *
  */
 
 let x = 0;
@@ -17,23 +16,23 @@ function setup() {
 
 function draw() {
   background(102);
-  // Animate by increasing our x value
+  // 通过增加x的值来实现动画效果.
   x = x + 0.8;
-  // If the shape goes off the canvas, reset the position
+  // 如果该形状离开了画布，就重新设置位置。
   if (x > width + dim) {
     x = -dim;
   }
 
-  // Even though our rect command draws the shape with its
-  // center at the origin, translate moves it to the new
-  // x and y position
+  // 尽管我们的矩形命令是以原点为中心画出形状的，但平移会将它移动到新的位置。
+  // 中心在原点，但平移会将其移动到新的
+  // X和Y的位置
   translate(x, height / 2 - dim / 2);
   fill(255);
   rect(-dim / 2, -dim / 2, dim, dim);
 
-  // Transforms accumulate. Notice how this rect moves
-  // twice as fast as the other, but it has the same
-  // parameter for the x-axis value
+  // 变形累积。注意这个矩形的移动速度
+  // 的速度是另一个的两倍，但它的X轴值是相同的
+  // X轴值的参数
   translate(x, dim);
   fill(0);
   rect(-dim / 2, -dim / 2, dim, dim);

src/data/examples/zh-Hans/18_Transform/01_Scale.js

@@ -1,11 +1,11 @@
 /*
- * @name Scale
- * @description Paramenters for the scale() function are values
- * specified as decimal percentages. For example, the method
- * call scale(2.0) will increase the dimension of the shape by
- * 200 percent. Objects always scale from the origin. This example
- * shows how transforms accumulate and also how scale and translate
- * interact depending on their order.
+ * @name 缩放
+ * @description scale() 函数的参数是值
+ * 指定为小数百分比。 例如，
+ * 调用方法 scale(2.0) 将增加形状的尺寸
+ * 200%。 对象总是从原点缩放。 这个例子
+ * 显示变换如何累积以及缩放和平移如何
+ * 根据他们的顺序进行交互。
  */
 
 let a = 0.0;
@@ -14,31 +14,29 @@ let s = 0.0;
 function setup() {
   createCanvas(720, 400);
   noStroke();
-  //Draw all rectangles from their center as opposed to
-  // the default upper left corner
+  //从中心点开始画所有的矩形，而不是从默认的左上角开始。
   rectMode(CENTER);
 }
 
 function draw() {
   background(102);
 
-  //Slowly increase 'a' and then animate 's' with
-  //a smooth cyclical motion by finding the cosine of 'a'
+  //缓慢地增加'a'，然后用's'做动画。
+  //通过寻找'a'的余弦来实现平滑的循环运动
   a = a + 0.04;
   s = cos(a) * 2;
 
-  //Translate our rectangle from the origin to the middle of
-  //the canvas, then scale it with 's'
+  //将我们的矩形从原点移到画布的中间。
+  //然后用's'缩放它。
   translate(width / 2, height / 2);
   scale(s);
   fill(51);
   rect(0, 0, 50, 50);
 
-  //Translate and scale are accumulating, so this translate
-  //moves the second rectangle further right than the first
-  //and the scale is getting doubled. Note that cosine is
-  //making 's' both negative and positive, thus it cycles
-  //from left to right.
+  //translate和scale都是累加的，所以这个translate
+  //将第二个矩形移动到比第一个矩形更右的位置
+  //规模扩大了一倍。 注意余弦
+  //使's'既正又负，因此图像将从左到右的循环。
   translate(75, 0);
   fill(255);
   scale(s);

src/data/examples/zh-Hans/18_Transform/02_Rotate.js

@@ -1,14 +1,14 @@
 /*
- * @name Rotate
- * @description Rotating a square around the Z axis.
- * To get the results you expect, send the rotate function angle
- * parameters that are values between 0 and PI*2 (TWO_PI which is
- * roughly 6.28). If you prefer to think about angles as degrees
- * (0-360), you can use the radians() method to convert your values.
- * For example: scale(radians(90)) is identical to the statement
- * scale(PI/2). In this example, every even numbered second a jitter
- * is added to the rotation. During odd seconds rotation moves CW and
- * CCW at the speed determined by the last jitter value.
+ * @name 旋转
+ * @description 围绕 Z 轴旋转一个正方形。
+ * 要获得您期望的结果，请发送角度值介于 0 和 PI*2 之间的参数
+ * （TWO_PI 是大约 6.28）给rotate()函数。
+ * 如果您更喜欢用度数表示(0-360)，
+ * 您可以使用 radians() 方法来转换您的值。
+ * 例如：scale(radians(90)) 等同于语句
+ * 比例（PI/2）。 在这个例子中，每偶数秒一个抖动
+ * 被添加到旋转中。 在奇数秒旋转移动 CW 和
+ * CCW 以最后一个抖动值确定的速度。
  */
 
 let angle = 0.0;
@@ -18,26 +18,24 @@ function setup() {
   createCanvas(720, 400);
   noStroke();
   fill(255);
-  //Draw the rectangle from the center and it will also be the
-  //rotate around that center
+  //从中心绘制矩形，它也将围绕那个中心旋转
   rectMode(CENTER);
 }
 
 function draw() {
   background(51);
 
-  // during even-numbered seconds (0, 2, 4, 6...) add jitter to
-  // the rotation
+  // 在偶数秒 (0, 2, 4, 6...) 中添加抖动旋转
   if (second() % 2 === 0) {
     jitter = random(-0.1, 0.1);
   }
-  //increase the angle value using the most recent jitter value
+  //使用最近的抖动值增加角度值
   angle = angle + jitter;
-  //use cosine to get a smooth CW and CCW motion when not jittering
+  //在不抖动时使用余弦获得平滑的 CW 和 CCW 运动
   let c = cos(angle);
-  //move the shape to the center of the canvas
+  //将形状移动到画布的中心
   translate(width / 2, height / 2);
-  //apply the final rotation
+  //应用最终旋转
   rotate(c);
   rect(0, 0, 180, 180);
 }

src/data/examples/zh-Hans/18_Transform/03_Arm.js

@@ -1,11 +1,10 @@
 /*
- * @name Arm
- * @description This example uses transform matrices to create
- * an arm. The angle of each segment is controlled with the
- * mouseX and mouseY position. The transformations applied to
- * the first segment are also applied to the second segment
- * because they are inside the same push() and
- * pop() matrix group.
+ * @name 手臂
+ * @description 此示例使用变换矩阵创建
+ * 一只手臂。 每一段的角度都由
+ * 鼠标在画布上的位置控制。 应用于第一段变换方式
+ * 也适用于第二段因为它们在同一个 push()和pop()
+ * 矩阵组中。
  */
 
 let x, y;
@@ -17,31 +16,31 @@ function setup() {
   createCanvas(720, 400);
   strokeWeight(30);
 
-  //Stroke with a semi-transparent white
+  //用半透明的白色划线
   stroke(255, 160);
 
-  //Position the "shoulder" of the arm in the center of the canvas
+  //将手臂的 "肩膀 "放在画布的中心。
   x = width * 0.5;
   y = height * 0.5;
 }
 
 function draw() {
   background(0);
 
-  //Change the angle of the segments according to the mouse positions
+  //根据鼠标的位置来改变片段的角度
   angle1 = (mouseX / float(width) - 0.5) * -TWO_PI;
   angle2 = (mouseY / float(height) - 0.5) * PI;
 
-  //use push and pop to "contain" the transforms. Note that
-  // even though we draw the segments using a custom function,
-  // the transforms still accumulate
+  //使用push和pop来 "包含 "这些变换。请注意
+  // 即使我们使用一个自定义函数来画段。
+  // 变换仍然会累积
   push();
   segment(x, y, angle1);
   segment(segLength, 0, angle2);
   pop();
 }
 
-//a custom function for drawing segments
+//一个用于绘制分段的自定义函数。
 function segment(x, y, a) {
   translate(x, y);
   rotate(a);

src/data/zh-Hans.yml

@@ -945,7 +945,7 @@ examples:
   Instance_Mode: 实例模式
   Dom: DOM
   Drawing: Drawing
-  Transform: Transform
+  Transform: 变换
   Typography: Typography
   3D: 3D
   Input: Input