251109

const { animate } = anime;

const W = 800;
const H = 800;

const DIVIDE = 30;
let size = 100;
let lineNum = 5;
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: 6000,
    ease: "inOutCirc",
    loop: true,
    loopDelay: 100,
    // alternate: true,
  });
}

function draw() {
  orbitControl();
  background(palette[0]);
  noFill();
  stroke(palette[4]);
  strokeWeight(3);
  push();
  let baseF = map(animeValue.count, 0, 1, 0, TAU);
  rotateY(-TAU / 4);
  for (let j = 0; j < lineNum; j++) {
    let f = baseF + (TAU / lineNum) * j;
    push();
    beginShape();
    for (let i = 0; i < DIVIDE; i++) {
      let theta = (TAU / 2 / DIVIDE) * i + f;
      let phi = (TAU / DIVIDE) * i + f;
      let r = (2 * cos(theta) + 1) * size;
      let x = r * sin(phi) * cos(theta);
      let y = r * sin(phi) * sin(theta);
      let z = r * cos(phi);
      push();
      splineVertex(x, y, z);
      pop();
    }
    endShape();
    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"],
  },
];