从控制台到画布 - p5.js初体验

概念介绍

恭喜你完成了基础编程学习！现在我们要进入一个全新的世界——可视化编程。想象一下，之前我们用 console.log() 在控制台显示文字，现在我们要在画布上绘制图形！

学习目标

• 理解从控制台输出到图形世界的思维转换
• 掌握p5.js的基本程序结构：setup()和draw()函数
• 理解画布坐标系统：左上角原点，x向右，y向下
• 学会使用createCanvas()创建画布，理解系统调用机制

---

🔄 回顾：从Hello World到Circle World

你还记得基础课程中的第一个程序吗？

现在我们要做类似的转变，但从文字变成图形：

🤔 思维转变

基础课程	p5.js课程	思维变化
console.log("Hello")	circle(200, 200, 50)	从显示文字到绘制图形
程序运行一次就结束	draw()函数每秒运行60次	从静态执行到动态绘制
看不到结果	立即看到图形	从抽象概念到直观效果

---

📐 理解画布坐标系统

在p5.js中，我们需要理解一个重要的概念：坐标系统。

📍 坐标系统规则

• 原点 (0,0)：在左上角，不是左下角！
• X轴：向右增长（0 → 400）
• Y轴：向下增长（0 → 400）

(0,0) ←────── X轴 (400,0)
      ↓
      ↓
      ↓ Y轴
      ↓
    (0,400) ←── (400,400)

🎯 实际位置示例

---

🏗️ p5.js程序结构

这是一个非常重要的概念！在p5.js中，你不是主动调用这些函数，而是按照约定写好这些函数，p5.js系统会自动调用它们。

🎭 理解：约定而不是主动调用

想象一下：

• 在基础课程中，我们写 console.log("Hello")，然后我们自己主动调用这个函数
• 在p5.js中，我们写 function setup() 和 function draw()，然后p5.js系统自动调用这些函数

你的代码                    p5.js系统
────────────────────          ─────────────────
function setup() {   ──▶   ───────────────────┐
  createCanvas(400, 400);│◀─  调用你的setup()函数  │
}                            └──────────────────┘

function draw() {      │
  // 绘制内容           │   ───────────────────┐
}                            │◀─  每秒调用60次draw()函数 │
                            └──────────────────┘

setup() 函数 - 只运行一次

setup() 函数是p5.js在程序启动时自动调用一次的特殊函数。它的主要任务：

重要理解：

• ✅ setup() 只在程序开始时运行一次
• ✅ 你不能手动调用 setup()
• ✅ p5.js会在合适的时机自动调用它
• ✅ 用来做"一次性"的准备工作

draw() 函数 - 持续运行

draw() 函数是p5.js持续自动调用的动画循环函数：

重要理解：

• ✅ draw() 每秒钟自动运行60次（60帧率）
• ✅ 你不能手动调用 draw()
• ✅ p5.js会持续地自动调用它
• ✅ 这就创建了动画效果！

---

💻 实践练习

练习1：你的第一个圆形 🎯

在画布中心绘制你的第一个圆形：

理解重点：

• setup() 只运行一次，创建画布
• draw() 每秒运行60次，绘制圆形
• circle(200, 200, 80) 表示在(200,200)位置绘制直径80的圆

练习2：改变位置 📍

尝试在不同位置绘制圆形：

挑战： 试试这些位置：

• (50, 50) - 左上角
• (300, 100) - 右上角
• (200, 300) - 底部中间

练习3：改变大小 🔢

学习控制圆形的大小：

挑战： 试试这些大小：

• 30 - 小圆
• 60 - 中圆
• 150 - 大圆

练习4：理解画布边界 📏

确保圆形在画布内可见：

重要提醒：

• 画布大小是400x400
• 圆心位置 + 半径不能超过400
• 太大的圆可能会超出画布边界

---

⚠️ 常见错误与解决方法

错误1：忘记创建画布

错误2：坐标超出画布范围

---

🎯 本课重点总结

核心概念回顾

• ✅ 程序结构：setup() 运行一次，draw() 持续运行
• ✅ 系统调用：我们写好函数，p5.js系统自动调用
• ✅ 基础坐标：左上角(0,0)，向右x增加，向下y增加
• ✅ 圆形绘制：circle(x, y, 大小) 控制位置和大小

函数工具箱

• createCanvas(400, 400)：创建400x400的画布
• background(颜色)：设置背景颜色
• circle(x坐标, y坐标, 大小)：绘制圆形

与基础课程的连接

• ✅ 函数调用：circle() 和 console.log() 都是函数调用
• ✅ 参数传递：圆的位置和大小都是函数参数

---

🚀 下一步

恭喜你完成了p5.js的第一课！你已经成功从控制台世界跨入图形世界。

下一课我们将学习更多基础图形函数，包括：

• rect() - 绘制矩形
• line() - 绘制线条
• triangle() - 绘制三角形
• 图形组合技巧

准备好用更多图形创造有趣的作品了吗？

p5.js官方参考

• Reference: createCanvas()
• Reference: setup()
• Reference: draw()
• Reference: circle()
• Reference: width
• Reference: height