JavaScript · p5.js

波纹干涉网格

采样两个移动波源的叠加结果，将相位映射到高明度色块。

波函数p5.js

运行方式：在 p5.js 编辑器中运行

SOURCE / 只读源码

完整代码

function setup(){ createCanvas(720,720); noStroke() }
function draw(){
  background('#f6f7f2')
  const step=12
  for(let y=0;y<height;y+=step)for(let x=0;x<width;x+=step){
    const a=sin(dist(x,y,220,330)*.055-frameCount*.03)
    const b=sin(dist(x,y,510,390)*.045+frameCount*.025)
    const value=(a+b+2)/4
    fill(lerpColor(color('#c94335'),color('#68add2'),value))
    rect(x,y,step-1,step-1)
  }
}