Starfield Attempt - xelsed.ai

function setup() {
  // Create a standard 2D canvas that fills the window
  createCanvas(windowWidth, windowHeight);
  
  // Disable stroke for all shapes (stars and glow)
  noStroke(); 
  
  // Initialize the array of stars
  for (let i = 0; i < numStars; i++) {
    stars.push(new Star());
  }
}

function draw() {
  // --- Create Trails Effect (2D Specific) ---
  // Draw a semi-transparent black rectangle over the entire canvas.
  // This will fade out the previous frame's stars, creating the trail effect.
  background(0, 50); 

  // --- Update and Draw Stars ---
  for (let i = 0; i < stars.length; i++) {
    stars[i].update(); // Update star's position and speed
    stars[i].show();   // Draw the star
  }
}

function windowResized() {
  // Resize the canvas when the window is resized
  resizeCanvas(windowWidth, windowHeight);
  
  // Re-initialize stars to adapt to new dimensions (optional, but good for fresh start)
  stars = [];
  for (let i = 0; i < numStars; i++) {
    stars.push(new Star());
  }
}

  constructor() {
    this.reset();
  }

  reset() {
    // Abstract "depth" value: starts far away (large z) and moves towards 0 (close)
    this.z = random(width); 
    
    // Initial position is the center of the canvas
    this.x = width / 2;
    this.y = height / 2;

    // Initial speed at which z decreases
    this.speed = random(1, 5); 
    
    // Randomize star color between white and a subtle blue
    this.color = random() > 0.5 ? color(255) : color(100, 100, 255); 
    
    // Base size for perspective scaling
    this.baseSize = random(0.5, 2); 
    
    // Random direction vector away from the center
    this.dir = p5.Vector.random2D();
  }

  update() {
    // Decrease the abstract z value (star moves closer)
    this.z -= this.speed;

    // Acceleration: increase speed as stars get "closer" (z approaches 0)
    // The closer the star, the more it accelerates.
    this.speed += starAcceleration * (1 - this.z / width);
    
    // Constrain speed to a reasonable range
    this.speed = constrain(this.speed, 1, 30); 

    // If star has passed the "camera" (z <= 0), reset it
    if (this.z <= 0) {
      this.reset();
    }
  }

  show() {
    // Calculate screen position and size based on perspective projection
    // As z approaches 0, the star gets larger and moves further from the center
    
    // Map z to an inverse scale: smaller z means closer, larger on screen
    const mappedZ = map(this.z, 0, width, width, 0.1); 

    // Scale the star's radius based on its depth (mappedZ)
    // The `0.01` multiplier fine-tunes the base size
    const screenRadius = this.baseSize * (width / mappedZ) * 0.01; 

    // Calculate screen X and Y positions relative to the center and mappedZ
    const screenX = this.x + this.dir.x * (width / mappedZ);
    const screenY = this.y + this.dir.y * (height / mappedZ);

    // --- Draw Glow Effect ---
    // Create a glow color with low alpha
    let glowColor = color(red(this.color), green(this.color), blue(this.color), 50); 
    for (let i = 1; i <= 3; i++) {
      fill(glowColor);
      ellipse(screenX, screenY, screenRadius * (1 + i * 0.2)); // Gradually larger ellipses for glow
    }
    
    // --- Draw Main Star ---
    fill(this.color); // Set star color
    ellipse(screenX, screenY, screenRadius);
  }