260115

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[0]);
  animate(animeValue, {
    count: 1,
    duration: 12000,
    ease: 'inOutExpo',
    loop: true,
    // loopDelay: 400,
    alternate: true,
  });
}

function draw() {
  background(palette[0]);
  orbitControl();

  // rotateX(-TAU / 10);

  let boxSize = 400;
  let size = boxSize / 3;
  let groundY = size;

  let vertices = [
    createVector(size, size, -size), // 右上前
    createVector(-size, size, -size), // 左上前
    createVector(-size, -size, size), // 左下後
    createVector(size, -size, size), // 右下後
  ];

  for (let j = 0; j < 2; j++) {
    for (let i = 0; i < palette.length - 1; i++) {
      // iとjの両方で回転をずらす
      let offset = ((i / (palette.length - 1)) * TAU) / 3 + (j / 3) * TAU;
      let fc = cos(animeValue.count * TAU + offset) * 10;
      let fs = sin(animeValue.count * TAU + offset) * 10;

      // 光の方向
      let lightDir = createVector(fc, 1, fs).normalize();

      let shadowVertices = [];
      for (let v of vertices) {
        // 頂点から地面まで
        let t = (groundY - v.y) / lightDir.y;
        // 地面との交点
        let shadowPoint = p5.Vector.add(v, p5.Vector.mult(lightDir, t));
        // 影をずらす
        shadowVertices.push(shadowPoint);
      }

      push();
      noStroke();
      let shadowColor = color(palette[i + 1]);
      shadowColor.setAlpha(150);
      fill(shadowColor);
      beginShape();
      for (let sv of shadowVertices) {
        push();
        vertex(sv.x, sv.y - i, sv.z);
        pop();
      }
      endShape(CLOSE);
      pop();
    }
  }

  // boxを描画
  // box(boxSize);
  // noLoop();
}

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