260119

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

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

function draw() {
  background(palette[4]);
  orbitControl();
  strokeWeight(5);
  let rectSize = 16;
  let outerRectSize = W - rectSize;
  let numPoints = 16;
  let zOffset = -((animeValue.count * TAU)) * H / 2;

  let innerPoints = rectPoints(rectSize, numPoints);
  let outerPoints = rectPoints(outerRectSize, numPoints);

  push();
  for (let i = 0; i < numPoints; i++) {
    stroke(palette[(i + 1) % (palette.length - 3)]);
    line(innerPoints[i].x, innerPoints[i].y, 0, outerPoints[i].x, outerPoints[i].y, zOffset);
  }
  pop();

  push();
  fill(palette[5]);
  stroke(palette[5]);
  strokeWeight(1);
  translate(0, 0, 1);
  rect(-rectSize / 2, -rectSize / 2, rectSize, rectSize);
  stroke(palette[5]);
  strokeWeight(5);
  noFill();
  translate(0, 0, zOffset);
  rect(-outerRectSize / 2, -outerRectSize / 2, outerRectSize, outerRectSize);
  pop();


  // noLoop();
}
function rectPoints(rectSize, numPoints) {
  let points = [];
  let halfSize = rectSize / 2;
  let f = animeValue.count;

  for (let i = 0; i < numPoints; i++) {
    let angle = TAU * i / numPoints + f * TAU;
    let dx = cos(angle);
    let dy = sin(angle);
    let scale = halfSize / max(abs(dx), abs(dy));
    let x = dx * scale;
    let y = dy * scale;
    points.push({ x, y });
  }

  return points;
}


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