球的变身 - 形状模式与高级绘制

概念介绍

到目前为止，我们绘制球时都使用默认的坐标系统：circle(x, y, diameter)中的(x,y)是球的中心。但如果想要用球的左上角坐标来定位呢？或者用半径而不是直径来绘制呢？p5.js提供了绘制模式功能，让我们可以改变坐标系统，满足不同的绘制需求！

学习目标

• 掌握绘制模式：ellipseMode(), rectMode()
• 理解坐标系统：CENTER, CORNER, RADIUS等模式
• 学习形状变换：用不同模式创建不同效果
• 掌握绘制技巧：组合不同模式创建复杂形状
• 理解常量概念：在p5.js中的应用

---

📐 绘制模式基础

什么是绘制模式？

绘制模式决定了我们如何解释图形的坐标参数。就像选择不同的测量工具一样：

• CENTER模式：坐标表示图形的中心点
• CORNER模式：坐标表示图形的左上角
• RADIUS模式：用半径而不是直径
• CORNERS模式：用两个对角点定义矩形

默认模式 vs 自定义模式

---

🔄 与基础课程的连接

还记得基础课程中的常量概念吗？

• 基础课程：const PI = 3.14159; - 自定义常量
• p5.js应用：CENTER, CORNER, RADIUS - 系统常量

这些常量让我们不需要记住具体的数字，而是使用有意义的名称！

---

📊 ellipseMode() 详解

CENTER模式（默认）

CORNER模式

RADIUS模式

---

💻 实践练习

练习1：模式实验 🧪

比较不同ellipseMode的效果：

练习2：中心对齐 🎯

用CENTER模式创建居中的图形：

练习3：从边缘绘制 📐

用CORNER模式从画布边缘开始绘制：

练习4：模式切换 🔄

在不同模式间切换创作：

练习5：精确布局 📏

用模式精确控制图形位置：

练习6：混合模式创作 🎨

组合不同模式创建复杂效果：

练习7：rectMode()应用 📦

矩形模式的应用：

练习8：高级布局系统 🏗️

创建灵活的布局系统：

---

🎯 本课重点总结

绘制模式类型

• ✅ CENTER模式：坐标表示图形中心（默认）
• ✅ CORNER模式：坐标表示图形左上角
• ✅ RADIUS模式：使用半径而不是直径
• ✅ CORNERS模式：用两个对角点定义图形

应用场景

• ✅ CENTER模式：居中对齐、同心图形、围绕中心点旋转
• ✅ CORNER模式：网格布局、从边缘开始精确定位
• ✅ RADIUS模式：数学计算、物理模拟、半径相关应用
• ✅ CORNERS模式：拖拽选择框、根据两点定义区域

优势与特点

• ✅ 灵活性：不同场景选择最适合的坐标系统
• ✅ 精确性：精确控制图形位置和大小
• ✅ 便利性：简化常见的绘制任务
• ✅ 一致性：ellipse和rect都支持相同的模式概念

与基础课程的连接

• ✅ 常量应用：CENTER, CORNER等系统常量的使用
• ✅ 坐标系统：深入理解画布坐标系统
• ✅ 函数参数：模式如何影响函数参数的解释

---

🚀 下一步

恭喜你！你已经掌握了p5.js的高级绘制技巧！你学会了：

• 📐 绘制模式：ellipseMode(), rectMode()的应用
• 🎯 坐标系统：CENTER, CORNER, RADIUS模式的含义
• 🔄 模式切换：在不同模式间灵活切换
• 📏 精确布局：用模式实现精确的图形定位

下一课我们将进行综合创作项目：

• 🌟 项目整合：将所有学过的概念整合到一个作品中
• 🎨 创意表达：用学到的技能创作个人作品
• 🏆 作品展示：完成一个完整的球世界项目
• 🔧 调试优化：性能优化和错误处理

准备好展示你的学习成果，创作令人惊叹的球世界作品了吗？

p5.js官方参考

• Reference: ellipseMode()
• Reference: rectMode()
• Reference: Constants
• Reference: CENTER
• Reference: CORNER
• Reference: RADIUS