251102

const { animate } = anime;

const W = 800;
const H = 800;
const DIVIDE = 40;

let remSize = 500;
let sphSize = 20;
let remNum = 5;
let speed = 0.001;

let palette = [];

let animeValue = {
  count: 0,
};
function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[2].colors;
  background(palette[0]);
  frameRate(60);
  noStroke();
  animate(animeValue, {
    count: 1,
    duration: 10000,
    ease: "inOutExpo",
    loop: true,
    loopDelay: 0,
    alternate: true,
  });
}

function draw() {
  // orbitControl();
  background(palette[0]);
  fill(palette[4]);
  rotateY(TAU / 4);
  push();
  for (let j = 0; j < remNum; j++) {
    push();
    let f = frameCount * speed;
    let fc = map(animeValue.count, 0, 1, 0, TAU / remNum / 2);
    rotateX(fc);
    rotateY(fc);
    rotateZ(fc);
    for (let i = 0; i < DIVIDE; i++) {
      push();
      let theta = f + (TAU / DIVIDE) * i;
      let rSquared = pow(remSize, 2) * cos(2 * theta);
      let gradCol = lerpColor(
        color(palette[0]),
        color(palette[4]),
        i / (DIVIDE - 1)
      );
      fill(red(gradCol), green(gradCol), blue(gradCol), 255);
      //虚数解を飛ばす
      if (rSquared >= 0) {
        let r = sqrt(rSquared);
        let phi = (TAU / remNum) * j;
        let x = r * sin(theta) * cos(phi);
        let y = r * sin(theta) * sin(phi);
        let z = r * cos(theta);
        translate(x, y, z);
        sphere(sphSize);
        pop();
      }
    }
    pop();
  }
  pop();

  // noLoop();
}

const colorArray = [
  {
    id: 0,
    colors: ["#253276", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 1,
    colors: ["#2E5400", "#dfdad3", "#ffffff", "#000000"],
  },
  {
    id: 2,
    colors: ["#253276", "#f9d3cc", "#f07433", "#437800", "#dfdad3"],
  },
];