p5.js 创意编码：让想法看得见

讲

例子sin 是背出来的，还是看见的？

问小北 sin 是什么，她背得出「对边比斜边」和一条波浪线。可当她第一次用十行代码让一个小球沿正弦轨迹跑起来、又顺手把频率改大一倍看着波变密——她说了一句很多人第一次创意编码都会说的话：「原来这个公式是活的。」下面这张会动的数学，你现在就可以点：

这是李萨如曲线：横坐标走一条正弦波、纵坐标走另一条，轨迹是它俩的合舞。当前频率比 3 : 2——点一下画布，换一对频率比看看。曲线由本页挂的 p5.js 现场画出，颜色随右上角主题走。

名词p5.js＝为艺术家和学生设计的创意编码库（免费开源，vendored 单文件即可用）：给你一块画布和一堆画笔函数。创意编码＝拿代码当画笔——目标不是做软件，是把数学、物理、想象画到看得见。

定义骨架只有两个函数：setup 管一次，draw 管每帧

setup() 开场执行一次：搭画布、定初值；draw() 之后每秒自动重跑约 60 次。动画没有魔法：变量每帧变一点，画面每帧重画一遍，连起来就动了——2.2b 的三拍循环换了自动挡：不用等你点击，时间自己当事件。

静止的画同样出自 draw——本页的李萨如用 noLoop() 只画一帧，点击时才重画一次。

九行代码，一颗沿正弦轨迹飞的球：

let x = 0;
function setup() { createCanvas(400, 200); }   // 一次：搭画布
function draw() {                              // 每帧：重画
  background(20);                              // 先清屏
  circle(x, 100 + 60 * sin(x * 0.05), 20);     // 位置里藏着 sin
  x = x + 2;                                   // 变量每帧变一点
}

想看波密一点？把 0.05 改大。想飞快一点？把 + 2 改大。改参数、立刻看见——这是创意编码的第一口甜：反馈快到不需要耐心。

泛化换个角度：看不懂的公式，让它动起来

课本里的公式是「压缩包」：sin 压缩着圆周运动，平抛公式压缩着两个方向的独立运动。代码是解压器——符号变成轨迹、参数变成旋钮，「改参数 → 看变化」是你能对任何系统做的最诚实的实验：物理模拟、函数图像、生成艺术，同一个姿势。往后再遇到啃不动的抽象概念，多一条路：把它画出来；画不出来的那一步，就是你还没懂的那一步——和 2.2c「箭头画不出来＝因果没想清」是同一条判据。

例

补充三例——两个常见用法，一个易错。

做

卡