260110

const { animate } = anime;
const W = 800;
const H = 800;
let palette = [];
let animeValue = {
  count: 0,
};
let R = 250;

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[4]);
  animate(animeValue, {
    count: 1,
    duration: 20000,
    ease: "outInExpo",
    loop: true,
    alternate: true,
  });
}

function draw() {
  background(palette[4]);
  orbitControl();
  strokeWeight(2);
  strokeCap(SQUARE);
  rotateX(TAU / 10);

  let f = animeValue.count;
  let thetaSteps = 12;
  let phiSteps = 100;

  for (let i = 0; i <= thetaSteps; i++) {
    let theta = map(i, 0, thetaSteps, 0, TAU / 2);
    for (let j = 0; j <= phiSteps; j++) {
      let phi = map(j, 0, phiSteps, 0, TAU);
      let delay = map(f, 0, 1, 0, TAU) + i * 0.05 + j * 0.3;
      const { x, y, z } = polarCoordinates(theta, phi, delay);
      push();
      if (i > 0 && j > 0) {
        let thetaPrev = map(i - 1, 0, thetaSteps, 0, TAU / 2);
        let phiPrev = map(j - 1, 0, phiSteps, 0, TAU);
        const {
          x: xPrev,
          y: yPrev,
          z: zPrev,
        } = polarCoordinates(thetaPrev, phiPrev, delay);
        stroke(palette[(i + j) % (palette.length - 3)]);
        line(x, y, z, xPrev, yPrev, zPrev);
      }
      pop();
    }
  }

  function polarCoordinates(theta, phi, f) {
    return {
      x: R * sin(theta + f) * cos(phi + f * 0.2),
      y: R * sin(theta + f) * sin(phi + f * 0.2),
      z: R * cos(theta + f),
    };
  }
  // noLoop();
}

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