Interactive Star Field Background with JavaScript and Canvas

starfield.js is a JavaScript library for creating an animated starfield (lightspeed) background that can react to user interactions.

It’s ideal for landing pages, portfolios, game websites, or any space-themed websites to create realistic star field backgrounds.

Features:

• Real-time star movement controlled by user interactions
• Configurable star count, speed, and color properties
• Responsive design that adapts to different screen sizes

How to use it:

1. Download and import the Starfield.js library. You can either including the script in your HTML file or import it in your JavaScript file.

<script src="starfield.js"></script>

// OR
import Starfield from './starfield.js';

2. Create a container element in your HTML where the star field effect will be displayed. This can be any block-level element, such as a div. This element should cover the area you want to fill with the star field.

<div class="starfield">
</div>

3. Create an element within the container to act as the origin point for the star field animation. Hovering or dragging this element will change the animation’s speed and direction of starlight flow.

<div class="starfield">
  <button class="starfield-origin">Hover & Drag me!</button>
</div>

4. Make sure your star field container and origin element are properly positioned and sized.

/* make it fullscreen */
.starfield {
  height: 100%;
  width: 100%;
}
/* center the origin element */
.starfield-origin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

5. Initializes the star field with default settings.

Starfield.setup();

6. Customize the behavior and appearance of the star field using configuration options. For instance, increasing numStars creates a denser star field, while changing starColor modifies the color of the stars. Setting auto to false and providing values for riginX and originY allows you to manually set the origin point & interactions.

Starfield.setup({
  // Number of stars
  numStars: 250,
  // Base speed of stars (influences acceleration)
  baseSpeed: 1,
  // Length of star trail (0-1)
  trailLength: 0.8, 
  // Color of stars (RGB format)
  starColor: 'rgb(230, 230, 100)', 
  // Canvas background color (RGB format)
  canvasColor: 'rgb(0, 0, 0)', 
  // Maximum hue variation in degrees (0-360)
  hueJitter: 0,    
  // Maximum acceleration   
  maxAcceleration: 10, 
  // Rate of acceleration         
  accelerationRate: 0.2, 
  // Rate of deceleration   
  decelerationRate: 0.2, 
  // Minimum spawn distance from origin       
  minSpawnRadius: 80, 
  // Maximum spawn distance from origin       
  maxSpawnRadius: 500,   
  // Use automatic origin detection  
  auto: true,  
  // Manual origin X (container width / 2 if not set)               
  originX: null, 
  // Manual origin Y (container height / 2 if not set)
  originY: null, 
  // Container element selector         
  container: null, 
  // Origin element selector            
  originElement: null 
              
});

How It Works:

Starfield.js uses HTML5 Canvas and JavaScript to create an animated star field background. The library initializes a canvas element within a specified container and draws stars that move based on configured parameters.

Setup and Configuration

The setup function initializes the star field. It accepts a configuration object that defines various properties such as the number of stars, their speed, color, and trail length. The function also sets up event listeners for mouse interactions and window resizing.

Star Creation and Movement

Stars are created randomly within a specified radius from the origin. Each star has properties like position, velocity, and angle. The stars move based on their velocity and angle, creating a trailing effect. The movement speed and direction can be influenced by mouse interactions with the origin element.

Animation Loop

The animation loop updates the position of each star and redraws the canvas. The stars’ velocity and angle are recalculated based on the acceleration factor, which changes with mouse interactions. Stars that move off-screen are reset to a new random position.

Event Handlers

Event handlers manage mouse interactions and window resizing. Mouse enter and leave events on the origin element control the acceleration of the stars. Window resize events adjust the canvas size and star positions to maintain the effect.