@@ -44,7 +44,7 @@ import Callout from "../../../components/Callout/index.astro";
4444- 使用条件语句控制程序流程
4545- 注释代码并处理错误信息
4646
47- 有序组织代码是创建更复杂、更令人兴奋的程序的关键技能 。它可以使你的代码对其他人来说更具可读性,让他们能够理解你的代码,并使协作变得更容易。它还允许你理解自己的代码并扩展想法,甚至有助于调试。函数是一种能够使你的代码变得更有条理、可重用和可访问的强大方法。
47+ 有条理地组织代码是创建更复杂、更让人兴奋的程序的关键技能 。它可以使你的代码对其他人来说更具可读性,让他们能够理解你的代码,并使协作变得更容易。它还允许你理解自己的代码并扩展想法,甚至有助于调试。函数是一种能够使你的代码变得更有条理、可重用和可访问的强大方法。
4848
4949## 什么是函数?
5050
@@ -68,7 +68,7 @@ function setup() {
6868
6969## 定义自定义函数
7070
71- 我们还可以创建自己的函数来将代码分组。在上一个教程[ 条件语句与交互性] ( /tutorials/conditionals-and-interactivity ) 中,你创建了一个[ 日出动画] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO ) ,其中 ` draw() ` 中的代码包含用注释标记的天空、太阳和山脉部分。你可以声明自定义函数,用特定名称将相关代码分组 。
71+ 我们还可以创建自己的函数来将代码分组。在上一个教程[ 条件语句与交互性] ( /tutorials/conditionals-and-interactivity ) 中,你创建了一个[ 日出动画] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO ) ,其中 ` draw() ` 中的代码包含用注释标记的天空、太阳和山脉部分。你可以声明自定义函数,为它起一个特定的名字并将相关的代码组合在一起 。
7272
7373### 步骤 1:用注释规划你的函数
7474
@@ -92,7 +92,7 @@ function setup() {
9292
9393我们可以看到有 4 个不同的相关代码组,我们可以将它们转换为自定义函数:绘制天空的代码、绘制太阳的代码、绘制山脉的代码以及更新变量的代码。
9494
95- 现在你可以为上述注释中所描述的原稿中的代码部分创建 4 个不同的自定义函数。自定义函数在 ` setup() ` 和 ` draw() ` 之外定义,通常在代码的底部。
95+ 现在你可以为上述注释中所描述的草图中的代码部分创建 4 个不同的自定义函数。自定义函数在 ` setup() ` 和 ` draw() ` 之外定义,通常在代码的底部。
9696
9797访问 p5.js 参考页面的 [ ` function ` ] ( /reference/p5/function ) 以了解更多信息。
9898
@@ -148,7 +148,7 @@ function sky() {
148148}
149149```
150150
151- 调用 ` sky ()` 会在 ` draw() ` 运行时运行 ` sky() ` 主体中的代码 ,并将天空的颜色变化添加到画布上。** 函数调用** 包括函数名后跟一对括号 ` () ` 。
151+ 在 ` draw ()` 中调用了 ` sky() ` , 会在 ` draw() ` 运行时,运行 ` sky() ` 函数体中的代码 ,并将天空的颜色变化添加到画布上。** 函数调用** 由函数名后跟一对圆括号 ` () ` 组成 。
152152
153153### 步骤 3:创建并调用关于太阳的自定义函数
154154
@@ -215,7 +215,7 @@ function sun() {
215215
216216在这一步中,你声明了一个名为 ` sun() ` 的新函数,它使用圆圈绘制太阳。` draw() ` 函数调用了 ` sun() ` ,而 ` sun() ` 又调用了 ` fill() ` 和 ` circle() ` 。` fill() ` 和 ` circle() ` 也是 p5.js 库中内置的函数,不需要由程序员声明。
217217
218- 你声明的自定义函数通过简单的代码块创建形状、颜色和动画。这就是计算的力量:你在简单的基础上构建来创建复杂的草图 。你已经使用了许多 p5.js 中的内置函数来制作动画和交互艺术。现在你有了创建自己的函数并扩展 p5.js 库的能力。通过定义你自己的函数,你可以创建很多东西!
218+ 你声明的自定义函数通过简单的代码块创建形状、颜色和动画。这就是计算的力量:你从简单的基础开始构建,进而创造出复杂的草图 。你已经使用了许多 p5.js 中的内置函数来制作动画和交互艺术。现在你有了创建自己的函数并扩展 p5.js 库的能力。通过定义你自己的函数,你可以创建很多东西!
219219
220220你可以通过访问[ 参考页面] ( https://p5js.org/reference/ ) 了解更多关于所有可用内置函数的信息。所有后跟括号 ` () ` 的条目都是函数!
221221
@@ -375,7 +375,7 @@ function mountains() {
375375
376376使用函数绘制一棵树可以提高代码的组织性。这个函数的真正力量来自于它能够轻松地使用不同的位置和大小绘制多棵树。我们可以向 ` tree() ` 函数声明添加参数,这样我们可以使用不同的参数灵活配置并多次调用它。
377377
378- 把这一函数想象成一个饼干模具或模板会很有帮助 。例如,你可以创建一棵新树,它类似于你上面创建的那棵,但每次调用函数时位置和大小都不同。要做到这一点,你需要在函数声明中包含参数,这样每一棵树都可以被自定义 。
378+ 把这个函数想象成一个饼干模具或模板会更容易理解 。例如,你可以创建一棵新树,它类似于你上面创建的那棵,但每次调用函数时位置和大小都不同。要做到这一点,你需要在函数声明中包含参数,以便自定义每一棵树 。
379379
380380- 重写你的 ` tree() ` 函数声明以包含 3 个参数:` x ` 、` y ` 和 ` size ` 。然后这些参数作为占位符在 ` rect() ` 和 ` triangle() ` 函数中使用。
381381
@@ -460,7 +460,7 @@ function tree(x,y,size) {
460460}
461461```
462462
463- 自定义每棵树的参数是 ` 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 ) 用作函数调用中的参数时,它们将结果作为参数传递 。
463+ 用于自定义每棵树的参数是 ` 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 ) 用作函数调用中的参数时,计算的结果将作为参数传递 。
464464
465465例如,让我们跟踪或* 追踪* 函数调用 ` tree(210, 320, 10) ` ,看看参数如何找到它们进入 ` rect() ` 函数的方法:
466466
@@ -478,7 +478,7 @@ function tree(x,y,size) {
478478 rect (210 - 10 ,320 ,10 * 2 ,10 * 6 );
479479 ```
480480
481- - 计算得到的实参结果值用于在画布上绘制形状 :
481+ - 计算得到的结果作为参数用于在画布上绘制形状 :
482482
483483 ``` js
484484 rect (200 ,320 ,20 ,60 );
@@ -742,7 +742,7 @@ function trees() {
742742}
743743```
744744
745- 在上面的步骤中,你定义了一个名为 ` treeLine() ` 的函数,它计算了一条线,使你可以沿着该线绘制多棵树。你还定义了一个函数,该函数使用你之前创建的 ` tree() ` 函数和 ` treeLine() ` 函数在你的风景中沿着一条线绘制多棵树 。
745+ 在上面的步骤中,你定义了一个名为 ` treeLine() ` 的函数,它计算了一条线,使你可以沿着该线绘制多棵树。你还定义了一个函数,该函数使用你之前创建的 ` tree() ` 函数和 ` treeLine() ` 函数,在你的风景中沿着一条线绘制了多棵树 。
746746
747747[ 这是你的项目可能看起来的样子的示例!] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/lamalgcPZ )
748748
@@ -785,7 +785,7 @@ function keyPressed() {
785785
786786## 结论
787787
788- 像 ` tree() ` 这样的函数让你能够通过组合多个更简单的想法(绘制 [ 2D 形状] ( /reference#Shape ) )的方式来表达一个复杂的想法(绘制一棵树)。能够创建一行树的函数 ` trees() ` 进一步扩展了这个想法。无论你是在绘制风景还是设计交互式灯光秀,函数都可以帮助你通过更简单的想法单元来逐步构建复杂的想法 。这称为** 抽象** 。抽象允许你在更高的层面上关注,这样你就不会被所有细节分心。想象一下,如果你通过调用数百次 ` triangle() ` 和 ` rect() ` 来动画化一片魔法森林,你的代码会是什么样子……跟踪所有事情是很难的。函数允许你以一种优雅且有组织的方式创建例如处理形状的具体坐标等细节的抽象。随着你的草图变得更加复杂,你会发现创建正确的抽象使你更能轻松地关注大局。
788+ 像 ` tree() ` 这样的函数让你能够通过组合多个更简单的想法(绘制 [ 2D 形状] ( /reference#Shape ) )的方式来表达一个复杂的想法(绘制一棵树)。能够创建一行树的函数 ` trees() ` 进一步扩展了这个想法。无论你是在绘制风景还是设计交互式灯光秀,函数都可以帮助你通过更简单的想法来逐步构建复杂的想法 。这称为** 抽象** 。抽象允许你在更高的层面上关注,这样你就不会被所有细节分心。想象一下,如果你通过调用数百次 ` triangle() ` 和 ` rect() ` 来动画化一片魔法森林,你的代码会是什么样子……跟踪所有事情是很难的。函数允许你以一种优雅且有组织的方式创建例如处理形状的具体坐标等细节的抽象。随着你的草图变得更加复杂,你会发现创建正确的抽象使你更能轻松地关注大局。
789789
790790<Callout >
791791声明一个 ` butterfly() ` 函数来显示蝴蝶 ` 🦋 ` 表情符号,并使该表情符号出现在随机位置或四处飞舞。在 ` draw() ` 中调用 ` butterfly() ` 函数以显示。
0 commit comments