260411

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let currentSeed = 0;
let animeValue = {
  count: 0,
};
const SIZE = 140;
const STROKE_W = 2;

function setup() {
  createCanvas(W, H, WEBGL);
  strokeCap(SQUARE);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(animeValue, {
    count: 1,
    duration: 2000,
    ease: "outCirc",
    loop: true,
    alternate: true,
  });
  currentSeed = int(random(10000));
}

function draw() {
  background(palette[4]);
  ortho();
  randomSeed(currentSeed);
  let f = animeValue.count;
  let num = 3;
  let r = SIZE * sqrt(2 / 3);
  let w = sqrt(3) * r;
  let h = 2 * r;
  let gridW = (num - 1) * w;
  let gridH = (num - 1) * h * 0.75;
  push();

  translate(-gridW / 2, -gridH / 2, 0);

  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {
      push();
      let x = i * w;
      let y = j * h * 0.75;
      if (j % 2 === 0) {
        translate(x, y, 0);
      } else {
        translate(x + w * 0.5, y, 0);
      }
      if (!(i === 2 && j === 1)) {
        let offset = random(0, 1);
        let fc = constrain((f - offset) / (1 - offset), 0, 1);
        drawCube(fc);
      }
      pop();
    }
  }
  pop();
  // noLoop();
}

function drawCube(f) {
  push();
  rotateX(-TAU / 8 + TAU / 32);
  rotateY(-TAU / 8);
  strokeWeight(STROKE_W);
  translate(0, 0, 1); // z-fighting対策

  // 正面（Z+）
  push();
  translate(0, 0, SIZE / 2);
  drawRect(f, random(0, 0.5));
  pop();

  // 右面（X+）
  push();
  translate(SIZE / 2, 0, 0);
  rotateY(TAU / 4);
  drawRect(f, random(0, 0.5));
  pop();

  // 上面（Y-）
  push();
  translate(0, -SIZE / 2, 0);
  rotateX(TAU / 4);
  drawRect(f, random(0, 0.5));
  pop();
  pop();
}

function drawRect(f, rectOffset) {
  let count = int(random(3, 5));
  let pad = STROKE_W + 8;
  let inner = SIZE - pad * 2;
  let s;
  if (count > 1) {
    s = inner / (count - 1);
  } else {
    s = 0;
  }

  push();
  rotateZ((TAU / 4) * int(random(0, 2)));
  translate(-SIZE / 2, -SIZE / 2, 0);

  for (let i = 0; i < count; i++) {
    let fc = constrain((f - rectOffset) / (1 - rectOffset), 0, 1);
    let fi = constrain(
      map(fc, (i / count) * 0.4, (i / count) * 0.4 + 0.6, 0, 1),
      0,
      1,
    );
    let len = SIZE * fi * random(0.2, 3);
    let cy = SIZE / 2;
    stroke(palette[5]);
    line(pad + i * s, cy + len, 0, pad + i * s, cy - len, 0);
  }

  push();
  fill(palette[int(random(0, palette.length - 2))]);
  stroke(palette[6]);
  rect(0, 0, SIZE, SIZE);
  pop();
  pop();
}

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