【p5js】砂丘の砂紋のアニメーション#PCD2021

let width = 600;
let height = 600;
let phase = 0;

function setup() {
  createCanvas(width, height);
}

function draw() {
  background(220);

  for(let h = -20; h < height; h += 10){
    // 高さに応じてグラデーションする
    r = map(h, 0, height, 230, 90)
    g = map(h, 0, height, 200, 50)
    b = map(h, 0, height, 150, 0)
    let c = color(r, g, b);
    fill(c);
    noStroke();
    // 斜めにずれる位相を与える
    wave(h, phase + sin(h/30) - h/20)
    phase += 0.01;
  }
}

function wave(h, p) {
  let amplitude = 10.0;
  let a = 0 - p;
  
  // 波長に影響
  let inc = TWO_PI / 20.0;
  for (let i = 0; i < width; i += 2) {
    rect(i,h - sin(a) * amplitude, 
         2, sin(a) * amplitude + 30);
    a = a + inc;

    // 揺らぎ
    a += random(-1, 1) / 30;
    
    // aが1周期の大きさになるようにする
    if (a > TWO_PI) {
      a -= TWO_PI;
    }
  }
}