Skip to content

Add Chinese translation for organizing-code-with-functions.mdx#1302

Open
Chiuye wants to merge 1 commit intoprocessing:mainfrom
Chiuye:translate/organizing-code-with-functions
Open

Add Chinese translation for organizing-code-with-functions.mdx#1302
Chiuye wants to merge 1 commit intoprocessing:mainfrom
Chiuye:translate/organizing-code-with-functions

Conversation

@Chiuye
Copy link
Copy Markdown

@Chiuye Chiuye commented Apr 5, 2026

Summary

This PR adds a full Chinese (zh-CN) translation of the Organizing Code with Functions tutorial.

Notes

(Waiting to link to a new issue?)

@Chiuye
Copy link
Copy Markdown
Author

Chiuye commented Apr 5, 2026

@lirenjie95 Hi, sorry I'm a newcomer contributing to an open-source GitHub project for the first time, so I might not be familiar with some aspects. 😥😣
I tried creating a new branch in my forked repository and submitting a PR with commits from that branch. Is that the right way to do it?
Besides, I'm not quite sure how to create an issue. Should I put all language translations of the "Organizing Code with Functions" tutorial in one issue, or just the Chinese version I'm currently translating? And is there a fixed template or format for creating translation-related issues? Since I'm uncertain, I haven't created a new issue yet.
Could you please help check? I would greatly appreciate it. 😣🙏

@Chiuye Chiuye changed the title Add Chinese translation Add Chinese translation for organizing-code-with-functions.mdx Apr 5, 2026
Copy link
Copy Markdown
Contributor

@lirenjie95 lirenjie95 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Chiuye, thanks for your contribution! The translation looks great overall. I've noted a few places that read a bit awkward for your reference.
Regarding the issue attached to this PR — it's required for the main p5.js repo, though I didn't see it as a strict requirement for p5.js-website. Let's leave it as is. Feel free to tag the maintainer for merging once I've approved your new changes.

- 使用条件语句控制程序流程
- 注释代码并处理错误信息

有序组织代码是创建更复杂、更令人兴奋的程序的关键技能。它可以使你的代码对其他人来说更具可读性,让他们能够理解你的代码,并使协作变得更容易。它还允许你理解自己的代码并扩展想法,甚至有助于调试。函数是一种能够使你的代码变得更有条理、可重用和可访问的强大方法。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“有序组织代码”这个表达不常见,原文是“Organizing”,直接说“组织代码”或者“有条理的组织代码”怎么样?
“更令人兴奋”也偏欧式语法表达,“更让人兴奋”好一些。


我们可以看到有 4 个不同的相关代码组,我们可以将它们转换为自定义函数:绘制天空的代码、绘制太阳的代码、绘制山脉的代码以及更新变量的代码。

现在你可以为上述注释中所描述的原稿中的代码部分创建 4 个不同的自定义函数。自定义函数在 `setup()` 和 `draw()` 之外定义,通常在代码的底部。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

既然前面用来翻译sketch的是“草图”,那么希望保持一致,不要用“原稿”。如果还有其他一样的问题,麻烦一并修改。


## 定义自定义函数

我们还可以创建自己的函数来将代码分组。在上一个教程[条件语句与交互性](/tutorials/conditionals-and-interactivity)中,你创建了一个[日出动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO),其中 `draw()` 中的代码包含用注释标记的天空、太阳和山脉部分。你可以声明自定义函数,用特定名称将相关代码分组。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“用特定名称将相关代码分组。”感觉有点拗口,抱歉,我也一时想不到更好的翻译,或许拆成递进的两个结构比较好?

}
```

调用 `sky()` 会在 `draw()` 运行时运行 `sky()` 主体中的代码,并将天空的颜色变化添加到画布上。**函数调用**包括函数名后跟一对括号 `()`。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“主体中的代码”是笔误吗?应该是“函数体中的代码”


在这一步中,你声明了一个名为 `sun()` 的新函数,它使用圆圈绘制太阳。`draw()` 函数调用了 `sun()`,而 `sun()` 又调用了 `fill()` 和 `circle()`。`fill()` 和 `circle()` 也是 p5.js 库中内置的函数,不需要由程序员声明。

你声明的自定义函数通过简单的代码块创建形状、颜色和动画。这就是计算的力量:你在简单的基础上构建来创建复杂的草图。你已经使用了许多 p5.js 中的内置函数来制作动画和交互艺术。现在你有了创建自己的函数并扩展 p5.js 库的能力。通过定义你自己的函数,你可以创建很多东西!
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“你在简单的基础上构建来创建复杂的草图”这句话有点拗口而且意义不清。原文是“you build upon a simple foundation to create complex sketches.”如果不采用直译改成意译怎么样?“你从简单的基础构建起,创造出复杂的草图。”


使用函数绘制一棵树可以提高代码的组织性。这个函数的真正力量来自于它能够轻松地使用不同的位置和大小绘制多棵树。我们可以向 `tree()` 函数声明添加参数,这样我们可以使用不同的参数灵活配置并多次调用它。

把这一函数想象成一个饼干模具或模板会很有帮助。例如,你可以创建一棵新树,它类似于你上面创建的那棵,但每次调用函数时位置和大小都不同。要做到这一点,你需要在函数声明中包含参数,这样每一棵树都可以被自定义。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"把...想象成...会很有帮助" 偏欧式句式的直译。中文表述可以更清晰一点例如这两种: "把这个函数想象成饼干模具或模板,会更容易/便于理解。"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“这样每一棵树都可以被自定义”被动语句让句子表意不清晰了,改成“以便自定义每一棵树”吧。

}
```

自定义每棵树的参数是 `x`、`y` 和 `size`。这些参数分别指定树的 x 坐标、y 坐标和大小。为了保持树的相对形状相同,`rect()` 和 `triangle()` 函数使用带有参数和[算术运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators)的**数值表达式**。**数值表达式**,如 `x - size`,是能够计算得出数值的数学表达式。当数字和[算术运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators)用作函数调用中的参数时,它们将结果作为参数传递。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“它们将结果作为参数传递。”这里的它们指代不明。
但考虑到原文用的也是they,可以不修改。

rect(210-10,320,10*2,10*6);
```

- 计算得到的实参结果值用于在画布上绘制形状:
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“实参结果值”可能对初学者难以理解。原文是“resulting arguments”,用“结果参数”翻译怎么样?仅是建议。

}
```

在上面的步骤中,你定义了一个名为 `treeLine()` 的函数,它计算了一条线,使你可以沿着该线绘制多棵树。你还定义了一个函数,该函数使用你之前创建的 `tree()` 函数和 `treeLine()` 函数在你的风景中沿着一条线绘制多棵树。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这两个句子过长,可以拆分一下。


## 结论

像 `tree()` 这样的函数让你能够通过组合多个更简单的想法(绘制 [2D 形状](/reference#Shape))的方式来表达一个复杂的想法(绘制一棵树)。能够创建一行树的函数 `trees()` 进一步扩展了这个想法。无论你是在绘制风景还是设计交互式灯光秀,函数都可以帮助你通过更简单的想法单元来逐步构建复杂的想法。这称为**抽象**。抽象允许你在更高的层面上关注,这样你就不会被所有细节分心。想象一下,如果你通过调用数百次 `triangle()` 和 `rect()` 来动画化一片魔法森林,你的代码会是什么样子……跟踪所有事情是很难的。函数允许你以一种优雅且有组织的方式创建例如处理形状的具体坐标等细节的抽象。随着你的草图变得更加复杂,你会发现创建正确的抽象使你更能轻松地关注大局。
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“想法单元”?原文没有unit这个词呀,删掉即可。

@ksen0
Copy link
Copy Markdown
Member

ksen0 commented Apr 7, 2026

Hi @Chiuye and welcome! In general, we do prefer that there's an issue before a PR, but of course we consider on a case by case basis. No worries.

@Divyansh013 is the i18n steward overall and can be tagged too. I think we are focusing now on the more basic tutorials, but since this translation has already been proposed and reviewed, I think it is fine to merge it when it's done. But if it should wait fo something, or if it duplicates any work, please let us know @Divyansh013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants