260120

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

let numPoints = 20;
let points = [];
let loopCounter = 0;

function setup() {
  createCanvas(W, H, WEBGL);
  palette = colorArray[1].colors;
  background(palette[0]);
  animate(animeValue, {
    count: 1,
    duration: 4000,
    ease: 'inOut(3.08)',
    loop: true,
    // loopDelay: 500,
    alternate: true,
    onLoop: function () {
      if (animeValue.count < 0.5) {
        loopCounter++;
      }
    },

  });
}

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

  let f = animeValue.count;
  noFill();
  stroke(palette[5]);
  strokeWeight(2);
  rotateZ(-TAU / 8);

  points = [];
  let startX = -W / 2;
  let endX = W / 2;

  for (let i = 0; i < numPoints; i++) {
    let t = i / (numPoints - 1);
    let x = lerp(startX, endX, t);
    let y, z;
    if (i === 0 || i === numPoints - 1) {
      y = 0;
      z = 0;
    } else {

      randomSeed(loopCounter * 1000 + i);
      let delay = map(i, 0, numPoints - 1, 0, 1);
      let phase = constrain(f - delay, 0, 1);
      let wobble = sin(phase * TAU * delay * i) * 100;
      y = cos(phase * random(-TAU, TAU) * i) * (wobble);
      z = sin(phase * random(-TAU, TAU) * i) * (wobble);
    }
    points.push(createVector(x, y, z));
  }
  beginShape();
  for (let i = 0; i < points.length; i++) {
    splineVertex(points[i].x, points[i].y, points[i].z);
  }
  endShape();

  // noLoop();
}

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