260106

const { animate, steps } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
let lightValue = [
  { intensity: 0 }, // ライト0
  { intensity: 0 }, // ライト1
  { intensity: 0 }, // ライト2
  { intensity: 0 }, // ライト3
];

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

  animate(animeValue, {
    count: 1,
    duration: 20000,
    ease: "outIn(1.85)",
    loop: true,
    alternate: true,
  });

  for (let i = 0; i < lightValue.length; i++) {
    animate(lightValue[i], {
      intensity: 150,
      duration: 2000,
      ease: "outExpo",
      loop: true,
      loopDelay: 500,
      alternate: true,
      delay: i * 450,
    });
  }
}

function draw() {
  background(palette[4]);
  // orbitControl();
  ambientMaterial(255);
  specularMaterial(255);
  shininess(100);

  for (let i = 0; i < 4; i++) {
    let f = animeValue.count * (i * 0.8 + 1);
    let t = constrain(f * TAU, 0, TAU);
    let radius = 100 + 50 * (i + 1);
    let angle = (i * TAU) / 8;
    let intensity = lightValue[i].intensity;
    let x_orig = radius * sin(t);
    let y_orig = radius * sin(t) * cos(t);
    // 回転行列
    let x = x_orig * cos(angle) - y_orig * sin(angle);
    let y = x_orig * sin(angle) + y_orig * cos(angle);
    let c = color(palette[i]);
    pointLight(
      (red(c) * intensity) / 255,
      (green(c) * intensity) / 255,
      (blue(c) * intensity) / 255,
      x,
      y,
      100
    );
  }
  push();
  translate(0, 0, -100);
  noStroke();
  plane(W, H);
  pop();

  // noLoop();
}

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