Add Chinese translation for variables and change#1202
Open
zmuen wants to merge 1 commit intoprocessing:mainfrom
Open
Add Chinese translation for variables and change#1202zmuen wants to merge 1 commit intoprocessing:mainfrom
zmuen wants to merge 1 commit intoprocessing:mainfrom
Conversation
lirenjie95
reviewed
Feb 26, 2026
Contributor
There was a problem hiding this comment.
@zmuen Thank you very much for your contribution! I have reviewed your translation and have some feedback that you may find helpful. Additionally, as a friendly suggestion, if you haven't set up p5.js locally yet, we recommend following the documentation to try it out, so you can preview how your translated documentation renders.
PS: This PR addresses issue #1175
|
|
||
| ## 第1步：选择从哪里开始<a id="step-1"></a> | ||
|
|
||
| 登录[p5.js网页编辑器](https://editor.p5js.org/) and choose one of the following options: |
| 登录[p5.js网页编辑器](https://editor.p5js.org/) and choose one of the following options: | ||
|
|
||
| - 如果你已经完成了之前的 [入门指南](/tutorials/get-started): | ||
| - 复制你的 [交互式风景画](https://editor.p5js.org/p5Master718/sketches/aDwxcxCbV) 并为它命名一个新名称。 |
Contributor
There was a problem hiding this comment.
“命名一个新名称”有点拗口，改成“起个新名字”或者“重新命名”吧
| text(`${mouseX}, ${mouseY}`, 20, 20); | ||
| ``` | ||
|
|
||
| <Callout title="提示"> |
Contributor
There was a problem hiding this comment.
title写成“提示”渲染会成功吗？如果没有在本地部署过p5.js-website，可以重新检查一遍。我没有试过。
如果保持写成Tip的话，因为i18n配置了yaml和翻译const t = await getUiTranslator(currentLocale);，会自动翻译成提示。
Contributor
There was a problem hiding this comment.
看源代码是可以的，double check下最好
https://github.com/processing/p5.js-website/blob/main/src/components/Callout/index.astro
| 代码行``text(`${mouseX}, ${mouseY}`, 20, 20);``会把鼠标指针的 x 与 y 坐标以坐标对 x, y 的形式显示出来。第一个数字是变量[mouseX](/reference/p5/mouseX)的值，表示鼠标指针在画布上移动时的 x 坐标；第二个数字是变量[mouseY](/reference/p5/mouseY)的值，表示鼠标指针的 y 坐标。 | ||
|
|
||
|
|
||
| <Callout title="提示"> |
|
|
||
| 想了解更多，请查看[string interpolation](https://www.geeksforgeeks.org/string-interpolation-in-javascript/)（示例2），[template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)，或 p5.js 关于[string](/reference/p5/String)的参考页面！ | ||
|
|
||
| <Callout title="注意"> |
Comment on lines
+671
to
+678
| ```js | ||
| //trunk | ||
| fill("rgb(118,80,72)"); | ||
| rect(340, 330, 15, 50); | ||
| //leaves | ||
| fill("green"); | ||
| triangle(325, 330, 345, 240 - frameCount % 290, 370, 330); | ||
| ``` |
Comment on lines
+682
to
+746
| <EditableSketch code={` | ||
| //custom variable for x coordinate of clouds | ||
| let cloudOneX = 50; | ||
|
|
||
| function setup() { | ||
| createCanvas(400, 400); | ||
| } | ||
|
|
||
| function draw() { | ||
| background('navy'); //navy background | ||
| frameRate(15); //set frame rate to 15 | ||
|
|
||
| //moon | ||
| fill(255); | ||
| stroke(0); | ||
| circle(350, 50, 100); | ||
|
|
||
| //overlap by navy circle for crescent moon | ||
| stroke("navy"); | ||
| fill("navy"); | ||
| circle(320,50,100); | ||
|
|
||
| //big gray mountains | ||
| stroke(0); | ||
| fill(80); | ||
| triangle(-40,300,75,100, 250,300); | ||
| triangle(100,300,300,100, 500,300); | ||
|
|
||
| //grass | ||
| fill('rgb(50,76,50)'); | ||
| rect(0,300, 400, 100); | ||
|
|
||
| //clouds | ||
| fill(255); | ||
| ellipse(cloudOneX, 50, 80, 40); | ||
| ellipse(cloudOneX - 40, 100, 60, 20); | ||
| ellipse(cloudOneX + 20, 150, 40, 10); | ||
|
|
||
| //growing trees | ||
|
|
||
| //trunk | ||
| fill("rgb(118,80,72)"); | ||
| rect(40, 270, 15, 50); | ||
|
|
||
| //leaves | ||
| fill("green"); | ||
| triangle(25, 270, 45, 240 - frameCount % 290,70, 270); | ||
|
|
||
| //trunk | ||
| fill("rgb(118,80,72)"); | ||
| rect(340, 330, 15, 50); | ||
|
|
||
| //leaves | ||
| fill("green"); | ||
| triangle(325, 330, 345, 240 - frameCount % 290, 370, 330); | ||
|
|
||
| //sets the x coordinate to the frame count | ||
| //resets at left edge | ||
| cloudOneX = frameCount % width | ||
|
|
||
| //displays the x and y position of the mouse on the canvas | ||
| fill(255) //white text | ||
| text(\`mouseX: \${mouseX}, mouseY: \${mouseY}\`, 20, 20); | ||
| } | ||
| `} /> |
Comment on lines
+766
to
+797
| ## Step 7: Add random motion<a id="step-7"></a> | ||
|
|
||
| - Add shooting stars that appear at random locations in the sky. | ||
| - Declare two variables, `lineXone` and `lineYone`, and initialize them with `0` by adding these lines of text before [`setup()`](/reference/p5/setup): | ||
|
|
||
| ```js | ||
| //custom variable for shooting stars | ||
| let lineXone = 0; | ||
| let lineYone = 0; | ||
| ``` | ||
|
|
||
| - Draw a line that will represent a shooting star by adding this text under `frameRate(15)`: | ||
|
|
||
| ```js | ||
| //shooting star | ||
| stroke("yellow"); | ||
| line(lineXone, lineYone, lineXone + 30, lineYone - 30); | ||
| ``` | ||
|
|
||
| - Set `lineXone` and `lineYone` to random values by adding this text after the line of code where `cloudOneX` is assigned to `frameCount % width`: | ||
|
|
||
| ```js | ||
| //set shooting star to random location | ||
| lineXone = random(0, width); | ||
| lineYone = random(0, height/2); | ||
| ``` | ||
|
|
||
| - Delete the lines of code at the bottom of `draw()` that show the x- and y-coordinates of the mouse pointer to view your final project. | ||
| - Share with your friends! | ||
|
|
||
| Your code should look like this: | ||
|
|
| - 因为你希望树叶“生长”，三角形的顶部顶点需要在每次 [`draw()`](/reference/p5/draw) 运行时向上移动。正如[这个示例](https://editor.p5js.org/p5Master718/sketches/605MEWNxh)所示，在画布上向上移动意味着 y 坐标（`y2`）减小。 | ||
| - 为了实现这种运动，你将 `y2` 修改为 `240 - frameCount % 290`。这会根据 [`frameCount`](/reference/p5/frameCount) 除以 290 的余数，逐步减小 `y2` 的值。 | ||
| - 正如在[第 5 步](#step-5)中所看到的，每当 [`draw()`](/reference/p5/draw) 运行一次，`frameCount % 290` 的值就会增加 1，因此 `y2` 也随之变化： | ||
| - 在 [`draw()`](/reference/p5/draw) 运行之前，`y2` 为 240； |
Comment on lines
+913
to
+932
| ## 资源 | ||
|
|
||
| - [Coding Train Video Tutorials: ](https://thecodingtrain.com/tracks/code-programming-with-p5-js) | ||
| - [1.5 - Errors](https://www.youtube.com/watch?v=LuGsp5KeJMM) | ||
| - [1.6 - Comments](https://www.youtube.com/watch?v=xJcrPJuem5Q) | ||
| - [2.1 - mouseX & mouseY](https://youtu.be/7A5tKW9HGoM) | ||
| - [2.2 - Variables](https://www.youtube.com/watch?v=dRhXIIFp-ys) | ||
| - [2.4 - random()](https://www.youtube.com/watch?v=POn4cZ0jL-o) | ||
| - [Grow Flipbook Video](https://www.youtube.com/watch?v=J2xrN5WQuxw) | ||
| * [Guidelines for writing JavaScript code](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript#comments) | ||
| * [Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) | ||
| * [Remainder (`%`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder) | ||
| * [String Interpolation in JavaScript](https://www.geeksforgeeks.org/string-interpolation-in-javascript/) | ||
|
|
||
|
|
||
| ## 参考文献 | ||
|
|
||
| - [Introduction to Computational Media Curriculum](https://cs4all-icm.gitbook.io/js-intro-to-computational-media-2.0), [NYCPS Computer Science Education team](https://sites.google.com/schools.nyc.gov/cs4allnyc/) | ||
| - [Creative Web Curriculum](https://blueprint.cs4all.nyc/curriculum/creative-web/), [NYCPS Computer Science Education team](https://sites.google.com/schools.nyc.gov/cs4allnyc/) | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes made:
Added Chinese translation for tutorial Variables and Change in the following path:
src/content/tutorials/zh-Hans/variables-and-change.mdx