diff --git a/src/data/examples/zh-Hans/16_Dom/03_Input_Button.js b/src/data/examples/zh-Hans/16_Dom/03_Input_Button.js
index d3aaf9cc42..06c455a24d 100644
--- a/src/data/examples/zh-Hans/16_Dom/03_Input_Button.js
+++ b/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 你需要在该范例中包含
+ * p5.dom 库
+ * 才能在你自己的项目中使用。
+ * 输入文本并点击按钮查看它对画布的影响。
*/
let input, button, greeting;
function setup() {
- // create canvas
+ // 创建画布
createCanvas(710, 400);
input = createInput();
diff --git a/src/data/examples/zh-Hans/16_Dom/04_Slider.js b/src/data/examples/zh-Hans/16_Dom/04_Slider.js
index 6cb48ced1c..a23ee26194 100644
--- a/src/data/examples/zh-Hans/16_Dom/04_Slider.js
+++ b/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 你需要在该范例中包含
+ * p5.dom 库
+ * 才能在你自己的项目中使用。
+ * 滑动滑杆来控制背景的 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);
diff --git a/src/data/examples/zh-Hans/16_Dom/07_Modify_DOM.js b/src/data/examples/zh-Hans/16_Dom/07_Modify_DOM.js
index 9ac89b7595..51308e7676 100644
--- a/src/data/examples/zh-Hans/16_Dom/07_Modify_DOM.js
+++ b/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
你需要在该范例中包含
+ * p5.dom 库
+ * 才能在你自己的项目中使用。
+ * 每次调用 draw() 函数时,创建 DOM 元素并修改其属性。
加载多种格式的视频并通过按钮来控制播放与暂停。 + *
要在本地运行此范例,你需要至少一个视频文件和 + * p5.dom 库。
*/ 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(); diff --git a/src/data/examples/zh-Hans/16_Dom/09_Video_Canvas.js b/src/data/examples/zh-Hans/16_Dom/09_Video_Canvas.js index 2a59151e06..6c46027707 100644 --- a/src/data/examples/zh-Hans/16_Dom/09_Video_Canvas.js +++ b/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 - * local server. + * @name 视频画布 + * @description加载多种格式的视频并绘制到画布。
+ *要在本地运行此范例,你需要至少一个视频文件和 + * p5.dom 库, + * 并运行在本地伺服器上。
*/ 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(); // 将视频设置为循环播放并开始播放 } diff --git a/src/data/examples/zh-Hans/16_Dom/10_Video_Pixels.js b/src/data/examples/zh-Hans/16_Dom/10_Video_Pixels.js index 9169e37a3d..be633f4b46 100644 --- a/src/data/examples/zh-Hans/16_Dom/10_Video_Pixels.js +++ b/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 - * local server. + * @description加载一个视频,操纵其像素并绘制到画布上。 + *
要在本地运行此范例,你需要至少一个视频文件和 + * p5.dom 库, + * 并运行在本地伺服器上。
*/ 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(); diff --git a/src/data/examples/zh-Hans/16_Dom/11_Capture.js b/src/data/examples/zh-Hans/16_Dom/11_Capture.js index 4e22e6afef..9415c91348 100644 --- a/src/data/examples/zh-Hans/16_Dom/11_Capture.js +++ b/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 - * local server. + * @description
+ * 从网络摄像头中捕捉视频,并在画布上加上反向滤镜显示出来。
+ * 请注意:在默认情况下,捕捉文件也会显示出来。你可以取消 capture.hide() 那行的注释来隐藏文件。
+ * 要在本地运行此范例,你需要至少一个视频文件和
+ * p5.dom 库,
+ * 并运行在本地伺服器上。