Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Jazzy Starfield

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

de9723d172044dcf8905a880c0c1ed94

Open

Jazzy Starfield

1 star3🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Aug 5, 2025
Forked from Gradient Starfield

This animated visualization presents a 3D starfield with jazz-inspired movement and color. Over 1,200 stars pulse, sparkle, and rotate through perspective space, using layered glow effects to create a dramatic, atmospheric display. The animation is rendered with HTML5 Canvas and JavaScript, using `requestAnimationFrame` for smooth performance. Each star features dynamic timing for pulsing and improvisational movement deviations, with colors drawn from jazz-associated palettes including gold, blue, red, white, and copper.

AI-generated description

3D Rotating Starfield (Light Mode)

An interactive 3D starfield animation built with HTML5 Canvas and vanilla JavaScript. Features a rotating perspective view with subtle stars moving through 3D space in a light-themed cosmic environment.

Features

  • Light Mode: Features a soft background with gentle star colors
  • 3D Perspective: Stars move through 3D space with realistic depth perception
  • Rotation Effect: The entire starfield slowly rotates around the center
  • Soft Colored Stars: Each star has a muted hue generated using HSL colors
  • Glow Effects: Stars have subtle glow effects for a soft appearance
  • Responsive Design: Automatically adjusts to window size changes
  • Smooth Animation: Uses requestAnimationFrame for optimal performance

How it Works

  • 800 stars are generated with random positions, colors, sizes, and speeds
  • Each star exists in 3D space (x, y, z coordinates)
  • Stars rotate around the center using trigonometric functions
  • Perspective projection creates the illusion of depth
  • Stars that move off-screen are recycled to the back of the scene

Usage

Simply open index.html in a web browser. The animation starts automatically and fills the entire viewport.

Customization

You can adjust various parameters in constants.js:

  • NUM_STARS: Number of stars (default: 800)
  • MIN_STAR_SIZE / MAX_STAR_SIZE: Star size range
  • MIN_SPEED / MAX_SPEED: Star movement speed range
  • PERSPECTIVE_FACTOR: Controls depth effect intensity
  • ROTATION_SPEED: How fast the starfield rotates
  • BG_COLOR: Background color (light theme)

Files

  • index.html: Main HTML structure
  • index.js: Animation controller
  • renderer.js: Canvas rendering logic
  • star.js: Star generation and properties
  • constants.js: Configuration parameters
  • styles.css: Basic styling for full-screen display