260103

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
const NUM = 10;
const SCALE = 30;
const OFFSET = 15;

let currentRotationCount = -1;
let randomIndex = 1;
let previousAnimeCount = 0;

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

function draw() {
  background(palette[4]);
  ortho(-W / 2, W / 2, -H / 2, H / 2, -W, W + 2000);
  rotateY(-TAU / 10);
  rotateX(TAU / 20);
  noFill();
  strokeWeight(5);
  let x = 0;
  let y = 0;

  let speed = map(animeValue.count, 0, 1, 0, TAU);
  if (previousAnimeCount > 0.9 && animeValue.count < 0.1) {
    currentRotationCount++;
    //素数を使ってランダムに見せる
    randomIndex = ((currentRotationCount * 7 + 13) % NUM) + 1;
  }
  previousAnimeCount = animeValue.count;

  push();
  for (let i = 1; i <= NUM; i++) {
    fill(palette[i % (palette.length - 3)]);
    let fib = fibonacci(i);
    let size = fib * SCALE;
    let rectSize = size - OFFSET;

    const direction = i % 4;

    if (direction === 0) {
      const rectX = x + OFFSET / 2;
      const rectY = y + OFFSET / 2;
      if (i === randomIndex) {
        push();
        translate(rectX + rectSize / 2, rectY + rectSize / 2);
        rotateX(speed);
        translate(-rectSize / 2, -rectSize / 2);
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(0, 0, rectSize, rectSize, 2);
        pop();
        rect(0, 0, rectSize, rectSize);
        pop();
      } else {
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(rectX, rectY, rectSize, rectSize, 2);
        pop();
        rect(rectX, rectY, rectSize, rectSize);
      }
      x += size;
      y += size;
    } else if (direction === 1) {
      x -= size;
      const rectX = x + OFFSET / 2;
      const rectY = y + OFFSET / 2;
      if (i === randomIndex) {
        push();
        translate(rectX + rectSize / 2, rectY + rectSize / 2);
        rotateX(speed);
        translate(-rectSize / 2, -rectSize / 2);
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(0, 0, rectSize, rectSize, 2);
        pop();
        rect(0, 0, rectSize, rectSize);
        pop();
      } else {
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(rectX, rectY, rectSize, rectSize, 2);
        pop();
        rect(rectX, rectY, rectSize, rectSize);
      }
      y += size;
    } else if (direction === 2) {
      x -= size;
      y -= size;
      const rectX = x + OFFSET / 2;
      const rectY = y + OFFSET / 2;
      if (i === randomIndex) {
        push();
        translate(rectX + rectSize / 2, rectY + rectSize / 2);
        rotateX(speed);
        translate(-rectSize / 2, -rectSize / 2);
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(0, 0, rectSize, rectSize, 2);
        pop();
        rect(0, 0, rectSize, rectSize);
        pop();
      } else {
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(rectX, rectY, rectSize, rectSize, 2);
        pop();
        rect(rectX, rectY, rectSize, rectSize);
      }
    } else {
      y -= size;
      const rectX = x + OFFSET / 2;
      const rectY = y + OFFSET / 2;
      if (i === randomIndex) {
        push();
        translate(rectX + rectSize / 2, rectY + rectSize / 2);
        rotateX(speed);
        translate(-rectSize / 2, -rectSize / 2);
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(0, 0, rectSize, rectSize, 2);
        pop();
        rect(0, 0, rectSize, rectSize);
        pop();
      } else {
        push();
        translate(OFFSET / 3, OFFSET / 3, -10);
        fill(palette[5]);
        noStroke();
        rect(rectX, rectY, rectSize, rectSize, 2);
        pop();
        rect(rectX, rectY, rectSize, rectSize);
      }
      x += size;
    }
  }

  pop();
}

function fibonacci(n) {
  if (n <= 0) return 0;
  if (n === 1) return 1;
  let a = 0,
    b = 1,
    temp;
  for (let i = 2; i <= n; i++) {
    temp = a + b;
    a = b;
    b = temp;
  }
  return b;
}
const colorArray = [
  {
    id: 0,
    colors: ["#253276", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 1,
    colors: [
      "#9dbdba",
      "#f8b042",
      "#e47763",
      "#253276",
      "#dfdad3",
      "#FFFFFF",
      "#000000",
    ],
  },
];