图形绘制工具箱 - 基础图形函数

概念介绍

在上节课中，我们学会了用 circle() 绘制圆形。今天我们要扩展你的图形工具箱，学习更多基础图形函数！想象一下，你有了更多的"画笔"，可以创作更丰富的作品。

学习目标

• 掌握基础图形函数：circle(), rect(), line(), text()
• 理解函数参数的含义和用法
• 学会图形组合技巧
• 培养从简单到复杂的组合思维

---

🎯 函数就是我们的绘图工具

还记得基础课程中学习的函数概念吗？现在我们要把这些概念应用到实际绘图中！

基础课程概念	p5.js中的应用	实际效果
函数调用	circle(200, 200, 50)	绘制一个圆
参数传递	(x坐标, y坐标, 大小)	控制图形的位置和大小
函数重用	多次调用同一个函数	绘制多个相同类型的图形

---

📐 基础图形函数详解

circle(x, y, diameter) - 绘制圆形

rect(x, y, width, height) - 绘制矩形

line(x1, y1, x2, y2) - 绘制线条

text(message, x, y) - 显示文字

---

💻 实践练习

练习1：函数探索 🧪

逐一练习每个基础图形函数：

观察思考：

• 每个函数需要几个参数？
• 这些参数分别控制什么？
• 改变参数值，图形会发生什么变化？

练习2：简单房子 🏠

用基础图形组合创建房子：

新函数：

• triangle(x1, y1, x2, y2, x3, y3)：绘制三角形
• fill(r, g, b)：设置填充颜色（下一课详细讲解）

练习3：笑脸设计 😊

用圆形和弧线绘制笑脸：

新函数：

• arc(x, y, width, height, start, stop)：绘制弧线
• noFill()：取消填充
• stroke()：设置描边颜色
• strokeWeight()：设置描边宽度

练习4：简单组合图形 🏠

用基础图形组合创建简单房子：

概念连接：

• ✅ 图形组合：用多个基础图形创建复杂形状
• ✅ 颜色应用：使用fill()为不同图形设置颜色
• ✅ 坐标理解：合理安排图形的位置关系
• ✅ 层次关系：后绘制的图形会覆盖先绘制的

练习5：几何抽象艺术 🎭

创作抽象几何艺术：

练习6：制作基础图形库 📚

创建一个自己的图形库：

---

⚠️ 常见错误与解决方法

错误1：参数数量错误

错误2：忘记设置颜色

---

🎯 本课重点总结

核心函数工具箱

• ✅ circle(x, y, diameter) - 圆形
• ✅ rect(x, y, width, height) - 矩形
• ✅ line(x1, y1, x2, y2) - 线条
• ✅ text(message, x, y) - 文字
• ✅ triangle(x1, y1, x2, y2, x3, y3) - 三角形
• ✅ arc(x, y, width, height, start, stop) - 弧线

函数应用概念

• ✅ 参数理解：每个参数控制图形的特定属性
• ✅ 函数组合：多个简单函数组合创建复杂图形
• ✅ 函数封装：创建可重用的绘图函数
• ✅ 绘制顺序：后绘制的图形会覆盖先绘制的

与基础课程的连接

• ✅ 函数调用：内置函数和自定义函数的使用
• ✅ 参数传递：通过参数控制函数行为
• ✅ 循环应用：用循环创建重复图形
• ✅ 抽象思维：从具体图形到抽象函数

---

🚀 下一步

太棒了！现在你已经掌握了基础图形函数，可以绘制各种形状了！

下一课我们将学习：

• 🎨 颜色系统：如何让你的图形变得五彩斑斓
• 🖌️ 填充和描边：fill(), stroke(), background()
• 🌈 透明效果：颜色中的第四个参数
• 🎯 颜色模式：RGB颜色系统的理解

准备好给黑白世界添加色彩了吗？

p5.js官方参考

• Reference: circle()
• Reference: rect()
• Reference: line()
• Reference: text()
• Reference: triangle()
• Reference: 2D Primitives
• Reference: Typography