translate all examples in DOM to Chinese

src/data/examples/zh-Hans/16_Dom/03_Input_Button.js

@@ -1,11 +1,14 @@
 /*
- * @name Input and Button
- * @description Input text and click the button to see it affect the the canvas.
+ * @name 输入框和按钮
+ * @description 你需要在该范例中包含
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库</a>
+ * 才能在你自己的项目中使用。<br><br>
+ * 输入文本并点击按钮查看它对画布的影响。
  */
 let input, button, greeting;
 
 function setup() {
-  // create canvas
+  // 创建画布
   createCanvas(710, 400);
 
   input = createInput();

src/data/examples/zh-Hans/16_Dom/04_Slider.js

@@ -1,16 +1,19 @@
 /*
- * @name Slider
- * @description Move the sliders to control the R, G, B values of the background.
+ * @name 滑杆
+ * @description 你需要在该范例中包含
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库</a>
+ * 才能在你自己的项目中使用。<br><br>
+ * 滑动滑杆来控制背景的 R, G, B 值。
  */
 let rSlider, gSlider, bSlider;
 
 function setup() {
-  // create canvas
+  // 创建画布
   createCanvas(710, 400);
   textSize(15);
   noStroke();
 
-  // create sliders
+  // 创建滑杆
   rSlider = createSlider(0, 255, 100);
   rSlider.position(20, 20);
   gSlider = createSlider(0, 255, 0);

src/data/examples/zh-Hans/16_Dom/07_Modify_DOM.js

@@ -1,8 +1,10 @@
 /*
- * @name Modifying the DOM
+ * @name 修改 DOM
  * @frame 710,300
- * @description Create DOM elements and modify their properties every time
- * draw() is called.
+ * @description <p>你需要在该范例中包含 
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库</a>
+ * 才能在你自己的项目中使用。<br><br>
+ * 每次调用 draw() 函数时，创建 DOM 元素并修改其属性。</p>
  */
 let dancingWords = [];
 
@@ -22,18 +24,16 @@ class DanceSpan {
 }
 
 function setup() {
-  // This paragraph is created aside of the main block of code.
-  // It's to differentiate the creation of an element from its
-  // selection. Selected elements don't need to be created by
-  // p5js, they can be just plain HTML.
+  // 该段落是在主要代码旁创建的。
+  // 为了区分创建元素和选择元素。
+  // 被选择的元素不需要被 p5.js 创建，可以是纯 HTML. 
   createP(
     'I learn in this Letter, that Don Peter of Aragon, ' +
       ' comes this night to Messina'
   ).addClass('text').hide();
 
-  // This line grabs the paragraph just created, but it would
-  // also grab any other elements with class 'text' in the HTML
-  // page.
+  // 这行抓取了刚创建的段落，
+  // 但同时也抓了 HTML 页面中任何其他类为 "text" 的元素。
   const texts = selectAll('.text');
 
   for (let i = 0; i < texts.length; i++) {

src/data/examples/zh-Hans/16_Dom/08_Video.js

@@ -1,21 +1,22 @@
 /*
- * @name Video
+ * @name 视频
  * @frame 710,250
- * @description Load a video with multiple formats and toggle between playing
- * and paused with a button press.
+ * @description <p>加载多种格式的视频并通过按钮来控制播放与暂停。
+ * <p><em><span class="small"> 要在本地运行此范例，你需要至少一个视频文件和
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库</a>。</span></em></p>
  */
 let playing = false;
 let fingers;
 let button;
 
 function setup() {
-  // specify multiple formats for different browsers
+  // 标明不同浏览器的多种格式
   fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
   button = createButton('play');
-  button.mousePressed(toggleVid); // attach button listener
+  button.mousePressed(toggleVid); // 加上按钮监听器 (listener)
 }
 
-// plays or pauses the video depending on current state
+// 根据当前状态，播放或暂停视频
 function toggleVid() {
   if (playing) {
     fingers.pause();

src/data/examples/zh-Hans/16_Dom/09_Video_Canvas.js

@@ -1,27 +1,27 @@
 /*
- * @name Video Canvas
- * @description Load a video with multiple formats and draw it to the canvas.
- * To run this example locally, you will need a running 
- * <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
+ * @name 视频画布
+ * @description <p>加载多种格式的视频并绘制到画布。</p>
+ * <p><em><span class="small"> 要在本地运行此范例，你需要至少一个视频文件和
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库，</a>
+ * 并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">本地伺服器</a>上。</span></em></p>
  */
 let fingers;
 
 function setup() {
   createCanvas(710, 400);
-  // specify multiple formats for different browsers
+  // 标明不同浏览器的多种格式
   fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
-  fingers.hide(); // by default video shows up in separate dom
-  // element. hide it and draw it to the canvas
-  // instead
+  fingers.hide(); // 默认情况下，视频将显示为单独的 DOM 元素。
+  // 隐藏并将其绘制到画布上 
 }
 
 function draw() {
   background(150);
-  image(fingers, 10, 10); // draw the video frame to canvas
+  image(fingers, 10, 10); // 将视频帧绘制到画布上
   filter(GRAY);
-  image(fingers, 150, 150); // draw a second copy to canvas
+  image(fingers, 150, 150); // 在画布上绘制第二个副本
 }
 
 function mousePressed() {
-  fingers.loop(); // set the video to loop and start playing
+  fingers.loop(); // 将视频设置为循环播放并开始播放
 }

src/data/examples/zh-Hans/16_Dom/10_Video_Pixels.js

@@ -1,15 +1,16 @@
 /*
- * @name Video Pixels
+ * @name 视频像素
  * @frame 320,240
- * @description Load a video, manipulate its pixels and draw to canvas.
- * To run this example locally, you will need a running 
- * <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
+ * @description <p>加载一个视频，操纵其像素并绘制到画布上。
+ * <p><em><span class="small"> 要在本地运行此范例，你需要至少一个视频文件和
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库，</a>
+ * 并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">本地伺服器</a>上。</span></em></p>
  */
 let fingers;
 
 function setup() {
   createCanvas(320, 240);
-  // specify multiple formats for different browsers
+  // 标明不同浏览器的多种格式
   fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
   fingers.loop();
   fingers.hide();

src/data/examples/zh-Hans/16_Dom/11_Capture.js

@@ -1,12 +1,12 @@
 /*
- * @name Video Capture
+ * @name 视频捕捉
  * @frame 710,240
- * @description Capture video from the webcam and display
- * on the canvas as well with invert filter. Note that by
- * default the capture feed shows up, too. You can hide the
- * feed by uncommenting the capture.hide() line.
- * To run this example locally, you will need a running 
- * <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.
+ * @description <p>
+ * 从网络摄像头中捕捉视频，并在画布上加上反向滤镜显示出来。
+ * 请注意：在默认情况下，捕捉文件也会显示出来。你可以取消 capture.hide() 那行的注释来隐藏文件。<br><br>
+ * <em><span class="small"> 要在本地运行此范例，你需要至少一个视频文件和
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom 库，</a>
+ * 并运行在<a href="https://github.com/processing/p5.js/wiki/Local-server">本地伺服器</a>上。</span></em></p>
  */
 let capture;
 

src/data/examples/zh-Hans/16_Dom/12_Drop.js

@@ -1,13 +1,16 @@
 /*
- * @name Drop
- * @description Drag an image file onto the canvas to see it displayed.
+ * @name 拖放图片 (Drop)
+ * @description 你需要在该范例中包含
+ * <a href="http://p5js.org/reference/#/libraries/p5.dom"> p5.dom 库</a>
+ * 才能在你自己的项目中使用。<br><br>
+ * 拖放图片至画布来显示。
  */
 
 function setup() {
-  // create canvas
+  // 创建画布
   const c = createCanvas(710, 400);
   background(100);
-  // Add an event for when a file is dropped onto the canvas
+  // 当文件被拖放到画布上时，为其添加事件
   c.drop(gotFile);
 }
 
@@ -21,11 +24,11 @@ function draw() {
 }
 
 function gotFile(file) {
-  // If it's an image file
+  // 如果是一个图片文件
   if (file.type === 'image') {
-    // Create an image DOM element but don't show it
+    // 创建一个图片 DOM 元素，但不显示出来
     const img = createImg(file.data).hide();
-    // Draw the image onto the canvas
+    // 将图片绘制到画布上
     image(img, 0, 0, width, height);
   } else {
     println('Not an image file!');