sketches/LoadingSketch.js

export const loadingSketch = `let particles = [];
let numParticles = 28;
let circleRadius = 50;
let rotationSpeed = 0.02;
let particleMinSize = 3;
let particleMaxSize = 7;

let centerX;
let centerY;

let freeformAmplitude = 2;
let freeformSpeed = 0.01;

let color1Hex = "#217BFE";
let color2Hex = "#078BFE";
let color3Hex = "#AC87EB";
let color1;
let color2;
let color3;

function setup() {
  createCanvas(500, 500);
  background(0);
  noStroke();

  color1 = color(color1Hex);
  color2 = color(color2Hex);
  color3 = color(color3Hex);

  centerX = width / 2;
  centerY = height / 2;

  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle(i, numParticles));
  }
}

function draw() {
  background(0, 50);

  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

class Particle {
  constructor(index, totalParticles) {
    this.index = index;
    this.totalParticles = totalParticles;
    this.radiusOffset = (index / totalParticles) * TWO_PI;
    this.angle = this.radiusOffset;
    this.speedVariation = random(0.7, 1.3);
    this.size = random(particleMinSize, particleMaxSize);
    this.colorValue = this.getColor(index, totalParticles);
    this.pos = createVector(0, 0);
  }

  getColor(index, totalParticles) {
    let normalizedIndex = index / (totalParticles - 1);

    let particleColor;
    if (normalizedIndex < 0.5) {
      particleColor = lerpColor(color1, color2, normalizedIndex * 2);
    } else {
      particleColor = lerpColor(color2, color3, (normalizedIndex - 0.5) * 2);
    }
    return particleColor;
  }

  update() {
    this.angle += rotationSpeed * this.speedVariation;

    let base_x = centerX + cos(this.angle) * circleRadius;
    let base_y = centerY + sin(this.angle) * circleRadius;

    let noiseX = map(noise(this.angle * 2 + frameCount * freeformSpeed), 0, 1, -freeformAmplitude, freeformAmplitude);
    let noiseY = map(noise(this.angle * 2 + frameCount * freeformSpeed + 100), 0, 1, -freeformAmplitude, freeformAmplitude);

    this.pos.set(base_x + noiseX, base_y + noiseY);
  }

  display() {
    fill(this.colorValue);
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }
}`;