Lesson 02 · 绘图基础 — Creative Coding with P5.js

学习目标

理解画布坐标原点以及 x、y 的变化方向。

认识点、线、矩形、圆和椭圆的绘制方法。

区分 circle() 与 ellipse() 的参数特点。

理解颜色模式、描边和填充对图形外观的影响。

使用 for 循环批量创建和绘制图形。

结合案例理解随机位置、随机移动和画面累积。

核心概念

coordinatesshapescolorstroke & fillrandom()for 循环

setup() 使用 createCanvas() 创建画布，通过 canvas.parent() 挂载到页面，并用 smooth() 平滑图形边缘。画布左上角是原点，x 向右增加，y 向下增加；width 和 height 表示画布尺寸。

(0, 0) → x 向右｜ y 向下

point() 在指定坐标绘制一个点；line() 使用两个坐标确定线段的起点和终点。

rect() 使用位置、宽度和高度绘制矩形；circle() 使用圆心和直径绘制圆；ellipse() 可以分别控制横向与纵向尺寸，案例使用它绘制运动圆点。

rect(x, y, w, h) ｜ circle(x, y, d) ｜ ellipse(x, y, w, h)

colorMode() 决定颜色参数的含义。RGB 使用红、绿、蓝组合颜色；HSB 使用色相、饱和度和亮度组织颜色。本案例沿用 p5.js 默认颜色设置。

stroke() 和 strokeWeight() 设置轮廓颜色与粗细，fill() 设置内部颜色；noStroke() 和 noFill() 可以分别关闭描边和填充。本案例使用 p5.js 默认样式。

for 循环适合重复执行相同操作。案例先批量创建 33 个圆点，再在 draw() 的每一帧依次更新和绘制它们。

for (var i = 0; i < 33; i++)

random(width) 和 random(height) 生成初始位置，random() 每帧改变圆点坐标。由于 draw() 中没有调用 background() 清除画面，圆点会不断叠加形成运动轨迹。

实时运行 · 观察随机坐标、圆点大小与轨迹累积

正在载入源码…

图元通过 x、y 坐标被放置在画布中。

宽度、高度和直径控制矩形、圆与椭圆的尺寸。

颜色、描边和填充共同决定图形外观。

for 循环可以用少量代码批量处理多个图形。