251030

const { animate } = anime;

const W = 800;
const H = 800;

const SPHERE_SIZE = 30;
const SPHERE_NUM = 10;
const SATE_SIZE = 8;
const SATE_NUM = 30;

let palette = [];
let gridPoints = [];
let innerAngles = [];

let animeValue = {
  count: 0,
};

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

  noFill();
  animate(animeValue, {
    count: 1,
    duration: 5000,
    ease: "inOutCirc",
    loop: true,
    loopDelay: 0,
    alternate: true,
  });
}

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

  for (let i = 0; i < SPHERE_NUM; i++) {
    push();
    let r = W / 4;
    let angle = (TAU / SPHERE_NUM) * i;
    let x = cos(angle) * r;
    let y = sin(angle) * r;
    let f = map(animeValue.count, 0, 1, 0, TAU * 2);
    let sr = SPHERE_SIZE + SATE_SIZE;
    let sAngle = f - i;
    translate(x, y, 0);
    noFill();
    stroke(palette[0]);
    strokeWeight(SATE_SIZE);
    beginShape();
    for (let j = 0; j < SATE_NUM; j++) {
      push();
      let lon =
        (cos(sAngle + (TAU / 8 / SATE_NUM) * j) *
          (sin(sAngle + (TAU / 8 / SATE_NUM) * j) * TAU)) /
        2;
      let lat = (sin(sAngle + (TAU / 8 / SATE_NUM) * j) * TAU) / 2;

      let sx = sr * cos(lat) * cos(lon);
      let sy = sr * cos(lat) * sin(lon);
      let sz = sr * sin(lat);

      splineVertex(sx, sy, sz);
      pop();
    }
    endShape();

    noStroke();
    if (sAngle > TAU / 2) {
      fill(palette[3]);
    } else {
      fill(palette[2]);
    }
    sphere(SPHERE_SIZE);
    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"],
  },
];