From c8b334345c082eb3641629d1e37b0dcbab482ee4 Mon Sep 17 00:00:00 2001 From: SihongShen Date: Sun, 22 Feb 2026 17:32:02 -0500 Subject: [PATCH 1/2] docs: add chinese translation for conditionals-and-interactivity --- .../conditionals-and-interactivity.mdx | 915 ++++++++++++++++++ 1 file changed, 915 insertions(+) create mode 100644 src/content/tutorials/zh-Hans/conditionals-and-interactivity.mdx diff --git a/src/content/tutorials/zh-Hans/conditionals-and-interactivity.mdx b/src/content/tutorials/zh-Hans/conditionals-and-interactivity.mdx new file mode 100644 index 0000000000..b7a8c1203d --- /dev/null +++ b/src/content/tutorials/zh-Hans/conditionals-and-interactivity.mdx @@ -0,0 +1,915 @@ +--- +title: 条件语句与交互性 +description: 一个关于如何使用条件语句和创建可交互草图（sketch）的教程。 +category: introduction +categoryIndex: 3 +featuredImage: ../images/featured/ConditionalsA.png +featuredImageAlt: 条件语句与交互性教程作品的预览，是一个日出动画。 +relatedContent: + examples: + - en/11_3d/06_framebuffer_blur/description + references: + - en/p5/if + - en/p5/mouseispressed + - en/p5/keycode + - en/p5/circle +authors: + - Greg Benedis-Grab + - Layla Quiñones +--- + +import Callout from "../../../components/Callout/index.astro"; +import { Columns, Column } from "../../../components/Columns"; +import AnnotatedLine from "../../../components/AnnotatedLine/index.astro"; +import Video from "../../../components/Video/index.astro" + +在本教程中，你将学习到为草图添加用户交互的新方法，同时掌握如何控制代码运行的顺序。 + +通过创作一个[可交互太阳](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m)草图和一个[日出动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO)，你将学习到以下基础编程概念： + +- 条件语句 (if, if-else, 以及 else-if) +- 布尔变量, 比较运算符, 与表达式 +- 加法/减法赋值运算符 +- 递增与递减 +- 基于鼠标点击和鼠标位置的交互 + +控制程序的流程是计算机强大功能的核心，也是在p5.js中创作激动人心的动画和游戏的关键。通常情况下，代码是按行的顺序来执行的。在之前的教程中，你已经了解了如何使用[`draw()`](/reference/p5/draw)函数是如何从上至下反复地运行代码的。这让重叠图形和“翻页”动画得以实现。 + + +### 前置要求 + +- [设置你的环境](/tutorials/setting-up-your-environment) +- [入门指南](/tutorials/get-started) +- [变量与变化教程](/tutorials/variables-and-change/) + +在开始之前，你应该能够： + +- 在画布上使用p5.js添加和自定义形状与文本 + - [`circle()`](/reference/p5/circle) | [`rect()`](/reference/p5/rect) | [`ellipse()`](/reference/p5/ellipse) | [`triangle()`](/reference/p5/triangle) | [`line()`](/reference/p5/line) + - [`fill()`](/reference/p5/fill), [`stroke()`](/reference/p5/stroke), [`text()`](/reference/p5/text), [`textSize()`](/reference/p5/textSize) +- 使用包括 [`mouseX`](/reference/p5/mouseX) 和 [`mouseY`](/reference/p5/mouseY) 等在内的内置变量 +- 使用 `let` 和 [赋值运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment) 来声明，初始化，使用和更新自定义变量 +- 通过使用 [`random()`](/reference/p5/random) ，[`frameRate()`](/reference/p5/frameRate) 和 [`frameCount`](/reference/p5/frameCount)，同时实现线性运动和随机运动 +- 添加代码注释并处理错误信息 - 要了解更多关于错误信息和调试的信息，请阅读 [调试实战指南](/tutorials/field-guide-to-debugging) + + +## 第一部分：可交互太阳 + +创建一个[可交互太阳](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m)草图是学习如何使用*条件语句*和用户交互的好方法。 + + +## ![在黑色画布上，一个黄色圆圈的上半部分从绿色矩形后面露出。](../images/introduction/sunrise.png)  + +### IF语句（条件语句） + +[*条件语句*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals) 控制特定代码行执行的时机。例如，在太阳升起前天空是黑色的。一旦太阳升起，天亮后天空颜色就会变浅。你可以编写一个*条件语句*（也称为*if语句*）来根据太阳的位置改变天空的颜色。如果太阳位置高，天空应该是浅色的；否则，天空应该是深色的。if 语句可以检查太阳的位置，并根据太阳在天空中的位置来控制执行的代码。 + +在我们使用检查太阳位置的条件语句之前，我们可以添加自定义变量来帮助我们在鼠标指针划过画布时更新太阳的位置。 + + +#### 第一步：定义并初始化自定义变量 + +- 打开一个新的p5.js项目，命名为 “Interactive Sun”，并保存该草图（sketch）。 + +- 声明一个名为 `sunHeight` 的自定义变量，用于表示太阳的 y 坐标 和一个声明一个名为 `horizon` 的自定义变量，用于表示地平线的 y 坐标。将 horizon 变量初始化为 200。 + + - 在 [`setup()`](/reference/p5/setup) 函数之前，将以下代码添加到你的草图中： + + ```js + //太阳和地平线 y 坐标的自定义变量 + let sunHeight; + let horizon = 200; + ``` + +- 将 `sunHeight` 更新为鼠标指针的 y 坐标（mouseY）。 + + - 在 [`draw()`](/reference/p5/draw) 函数内添加以下代码: + + ``` + //太阳跟随鼠标的 y 坐标 + sunHeight = mouseY; + ``` + +你的代码应该如下所示： + +```js +//太阳和地平线 y 坐标的自定义变量 +let sunHeight; +let horizon = 200; +function setup() { +  createCanvas(400, 400); +} +function draw() { +  background(0); +  +  //太阳跟随鼠标的 y 坐标 +  sunHeight = mouseY; +} +``` + +由于太阳的高度是变化的，我们将鼠标的 y 坐标 （`mouseY`）在变量 `sunHeight` 中。在函数 `draw()` 中执行此操作可以保证每次 `draw()` 运行时，`sunHeight` 都会持续更新。虽然地平线的位置保持不变，但为它设置一个自定义变量可以作为参考点，并提高代码的可读性。 + +访问 p5.js 参考手册以获取更多关于 [`mouseY`](/reference/p5/mouseY) 和 [`let`](/reference/p5/let)的信息。 + + +#### 第二步：绘制形状并为画布着色 + +- 使用自定义变量 `sunHeight` 作为太阳的y坐标来绘制太阳。 + + - 在 [`draw()`](/reference/p5/draw) 函数内添加以下代码: + + ```js + //太阳 + fill("yellow"); + circle(200, sunHeight, 160); + ``` + +- 绘制一条线段作为地平线。 + + - 在 [`draw()`](/reference/p5/draw) 函数内添加以下代码: + + ```js + // 绘制一条线段作为地平线 + stroke("green"); + line(0,horizon,400,horizon); + ``` + +你的代码应该如下所示： + +```js +//太阳和地平线 y 坐标的自定义变量 +let sunHeight; +let horizon = 200; +function setup() { +  createCanvas(400, 400); +} +function draw() { +  background(0); +  +  //太阳跟随鼠标的 y 坐标 +  sunHeight = mouseY; + +  //太阳 +  fill("yellow"); +  circle(200, sunHeight, 100); + + +  //绘制一条线段作为地平线 +  stroke('green'); +  line(0,horizon,400,horizon); +} +``` + +当鼠标在画布上垂直移动时，太阳会跟随鼠标指针。这是因为我们在 `circle(200, sunHeight, 100)` 中使用了 `sunHeight` 作为圆心 y 坐标的参数。画布上绘制的地平线则使用 `horizon` 作为两个端点 y 坐标 `y1, y2` 的参数。地平线在画布上的位置标记将用于后续改变背景颜色的逻辑。 + +访问 p5.js 参考手册的 [2D shapes](/reference#Shape), [color](/reference#Color), [foundations](/reference#Foundation) 和 [mouse events](/reference#Mouse) 页面来了解更多关于形状和变量的信息。你也可以阅读 [调试实战指南](/tutorials/field-guide-to-debugging)（示例 1 & 2）来获取常见错误的帮助。 + + +#### 第三步：使用带有布尔表达式的条件语句来改变背景颜色 + +- 当太阳在地平线以上时，将背景颜色设置为浅蓝色。 + - 在 [`draw()`](/reference/p5/draw) 内部把以下代码添加在 `sunHeight = mouseY` 这行代码后： + + ```js + //如果太阳在地平线以上，背景设为浅蓝色 + if(sunHeight < horizon){ +   background("lightblue"); + } + ``` + +你的代码应该如下所示： + +```js +//太阳和地平线 y 坐标的自定义变量 +let sunHeight; +let horizon = 200; +function setup() { +  createCanvas(400, 400); +} +function draw() { +  background(0); +  +  //太阳跟随鼠标的 y 坐标 +  sunHeight = mouseY; + + +   //如果太阳在地平线以上，背景设为浅蓝色 +  if(sunHeight < horizon){ //check if it is daytime +     background("lightblue"); +  } +  //太阳 +  fill("yellow"); +  circle(200, sunHeight, 100); + + +  //绘制一条线段作为地平线 +  stroke('green'); +  line(0,horizon,400,horizon); +} +``` + +运行代码，并尝试用鼠标移动太阳！ + +在以上代码中，背景默认是黑色，因为 `draw()` 函数中读取的第一条语句是 `background(0)` 。当太阳在地平线以下时，背景保持黑色，因为 if 语句跳过了花括号内的*代码块*：`background("lightblue")` 。当太阳移到地平线以上时，花括号内的*代码块*开始运行，这会将默认的黑色重置为浅蓝色。 + +在这里，你正在控制 `background(0)` 和 `background("lightblue")`运行的时机。*条件语句*（或*if语句）是一种控制特定代码行何时运行的方式。它可以改变草图中发生的事。 + + +#### IF 语句语法 + +一个if语句以单词 `if` 开头，后跟跟括号内的条件（conditions），以及花括号内被称为*代码块*的代码行。如果条件为 `true` （真），则运行该代码块。if语句的语法定义如下： + +```js +if (condition) { +  // 如果条件为 true，则运行此处的代码 +}  +``` + + +#### 布尔表达式与布尔值 + +关键词 `if` 后括号内的内容可以是一个 *布尔值* 或一个 *布尔表达式*。在下面的示例中，我们使用布尔表达式来检查变量 `sunHeight` 的值是否小于变量 `horizon` 的值： + + ` +if (${bottom('bool', 'sunHeight < horizon')}) { + ${bottom('block', 'background("lightblue");')} +} +`}> + Boolean expression + Code block + + +*布尔表达式*是计算结果为*布尔值*的语句。*布尔*值只能是`true`（真）或`false`（假）。与数字（numbers）和字符串（strings）不同，布尔值只有这两个。*布尔表达式*可以帮助我们检查条件是否为`true`（真）或`false`（假）。因此，它们需要被称为*比较运算符（comparison operators）*的符号。*比较运算符（comparison operators）*是用于比较两个值的特殊符号（见下表）。 + +你可以用来创建布尔表达式的[*比较运算符*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)包括： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +符号 + + + +含义（p5.js参考链接） + + + +示例 + +
+ +`<` + + + +[小于](/reference/p5/lt) + + + +`x < 5` + +
+ +`<=` + + + +[小于或等于](/reference/p5/lte) + + + +`x <= 5` + +
+ +`>` + + + +[大于](/reference/p5/gt) + + + +`x > 5` + +
+ +`>=` + + + +[大于或等于](/reference/p5/gte) + + + +`x >= 5` + +
+ +`===` + + + +严格相等 (意味着不同类型的值会被视为不相等) + + + +`x === 5` + +
+ +`!==` + + + +不等于 + + + +`x !== 5` + +
+ +访问MDN参考资料来了解更多有关[表达式与运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)的信息。 + +你可以将*布尔表达式*想象成计算机在提问。在第三步添加的代码中，布尔表达式是 `sunHeight < horizon` 。它在询问：变量 `sunHeight` 的值是否小于变量 `horizon` 的值。如果问题的答案是 `true` （真），那么代码块就会运行。如果答案为否，那么代码块则会被跳过。 + +我们可以通过在 [`draw()`](/reference/p5/draw) 函数中的 `sunHeight = mouseY` 之后添加 `console.log(sunHeight < horizon)` 以在控制台（console）中查看该表达式的值。当你移动鼠标划过画布时，观察控制台打印的值是如何在 `true` 和 `false` 之间切换的：当太阳在地平线以下时，值为 `false` ；当太阳在地平线以上时，值为 `true` 。参考[这个草图](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m)里的示例。 + +访问p5.js 参考手册的[基础知识](/reference#Foundation)页面来了解更多关于 if 语句和布尔值的信息。 + + +### IF-ELSE 语句  + +另一个重要的条件语句是 *if-else语句* 。它可以控制两个不同的代码块。if-else 语句的语法定义如下： + +```js +if (condition) { +  // 如果条件为 true，则运行此处的代码 +} else { +  // 如果条件为 false，则运行此处的代码 +} +``` + +如果条件为 `true` （真），则运行第一个代码块。如果条件为 `false` （假），则运行关键词 `else` 之后的代码块。如果你的代码需要根据同一个条件做出两种不同的改变，那么 if-else 语句是一种更好的代码组织方式。将 if 语句想象成如下所示的气泡图（bubble map）会很有帮助：它展示了当条件为真时运行第一个代码块，而当条件为假时运行第二个代码块。 + +![一张气泡图，有两个箭头从标有“条件（condition）”的气泡引出。标有 “true（真）“的箭头指向标有“第 1 个代码块”的气泡。第二个标有“else (false)（假）”的箭头指向标有“第 2 个代码块”的气泡。](../images/introduction/if-else-bubble.png) + +例如，你可以修改日落动画中的 if 语句，先移除 [`background()`](/reference/p5/background) 函数，然后添加以下 if-else 语句： + + + +##### 原始代码: + +```js +//...function draw + +background(0); // 夜晚的天空 + +//太阳跟随鼠标的 y 坐标 +sunHeight = mouseY; + +//如果太阳在地平线以上，背景设为浅蓝色 + +if (sunHeight < horizon) { +  background("lightblue"); // 蓝色的天空 +} +``` + + +##### 修改后的代码: + +```js +//...function draw + +//太阳跟随鼠标的 y 坐标 +sunHeight = mouseY; + +//如果太阳在地平线以上，背景设为浅蓝色 + +//使用 if-else 语句 + +if (sunHeight < horizon) { +  background("lightblue"); // 如果太阳在地平线以上，背景设为浅蓝色 +} else { +  background(0); // 否则把天空设置为夜空 +} +``` + + + +在上面的代码中，我们可以看到太阳在地平线以上时 `sunHeight < horizon ` 会返回 `true`，随后代码 `background("lightblue")` 运行。当 `sunHeight` *不*小于地平线高度时，关键词 `else` 后的代码 `background(0)` 运行。虽然这两种代码编写方式在视觉效果上是相同的，但有时使用 if-else 会更清晰且高效，尤其是当你需要控制两个不同的代码块时。 + +访问 p5.js 参考手册的 [`if`](/reference/p5/if) 和 [`Boolean`](/reference/p5/Boolean) 来了解更多信息。 + + +#### 第四步：添加草地来遮蔽太阳 + +为你的草图添加一片草地景观。这样当太阳移动到地平线以下时，你就看不见它了。 + +- 在绘制太阳之后，在景观中绘制一个绿色矩形以便在太阳低于地平线时将其遮挡。该矩形的 y 坐标参数即为地平线 `horizon` 的位置。 + - 在 [`draw()`](/reference/p5/draw) 函数中绘制地平线的代码行之后，添加以下代码： + + ```js + //草地 + fill("green");  + rect(0, horizon, 400, 400); + ``` + +你的代码应该如下所示： + +```js +//太阳和地平线 y 坐标的自定义变量 +let sunHeight; +let horizon = 200; +function setup() { +  createCanvas(400, 400); +} +function draw() { + +  //太阳跟随鼠标的 y 坐标 +  sunHeight = mouseY; + +  //如果太阳在地平线以上，背景设为浅蓝色 + + //使用if-else语句 + + if (sunHeight < horizon) { +   background("lightblue"); // 如果太阳在地平线以上，背景为蓝色 + } else { +   background(0); // 否则为夜空 + } + +  //太阳 +  fill("yellow"); +  circle(200, sunHeight, 100); + + +  //绘制一条线段作为地平线 +  stroke('green'); +  line(0,horizon,400,horizon); + +  //草地 + +  fill("green"); + +  rect(0, horizon, 400, 200); + +} +``` + +运行草图并将太阳移动到地平线以下。观察到天空是如何随着太阳的消失而改变的了吗？这是[日出动画示例草图](https://editor.p5js.org/Msqcoding/sketches/StUo5StZi)的链接。 + + +- 尝试使用条件语句来改变草地的颜色！比如，当日照落在草地景观上时，将其颜色从深绿色变为较浅的绿色。 +- 为你的草图景观添加更多会变色的形状吧！ + +[示例](https://editor.p5js.org/gbenedis@gmail.com/sketches/nNVmHVf5m) + + + +## 第二部分：日出动画 + +接下来，你将制作一个[日出动画](https://editor.p5js.org/gbenedis@gmail.com/sketches/9lz2aqfTO)。在这个动画中，太阳会自动移动，并使天空的颜色产生渐变效果。 + +