260113

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

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

  animate(animeValue2, {
    count: 1,
    duration: 4000,
    ease: "inOutSine",
    loop: true,
    loopDelay: 500,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  orbitControl();
  ortho();
  strokeWeight(2);

  translate(0, 50, 0);
  rotateX(-TAU / 16);
  rotateY(TAU / 10);

  let f = animeValue.count;
  let f2 = animeValue2.count;
  let rim = 180;
  let bridge = 50;
  let temple = 380;
  let num = 6;

  for (let m = 0; m < 3; m++) {
    push();
    translate(0, (m * H) / 3 - H / 3, 0);
    // Eyes
    let moveEyes = f2 - sin((f2 * TAU) / 2) * m * 0.2 + (m + 1) / TAU;
    drawEye(0, moveEyes);
    drawEye(rim + bridge, moveEyes);

    // Frames
    noFill();
    stroke(palette[3 - m]);
    for (let i = 0; i < num; i++) {
      let rot = (f - sin((f * TAU) / 2) * i * 0.014 * (m + 1) * 0.3) * TAU;
      // Bridge
      push();
      translate(0, 0, i * num);
      line(rim / 2, 0, 0, rim / 2 + bridge, 0, 0);
      pop();
      // Frame
      drawFramePart(0, i * num, rot, rim, temple, true);
      drawFramePart(rim + bridge, i * num, -rot, rim, temple, false);
    }
    pop();
  }
}

function drawEye(x, f) {
  push();
  translate(x, 0, 0);
  fill(palette[5]);
  noStroke();
  ellipse(0, 0, 100);
  translate(sin(f * TAU) * 25, cos(f * TAU) * 25, 10);
  fill(palette[6]);
  ellipse(0, 0, 60);
  pop();
}

function drawFramePart(x, z, rot, rim, temple, isLeft) {
  // Temple
  push();
  translate(x + (isLeft ? -1 : 1) * (rim / 2), z, 0);
  line(0, 0, 0, 0, 0, -temple);
  pop();

  // Rim
  push();
  translate(x, 0, z);
  rotateZ(rot);
  ellipse(0, 0, rim, rim, 9);
  pop();
}

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