前言：从简单的形状到复杂的视觉表达
在创意编程的世界里，一切视觉表达都始于最基础的几何构建。当我们第一次打开 p5.js 编辑器，面对空白的画布时，最令人兴奋的时刻莫过于亲手写下第一行让像素显形的代码。而在众多的绘图工具中，circle() 函数以其数学上的完美对称性和视觉上的柔和感，成为了我们探索生成艺术和交互设计的首选工具。
在这篇文章中，我们将不仅仅满足于“画出”一个圆。我们将深入探讨 circle() 函数的工作原理，剖析其参数的细微差别，并通过一系列由浅入深的实战示例，带你领略圆形在动态绘图中的无限可能。无论你是刚入门的编程新手，还是希望巩固基础的进阶开发者，通过这篇文章，你将学会如何利用这一简单的函数，构建出富有表现力的视觉效果。
理解 circle() 函数的语法与核心概念
在 p5.js 的坐标系中，每一个图形的绘制都依赖于精确的定位。circle() 函数的设计非常直观，它封装了绘制圆形所需的所有必要信息。
语法解析
circle(x, y, d)
``
这里的参数定义了圆形在画布空间中的存在方式：
* **x (Number):** 圆心的 x 坐标。这决定了圆在水平方向上的位置。
* **y (Number):** 圆心的 y 坐标。这决定了圆在垂直方向上的位置。
* **d (Number):** 圆的直径。请注意，这里定义的是直径而非半径，这与一些其他的数学库或绘图工具可能有所不同。
> **实用见解：** 为什么是直径而不是半径？
在视觉设计中，我们通常更习惯于定义一个物体的“整体宽度”。当你想要绘制一个占据特定宽度的图形时，直接使用直径 `d` 往往比计算半径 (`d / 2`) 更加符合直觉。`circle()` 实际上是 `ellipse()` 函数（椭圆）的一个特例，但 `circle()` 强制要求宽高相等，因此只需一个尺寸参数即可。
## 实战演练：从静态到动态
为了真正掌握 `circle()`，光靠理论是不够的。让我们通过具体的代码示例，逐步揭开它的面纱。
### 示例 1：绘制你的第一个圆形
让我们从最基础的实例开始。在这个例子中，我们将在画布的正中央绘制一个绿色的圆形。我们将学习如何设置画布，以及如何使用 `fill()` 函数来改变圆形的颜色。
javascript
function setup() {
// 创建一个 400×300 像素的画布
createCanvas(400, 300);
}
function draw() {
// 将背景设置为浅灰色 (RGB: 220, 220, 220)
// 这会清除上一帧的内容，防止画面重叠
background(220);
// 定义颜色变量
let c = color(‘green‘);
// 使用 fill() 函数设置填充颜色
fill(c);
// 绘制圆形
// 圆心位于 (200, 100)，直径为 150 像素
circle(200, 100, 150);
}
**代码解析：**
在这个例子中，我们在 `draw()` 循环中每一帧都重绘背景。如果不这样做，圆形可能会在画布上留下轨迹。我们使用了 `fill()` 来设定图形的内部颜色。此时，圆形的边缘默认是黑色的（1像素宽）。
### 示例 2：描边与填充的艺术控制
很多时候，我们并不想要一个实心的圆。通过配合使用 `noFill()` 和 `stroke()`，我们可以创造出只有轮廓的圆形，这在绘制几何图表或抽象艺术时非常有用。
javascript
function setup() {
createCanvas(400, 300);
}
function draw() {
background(50); // 使用深色背景，更能凸显线条
// 设置线条粗细为 4 像素
strokeWeight(4);
// 设置线条颜色为青色
stroke(‘cyan‘);
// 第一个圆：仅描边，无填充
noFill();
circle(200, 150, 150);
// 第二个圆：改变线条颜色为洋红
stroke(‘magenta‘);
// 绘制一个较小的同心圆
circle(200, 150, 100);
// 第三个圆：恢复填充，绘制中心点
noStroke(); // 去掉描边
fill(‘white‘);
circle(200, 150, 10);
}
**代码解析：**
这里展示了 `noFill()` 的强大之处。它告诉 p5.js 不要填充图形内部，只绘制边缘。通过组合 `stroke()`（描边颜色）、`strokeWeight()`（描边粗细）和 `noStroke()`（无描边），我们可以在同一个画布上创造出丰富的层次感。
### 示例 3：让圆形动起来
静态的图形是无聊的。让我们利用 p5.js 的动画循环，让圆形根据鼠标的位置移动，并随着距离产生大小变化。这是交互式设计的基石。
javascript
function setup() {
createCanvas(600, 400);
// 去掉描边，让画面更干净
noStroke();
}
function draw() {
// 这里我们不使用 background() 来清除背景
// 从而创造出拖尾效果
background(50, 50, 50, 25); // 低透明度的背景
// 将颜色模式设置为 HSB (色相, 饱和度, 亮度)
// 这比 RGB 更容易做彩虹色效果
colorMode(HSB, 360, 100, 100);
// 根据鼠标的 X 坐标计算色相
let c = color(mouseX % 360, 80, 100);
fill(c);
// 计算圆的直径：距离画布中心越近，圆越大
let d = dist(mouseX, mouseY, width/2, height/2);
d = map(d, 0, 300, 100, 10); // 将距离映射到直径范围
// 在鼠标位置绘制圆形
circle(mouseX, mouseY, d);
}
**代码解析：**
在这个例子中，我们引入了几个新概念：
1. **拖尾效果**：通过在 `draw()` 中使用带有透明度（Alpha 值为 25）的背景色，我们并没有完全清除上一帧的画面，而是覆盖了一层半透明的薄膜。这使得圆形的移动留下了动态的轨迹。
2. **HSB 颜色模式**：我们将颜色模式切换为 HSB，这样我们可以简单地通过 `mouseX` 的值来循环改变颜色。
3. **动态尺寸**：使用了 `dist()` 函数计算鼠标与中心的距离，并使用 `map()` 函数将这个距离映射到 10 到 100 的直径范围内。
### 示例 4：嵌套循环与图案生成
除了单一图形，`circle()` 也是创建复杂纹理的最佳选择。让我们使用双重循环（嵌套循环）来生成一个网格图案，并根据网格位置改变圆形的大小。
javascript
function setup() {
createCanvas(600, 600);
noStroke();
}
function draw() {
background(30);
// 设置网格间距
let spacing = 50;
// 双重循环遍历画布
for (let x = spacing / 2; x < width; x += spacing) {
for (let y = spacing / 2; y < height; y += spacing) {
// 计算当前点到鼠标的距离
let d = dist(x, y, mouseX, mouseY);
// 根据距离计算最大半径
let maxRadius = spacing / 1.5;
let radius = map(d, 0, 500, maxRadius, 0, true);
// 动态颜色
let r = map(x, 0, width, 100, 255);
let g = map(y, 0, height, 100, 255);
let b = 200;
fill(r, g, b);
// 绘制圆形
// 注意：circle 接受的是直径，所以这里乘以 2
circle(x, y, radius * 2);
}
}
}
**代码解析：**
这个示例展示了算法设计的魅力。我们并没有手动编写几百个 `circle()` 函数，而是使用 `for` 循环自动生成网格。每一个圆的大小都由它与鼠标的距离决定，从而产生了一种类似“波浪”或“透镜”的互动效果。这种技术常用于数据可视化和生成艺术中。
## 最佳实践与常见陷阱
在长期使用 p5.js 进行开发的过程中，我们总结了一些关于 `circle()` 函数的使用技巧，希望能帮助你避免常见的错误。
### 1. 混淆直径与半径
这是新手最容易犯的错误。如果你习惯了数学公式 `Area = πr²`，可能会下意识地在代码中写下 `circle(100, 100, radius)`。请时刻牢记，p5.js 的第三个参数是 **直径 (diameter)**。如果你想用半径来定义圆，必须手动乘以 2：
javascript
let r = 50;
circle(x, y, r * 2); // 正确做法
“INLINECODEd2e66494circle()INLINECODE772ee496(x, y)INLINECODE4c7e3278ellipseMode(mode)INLINECODE27d0409cx, yINLINECODEc134b63cx, yINLINECODE17f80bbfdINLINECODE7adbfd33x, yINLINECODE520c72ecellipseINLINECODEe8fbed76circleINLINECODEc189c694ellipseModeINLINECODE8fe3f7bdcircle()INLINECODEdb7ac435draw()INLINECODEd25a19d9sin()INLINECODE11e87b74cos()INLINECODEa5f49e53dist()INLINECODEf46900fcsetup()INLINECODEd48f246cdraw()INLINECODE962ed571createWebGLCanvasINLINECODE7509525fcircle()INLINECODEdf5319aapush()INLINECODE3b165789pop()INLINECODEebd3942dnoise()INLINECODE8b2a6f48circle(x, y, d)INLINECODE71787b73circle()INLINECODEc77279cdcircle()INLINECODE6c980ba2xINLINECODE93c760cayINLINECODEb3b70051dINLINECODEf5ecc726fill()INLINECODE11d8f809stroke() 函数族，你可以完全控制圆形的外观。draw()` 循环和变量，可以将静态的圆形转化为动态的动画。
* 利用
- 注意参数的细节（直径 vs 半径）和绘图模式的设置，以避免常见的逻辑错误。
现在，轮到你了。我们鼓励你打开 p5.js 编辑器，尝试修改我们上面的示例代码。试着改变颜色，改变运动逻辑，或者将圆形与其他形状结合起来。最好的学习方式就是动手创造。祝你编码愉快！