260310

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

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  stroke(palette[5]);
  strokeWeight(2);
  animate(animState, {
    progress: 1,
    duration: 2800,
    ease: "inOutSine",
    loop: true,
    loopDelay: 200,
  });
}

function draw() {
  background(palette[4]);
  ortho();
  // orbitControl();
  let t = animState.progress;
  let size = 120;
  let spacing = 160;
  let cycles = 5;
  let positions = [
    createVector(-spacing * 1.5, -spacing),
    createVector(0, -spacing),
    createVector(spacing * 1.5, -spacing),
    createVector(0, spacing),
  ];

  for (let i = 0; i < 4; i++) {
    let pos = positions[i];
    let angle = t * TAU * cycles;

    push();
    translate(pos.x, pos.y);
    fill(palette[i]);

    beginShape(TRIANGLES);
    for (let j = 0; j < 3; j++) {
      let v = p5.Vector.fromAngle((TAU / 3) * j - TAU / 12);
      v.mult(size);

      if (i === 0) applyBob(angle, size);
      if (i === 1) applyShake(v, j, angle, size);
      if (i === 2) applyShrink(v, j, angle, size);
      if (i === 3) {
        applyBob(angle, size);
        applyShake(v, j, angle, size);
        applyShrink(v, j, angle, size);
      }
      vertex(v.x, v.y);
    }
    endShape();
    pop();
  }

  // noLoop();
}

function applyBob(angle, size) {
  let bobAmt = size / 6;
  let bobOffset = sin(angle) * bobAmt;
  translate(0, bobOffset, 0);
}

function applyShake(v, j, angle, size) {
  let shakeAmt = size / 4;
  if (j === 0) {
    v.x -= sin(angle) * shakeAmt;
  }
  if (j === 2) {
    let shakeAmt = size / 4;
    v.x += sin(angle) * shakeAmt;
  }
}

function applyShrink(v, j, angle, size) {
  if (j !== 1) {
    let shrinkAmt = size / 4;
    v.y -= sin(angle) * shrinkAmt;
  }
}

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