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 元素并修改其属性。

*/ 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++) { diff --git a/src/data/examples/zh-Hans/16_Dom/08_Video.js b/src/data/examples/zh-Hans/16_Dom/08_Video.js index 8786bb4cde..fb8dd08296 100644 --- a/src/data/examples/zh-Hans/16_Dom/08_Video.js +++ b/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

加载多种格式的视频并通过按钮来控制播放与暂停。 + *

要在本地运行此范例,你需要至少一个视频文件和 + * 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 库, + * 并运行在本地伺服器上。

*/ let capture; diff --git a/src/data/examples/zh-Hans/16_Dom/12_Drop.js b/src/data/examples/zh-Hans/16_Dom/12_Drop.js index a36665e460..e35708a16d 100644 --- a/src/data/examples/zh-Hans/16_Dom/12_Drop.js +++ b/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 你需要在该范例中包含 + * p5.dom 库 + * 才能在你自己的项目中使用。

+ * 拖放图片至画布来显示。 */ 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!');