Animated Spiral Rotation - xelsed.ai

function setup() {
  // Create a WebGL canvas that fills the window
  createCanvas(windowWidth, windowHeight, WEBGL);
  // Disable drawing outlines for stars and glow
  noStroke();
  // Enable anti-aliasing for smoother edges (optional, but recommended)
  smooth();

  // Define the purple and blue colors for the gradient
  purpleColor = color(80, 0, 120);
  blueColor = color(0, 50, 150);
  // Define the warm white/yellow color for the glowing center
  glowCenterColor = color(255, 240, 220);

  // Generate all the star positions and colors
  generateStars();
}

function generateStars() {
  for (let i = 0; i < numStars; i++) {
    let r, theta, z;
    let starColor;

    // Randomly decide if the star is in the core or arms (30% chance for core stars)
    if (random() < 0.3) {
      // Core Star: Random position within the core radius
      r = random(coreRadius);
      theta = random(TWO_PI);
      // Core stars have less z-variation, creating a thicker bulge
      z = random(-15, 15);
      // Core stars are brighter, matching the glow center
      starColor = glowCenterColor;
    } else {
      // Arm Star:
      // Choose which arm the star belongs to
      let armIndex = floor(random(armCount));
      // Radius ranges from the core edge to the galaxy's outer edge
      r = random(coreRadius, galaxyRadius);

      // Calculate theta for a logarithmic spiral pattern
      // The theta increases with radius, creating the spiral shape
      // armDensity controls the tightness of the spiral
      // random(-armOffset, armOffset) adds thickness to the arms
      // armIndex * TWO_PI / armCount offsets each arm evenly
      theta = (r - coreRadius) * armDensity + random(-armOffset, armOffset) + armIndex * TWO_PI / armCount;

      // Arm stars have more z-variation further from the center, creating a thinner disc
      z = random(-r * 0.08, r * 0.08);

      // Apply color gradient: purple near the core, blue towards the edge
      // map(r, coreRadius, galaxyRadius, 0, 1, true) ensures values stay between 0 and 1
      starColor = lerpColor(purpleColor, blueColor, map(r, coreRadius, galaxyRadius, 0, 1, true));
    }

    // Convert polar coordinates (r, theta) to Cartesian coordinates (x, y)
    let x = r * cos(theta);
    let y = r * sin(theta);

    // Add the star data to the stars array
    stars.push({
      x: x,
      y: y,
      z: z,
      color: starColor,
      size: random(1, 3) // Random small star size (single pixel in WebGL)
    });
  }
}

function draw() {
  // Set the background to black
  background(0);

  // Position the camera back from the origin and lay the galaxy flat on the XY plane
  translate(0, 0, -300); // Move camera back
  rotateX(PI / 2);      // Rotate the galaxy to be horizontal (on the XY plane)

  // Rotate the entire galaxy around its Z-axis
  rotateZ(currentRotation);
  // Increment rotation speed (adjust value for faster/slower rotation)
  currentRotation += 0.002;

  // --- Draw the glowing center ---
  let glowRadius = coreRadius * 1.8; // Glow extends beyond the core
  let glowLayers = 15;                // Number of transparent spheres for the glow effect

  // Loop from largest (most transparent) to smallest (most opaque) spheres
  for (let i = glowLayers; i >= 1; i--) {
    // Calculate radius and alpha for the current glow layer
    let r = map(i, 0, glowLayers, 0, glowRadius);
    let alpha = map(i, 0, glowLayers, 0, 80); // Alpha decreases towards the outside (more transparent)

    // Set fill color with transparency
    fill(glowCenterColor, alpha);
    // Draw a sphere for the glow layer
    sphere(r);
  }

  // --- Draw the stars ---
  // beginShape(POINTS) is an efficient way to draw many single-pixel points in WebGL
  beginShape(POINTS);
  for (let i = 0; i < stars.length; i++) {
    let star = stars[i];
    // Set the fill color for the current star
    fill(star.color);
    // Add the star's 3D coordinates as a vertex
    vertex(star.x, star.y, star.z);
  }
  endShape(); // End the POINTS shape
}

function windowResized() {
  // Resize the canvas when the window is resized
  resizeCanvas(windowWidth, windowHeight);
}