变量声明与数据流
const canvas 保存创建后不再替换的画布；循环中的 degree、pingPong、sw 和 r 使用 let 保存每一帧、每一个圆环都要重新计算的中间结果。变量让时间、数学结果与视觉参数之间的关系清晰可读。
学习目标
01
区分 const 与 let，理解变量如何保存画布、时间计算和图形参数。
02
使用 millis()、radians() 与 sin() 生成随时间周期变化的数值。
03
通过 map() 把数学结果映射为线宽和圆环半径，让图形动起来。
04
理解 random() 的非确定性，并比较随机变化与正弦周期动画。
核心概念
原理解析
draw() 让图形持续更新
setup() 只创建一次 960×540 画布，draw() 则持续执行。每一帧先用 background(255) 清除上一帧，再根据当前时间重新绘制 20 个圆环，因此画面呈现连续动画而不是轨迹累积。
时间、角度与正弦函数
millis() 提供程序启动后的毫秒数，radians() 把随时间增长的角度转换为弧度，sin() 再输出 -1 到 1 之间的周期值。为每个圆环加入 50 × i 的时间偏移，会形成依次传递的呼吸节奏。
把数值映射为视觉变化
map() 将同一个 pingPong 值分别映射到 50→10 的线宽区间和 160→60 的半径倍率。strokeWeight(sw) 与 ellipse() 共享同一周期来源，使线条粗细和圆环尺度同步收缩与扩张。
周期变化与随机数
sin() 会重复经过相同数值，适合可预测、可循环的动画；random() 每次调用返回新的随机值，适合抖动、散布和不规则变化。
- 正弦动画：连续、周期明确、可以复现
- 随机动画：结果不固定，更接近噪声或偶发变化
- 可以用 random() 替换时间偏移，对比两种运动节奏
案例演示
实时运行 · 观察正弦往复如何同步改变圆环半径与线宽
sketch.js打开源码
正在载入源码…核心要点
变量连接计算步骤
用清晰命名的变量保存时间、正弦值、线宽和半径，动画逻辑更容易理解和调整。
动画来自逐帧重绘
draw() 持续读取时间并重新计算参数，静态 ellipse() 因此产生运动。
数学函数塑造运动规律
radians()、sin() 与 map() 把时间转换为平滑、周期性的视觉变化。
随机与周期服务不同表达
sin() 适合稳定循环，random() 适合不可预测的变化；选择取决于作品需要的节奏。