260118

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

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

  let maxCount = 1 + (NUM - 1) * DELAY;
  animate(animeValue, {
    count: maxCount,
    duration: 3500,
    ease: 'ease',
    loop: true,
    loopDelay: 400,
    alternate: true,
  });
}

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

  let f = animeValue.count;
  let arcSize = int(W / NUM) * 2 - 20;
  noFill();
  let order = [1, 0, 2, 3];

  translate(-arcSize * (NUM - 2) / 4, -arcSize * (NUM / 2 - 1) / 2, 0);
  for (let j = 0; j < NUM / 2; j++) {
    push();
    translate(arcSize * (NUM / 2 - 1) / 2, 0, 0);
    rotateY(TAU / 2 * j);
    translate(-arcSize * (NUM / 2 - 1) / 2, 0, 0);
    for (let i = 0; i < NUM; i++) {
      push();
      let direction = arcSize * floor(i / 2);
      let orderValue = order[i % 4];
      let rot = TAU / 4 * orderValue;
      translate(direction, j * arcSize, 0);
      noFill();
      stroke(palette[5]);
      strokeWeight(1);
      fill(palette[i % palette.length - 1]);
      ellipse(0, 0, arcSize / 2);
      noFill();
      stroke(palette[6]);
      strokeWeight(2);
      let localF = constrain(f - i * DELAY, 0, 1);
      if (orderValue === 0 || orderValue === 1) {
        arc(0, 0, arcSize, arcSize, rot + (TAU / 4) * (1 - localF), rot + (TAU / 4));
      } else {
        arc(0, 0, arcSize, arcSize, rot, rot + (TAU / 4) * localF);
      }
      pop();
    }
    pop();
  }


  // noLoop();
}

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