260628

const { animate } = anime;
const W = 800;
const H = 800;
const WAVE_LAYER_COUNT = 3;
let palette = [];
let waveLayers = [];

function initWaveLayers() {
  waveLayers = [];
  for (let i = 0; i < WAVE_LAYER_COUNT; i++) {
    let columnCount = floor(random(10, 20));
    waveLayers.push({
      columnCount: columnCount,
      amplitude: random(0.1, 0.5),
      distance: random(50, 300),
      wavelength: (TAU * random(0.5, 3)) / columnCount,
      phaseSpeed: random(0.001, 0.01),
    });
  }
}

function setup() {
  createCanvas(W, H);
  palette = colorArray[1].colors;
  initWaveLayers();
  background(palette[4]);
}

function drawWaveColumns(columnCount, amplitude, distance, wavelength, phase) {
  let colW = width / columnCount;

  for (let i = 0; i < columnCount; i++) {
    let waveH = sin(i * wavelength + phase * TAU) * amplitude;
    let rectHeight = map(waveH, -1, 1, 0, H - distance);
    let bottomY = rectHeight + distance;
    let bottomHeight = H - bottomY;

    let waveW = sin(phase * TAU);
    let rectRight = map(waveW, -1, 1, 0, colW);
    let rightWidth = rectRight;
    // (colW / columnCount) * i;

    rect(i * colW, 0, rightWidth, rectHeight);
    rect(i * colW, bottomY, rightWidth, bottomHeight);
  }
}

function draw() {
  background(palette[4]);

  push();
  noStroke();
  fill(palette[3]);

  for (let i = 0; i < waveLayers.length; i++) {
    let layer = waveLayers[i];
    let columnCount = layer.columnCount;
    let amplitude = layer.amplitude;
    let distance = layer.distance;
    let wavelength = layer.wavelength;
    let phase = frameCount * layer.phaseSpeed;
    drawWaveColumns(columnCount, amplitude, distance, wavelength, phase);
  }

  pop();
}

const colorArray = [
  {
    id: 0,
    colors: ["#253276", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 1,
    colors: [
      "#9dbdba",
      "#f8b042",
      "#e47763",
      "#253276",
      "#dfdad3",
      "#FFFFFF",
      "#000000",
    ],
  },
];