@@ -68,13 +68,13 @@ 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
75- - 复制你的日出动画 ,或[ 这个示例] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO ) ,并将其命名为“Organized Sunset Animation”。
75+ - 复制你的日落动画 ,或[ 这个示例] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO ) ,并将其命名为“Organized Sunset Animation”。
7676
77- - 在定义自定义函数之前,让我们先从如何重新组织[ 日出动画 ] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO ) 中的一些代码的大纲开始:
77+ - 在定义自定义函数之前,让我们先从如何重新组织[ 日落动画 ] ( https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO ) 中的一些代码的大纲开始:
7878
7979 ``` js
8080 function setup () {
@@ -318,7 +318,7 @@ function mountains() {
318318
319319你的函数 ` sky() ` 、` sun() ` 和 ` mountains() ` 在它们的函数声明中都有空的括号,并且在函数调用中也是如此。其他函数,如 ` print() ` 和 ` circle() ` ,在调用它们时需要在括号内放置值。** 调用** 函数时括号内的值称为** 实参** (实际参数)。** 实参** 以某种方式自定义函数。
320320
321- ![ print('hello') 函数调用的语法包括函数名“print”,后跟括起函数实参‘ hello’ 的括号。] ( ../images/introduction/function-call.jpg )
321+ ![ print('hello') 函数调用的语法包括函数名“print”,后跟括起函数实参“ hello” 的括号。] ( ../images/introduction/function-call.jpg )
322322
323323在上面的代码片段中,` print() ` 函数在调用时被传递了一个实参。实参是字符串 ` 'hello' ` 。` print() ` 函数在控制台中显示括号中放置的值。我们可以想象 ` print ` 的函数声明看起来像这样:
324324
@@ -342,7 +342,7 @@ function mountains() {
342342
343343需要一个或多个参数的函数需要正确数量的实参来匹配其声明中的形参数量,才能成功运行。当一个函数没有接收到足够的实参时,缺少的参数会被赋值为 ` undefined ` ,这可能导致错误并产生奇怪的结果。在[ 调试入门指南] ( /tutorials/field-guide-to-debugging ) 中查看示例 2 和示例 7,了解在函数调用中使用错误数量的参数时可能遇到的错误示例。
344344
345- 让我们通过在我们的日出动画中添加一棵树来看看这是如何工作的 。
345+ 让我们通过在日出动画中添加一棵树来看看这是如何工作的 。
346346
347347
348348### 步骤 5:添加带参数的自定义函数
@@ -422,6 +422,10 @@ function draw() {
422422
423423 // 调用山脉函数
424424 mountains ();
425+
426+ // 绘制两棵树
427+ tree (150 , 320 , 10 )
428+ tree (210 , 320 , 10 )
425429}
426430
427431// 绘制天空的函数
@@ -498,7 +502,7 @@ function tree(x,y,size) {
498502 triangle (210 - 10 * 3 , 320 , 210 , 210 + 10 * 3 , 320 );
499503 ```
500504
501- - 计算得到的实参结果值用于在画布上绘制形状 :
505+ - 计算得到的结果作为参数用于在画布上绘制形状 :
502506
503507 ``` js
504508 triangle (180 , 320 , 240 , 320 );
@@ -512,7 +516,7 @@ function tree(x,y,size) {
512516
513517- 探索[ 这个示例] ( https://editor.p5js.org/Msqcoding/sketches/yqFWzi_5X ) ,了解如何使用数值表达式添加 x 和 y 参数的分步说明,并使用 ` mouseX ` 和 ` mouseY ` 测试你的函数。
514518
515- 有关包含参数的自定义函数的更多示例,请访问 p5.js 参考页面的 [ ` function ` ] ( /reference/p5/function ) 。
519+ 有关包含参数的自定义函数的更多示例,请访问 p5.js 参考页面的 [ ` 函数 ` ] ( /reference/p5/function ) 。
516520
517521通过使用同一个 ` tree() ` 函数创建两棵树,你可以减少草图中的代码量。这使得你的代码更短,因此更容易阅读。代码更少,也更容易调试。
518522
0 commit comments