Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Flower Starfield

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

69e5b176927343fcb8d08328d8b5068d

Open

Flower Starfield

0 stars0🌍 Public
CCurran Kelleher
Last edited Aug 5, 2025
Created on Aug 5, 2025
Forked from Jazzy Starfield

A rotating field of colorful flowers moves through a dark, 3D perspective space. Each flower is procedurally generated with randomized petal counts, pastel HSL colors, and weighted sizes. The animation uses Canvas 2D `drawImage` with pre-rendered offscreen canvases for each flower, while `requestAnimationFrame` drives the loop. Rotation and perspective projection are calculated with trigonometric functions, and a slider adjusts flower scale in real time.

AI-generated description

3D Rotating Starfield (Dark Mode)

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

Features

  • Dark Mode: Features a deep space background with vibrant stars
  • 3D Perspective: Stars move through 3D space with realistic depth perception
  • Rotation Effect: The entire starfield slowly rotates around the center
  • Colorful Stars: Each star has a vibrant hue generated using HSL colors
  • Glow Effects: Stars have luminous glow effects for an ethereal appearance
  • Responsive Design: Automatically adjusts to window size changes
  • Smooth Animation: Uses requestAnimationFrame for optimal performance

How it Works

  • 2000 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: 2000)
  • 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 (dark space 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