260104

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};

const NUM = 50;
const SIZE = 18;

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(animeValue, {
    count: 1,
    duration: 3500,
    ease: "inOut(6.56)",
    loop: true,
    loopDelay: 400,
    alternate: true,
  });
}

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

  push();
  noStroke();

  let waveNum = 3;
  let offset = 250;
  for (let i = 0; i < waveNum; i++) {
    push();
    translate(0, (-offset * (waveNum - 1)) / 2, 0);
    translate(0, i * offset, 0);
    drawWave(animeValue.count * (i % 2 === 0 ? 1 : -1));
    pop();
  }

  pop();
}
function drawWave(c) {
  const amplitude = 130;
  const frequency = 0.4;
  for (let i = 0; i < NUM; i++) {
    let x = (i - NUM / 2) * SIZE;
    let y = sin(Math.tanh(sin(i * frequency + c * TAU))) * amplitude;
    push();
    fill(palette[i % (palette.length - 3)]);
    translate(x, y, 0);
    rect(0, 0, SIZE, SIZE);
    pop();
  }
}

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