Wave Lines 波浪线条
Three sine waves, each offset in phase and amplitude, sampled every pixel across the canvas. 三条正弦波,相位和振幅各不相同,每个像素采样一次。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The y coordinate is sin(i*0.02 + t + w)*30*(1 + w*0.3) — the w terms shift both phase and amplitude, so the three lines never overlap for long. Sampling at every pixel rather than every 10px is what makes the curve smooth without any interpolation. y 坐标是 sin(i*0.02 + t + w)*30*(1 + w*0.3):w 同时参与相位和振幅,所以三条线不会长时间重合。逐像素采样(而不是每 10px 取一点)是曲线看起来平滑、又不需要任何插值的原因。
What to change可以改的地方
- 1Lower the 0.02 frequency for long rolling swells.
- 2Add a vertical offset per wave so they stack instead of interleaving.
- 1频率 0.02 降下来,就是缓慢起伏的大浪。
- 2给每条波一个纵向基线偏移,它们会分层叠起来,而不是缠在一起。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。