Canvas Starfield

Sometimes coding is the perfect outlet for frustration. After a disappointing week, I channeled my energy into creating something I've always wanted to make - a starfield animation that gives the feeling of flying through space.

The Project

I spent a full night building this HTML5 Canvas-based starfield. The initial version turned out quite well, but I have plans to expand it with more features in the future.

The basic concept involves:

1. Creating randomly positioned stars
2. Animating them to create the illusion of movement through space
3. Adding depth perception by varying the size and speed of stars

The Implementation

The core of the implementation uses HTML5 Canvas to draw and animate stars. Here's a simplified version of how it works:

// Set up the canvas
const canvas = document.getElementById('starfield');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Star object
class Star {
  constructor() {
    this.x = Math.random() * canvas.width - canvas.width/2;
    this.y = Math.random() * canvas.height - canvas.height/2;
    this.z = Math.random() * 1000;
    this.size = 1;
    this.speed = Math.random() * 5 + 2;
  }
  
  update() {
    this.z -= this.speed;
    
    if (this.z <= 0) {
      this.x = Math.random() * canvas.width - canvas.width/2;
      this.y = Math.random() * canvas.height - canvas.height/2;
      this.z = 1000;
    }
  }
  
  draw() {
    const x = (this.x / this.z) * 500 + canvas.width/2;
    const y = (this.y / this.z) * 500 + canvas.height/2;
    const size = (1 - this.z/1000) * 5;
    
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(x, y, size > 0 ? size : 0.1, 0, Math.PI * 2);
    ctx.fill();
  }
}

// Create stars
const stars = Array(200).fill().map(() => new Star());

// Animation loop
function animate() {
  // Clear canvas
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Update and draw stars
  stars.forEach(star => {
    star.update();
    star.draw();
  });
  
  requestAnimationFrame(animate);
}

animate();

The Result

The final result creates an immersive experience of flying through space. Stars appear to move from the center of the screen outward, creating a sense of forward movement.

Check it Out

You can see the original version at https://athousandnodes.com/labs/starfield (note: this link is archived and may not be accessible).

The source code is available on GitHub: https://github.com/naughtydavid/starfield

Future Plans

I'm planning to enhance this project with:

• Nebula-like effects
• Color variations for different star types
• Interactive controls for speed and direction
• Shooting stars and other celestial phenomena

Conclusion

This project was a therapeutic coding exercise and a fun way to explore HTML5 Canvas animation. It demonstrates how creative coding can be both an artistic outlet and a technical challenge.

Note: This article was migrated from the original A thousand nodes blog (2011)