P5 教室
p5.js 创意编程基础

边学,边改,边看见。

每个示例都在隔离画布中运行;编辑代码不会影响课程网站。

单元 01 · 认识画布与运行循环

第一个会呼吸的图形

这节课你将学会知道 setup() 只运行一次,draw() 会持续刷新。

p5.js 把浏览器变成一块可以不断重画的画布。先用 `createCanvas()` 决定画布尺寸,再在 `draw()` 中安排每一帧要画的内容。

试着改变圆的直径,或者把颜色换成你喜欢的色值。每次点击运行,右边都会在隔离画布中生成新的效果。

关键积木

createCanvas(w, h) · 创建绘图区域
background(color) · 清空并涂满背景
circle(x, y, d) · 绘制一个圆

动手挑战

把圆换成两个不同大小、不同颜色的圆,并让它们不要重叠。

本单元作业 作业 1:我的几何海报

sketch.js
控制台:运行结果和错误会显示在这里。
已载入示例