

let x = 0; // 创建变量 x,记录波点的横向位置,从左边开始
let t = 0; // 创建变量 t,用来让每一轮波浪错开
function setup() { // setup 中的代码只在开始时运行一次
createCanvas(600, 400); // 创建宽 600、高 400 像素的画布
background(255); // 把背景设为白色
noStroke(); // 不画圆形的边框
} // setup 结束
function draw() { // draw 中的代码会自动不断重复运行
let y = height / 2 + sin(x * 0.03 + t) * 100;
// 算出波点的上下位置:
// height / 2:画布中间,也就是 200
// x * 0.03:随着 x 增加,让波点沿着波浪起伏
// + t:让下一轮波浪的位置错开
// sin(...):产生 -1 到 1 之间的数
// * 100:上下起伏各 100 像素
// 因此 y 在 100 到 300 之间变化
fill(random(255), random(255), random(255), 150);
// 设置圆形的填充颜色:
// 第一个 random(255):随机的红色分量
// 第二个 random(255):随机的绿色分量
// 第三个 random(255):随机的蓝色分量
// 150:透明度,0 是完全透明,255 是完全不透明
circle(x, y, 12); // 在 (x, y) 位置画一个直径为 12 的圆
x += 18; // 把 x 增加 18,下一个波点向右移动 18 像素
if (x > width) { // 如果 x 超过画布宽度,也就是画到右边外面
x = 0; // 把 x 重设为 0,从左边重新画
t += 0.5; // 把 t 增加 0.5,让新一轮波浪和上一轮错开
} // if 判断结束
} // draw 结束,本次运行完后会自动再次运行
This sketch creates a repeating wave pattern using colorful dots.
Each time draw() runs, it draws one dot and increases x, moving the next dot to the right.
The sin() function controls the dot’s vertical position, creating a wave. When x reaches the end of the canvas, it resets to zero
t increases to shift the next wave. Because the background is drawn only once in setup(), the dots remain on the canvas and new waves overlap the previous ones.
The repetition comes from draw(), without using a for or while loop.


when x become big, y change from -100-100
| loops | t |
first point y |
|---|---|---|
| 1 | 0 | 200 + sin(0) × 100 = 200 |
| 2 | 0.5 | 200 + sin(0.5) × 100 ≈ 248 |
| 3 | 1 | 200 + sin(1) × 100 ≈ 284 |