Lesson 01 · 欢迎来到创意编程 — Creative Coding with P5.js

学习目标

认识 index.html、p5.js 和 sketch.js 的加载关系。

理解 setup()、draw()、createCanvas()、canvas.parent() 和 background()。

使用计数器、i++、取模和条件分支控制动画节奏。

使用 random() 控制字号、颜色、线宽和位置的变化范围。

使用 translate()、width、height、textAlign() 和 CENTER 组织中心构图。

使用 textSize()、stroke()、strokeWeight()、noFill()、text()、push() 和 pop() 控制并隔离文字样式。

核心概念

setup()/draw()canvasframe loop%random()translate()text()drawing state

index.html 加载 p5.js 和 sketch.js；setup() 执行一次，使用 createCanvas() 和 canvas.parent() 创建并挂载画布；draw() 持续循环。

background() 设置背景或清除旧画面；width 和 height 表示画布尺寸。

i++、% 和 if / else if 共同控制动画节奏。

每 8 帧清屏｜奇数帧绘制｜其他帧保留

random() 在指定范围内生成数值，用于改变字号、颜色、线宽和位置。

字号 10–200 ｜颜色 0–255 ｜线宽 0–10 ｜位置 −200–200

translate() 将原点移动到画布中心，textAlign() 配合 CENTER 让文字围绕坐标居中。

translate(width / 2, height / 2)

textSize()、stroke()、strokeWeight() 和 noFill() 设置文字外观，text() 完成绘制。

push() 保存坐标和样式，pop() 在绘制完成后恢复状态，避免影响后续内容。

实时运行 · 观察文字闪烁、随机尺寸与位置变化

正在载入源码…

setup 负责初始化，draw 负责持续更新画面。

计数器和取模运算可以构成简单可靠的时间系统。

坐标变换让生成内容围绕明确的视觉中心展开。

使用 WebStorm 编写和运行课程中的 p5.js 项目。

开通邮箱操作步骤，如下链接