Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Network Effects

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

ChJo6dThxvLtHdQqofxpm

Open

Network Effects

0 stars1🌍 Public
CCurran Kelleher
Last edited Oct 29, 2026
Created on Aug 5, 2025
Forked from Jazzy Starfield

This visualization depicts a synthetic starfield with a rotating perspective, where 800 colorful stars move through a three-dimensional space. A constellation effect connects nearby stars with subtle gray lines as they drift and wobble across a light background. The animation uses HTML5 Canvas with vanilla JavaScript, leveraging its 2D context to draw glowing circles and lines. A spatial grid optimization efficiently links neighboring stars, while the `requestAnimationFrame` API drives the continuous rotation and recycling of stars.

AI-generated description

3D Rotating Starfield with Constellations (Light 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 light cosmic environment, and mouse-driven motion so the field responds to where you point.

Features

  • Light Mode: Features a bright space background with colorful stars
  • 3D Perspective: Stars move through 3D space with realistic depth perception
  • Rotation Effect: The entire starfield slowly rotates around the center
  • Mouse Interaction: Move the mouse to steer the direction of motion
  • Parallax Drift: The whole field drifts toward the cursor for depth
  • Smooth Easing: Motion follows the mouse with eased, natural response
  • Colorful Stars: Each star has a vibrant hue generated using HSL colors
  • Glow Effects: Stars have luminous glow effects for an ethereal appearance
  • Constellation Lines: Nearby stars are connected with subtle lines creating a constellation effect
  • Responsive Design: Automatically adjusts to window size changes
  • Smooth Animation: Uses requestAnimationFrame for optimal performance
  • Efficient Rendering: Spatial grid optimization for line drawing

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
  • Constellation lines are drawn between stars within a certain distance
  • Spatial grid optimization ensures efficient line drawing

Mouse Control

  • The mouse position is normalized relative to the canvas center (-1..1 per axis)
  • That direction vector is eased each frame and used for three effects:
    1. Rotation steering – moving the mouse left/right speeds up or reverses rotation
    2. Parallax shift – stars shift toward the mouse to fake depth/direction
    3. Drift & recycling – the field drifts toward the cursor, and recycled stars re-enter from the opposite side so motion always feels aimed where you point

Usage

Simply open index.html in a web browser. The animation starts automatically and fills the entire viewport. Move your mouse around to steer the motion.

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: Base rotation speed
  • BG_COLOR: Background color (light space theme)
  • SIZE_DISTRIBUTION: Array with size distribution probabilities
  • LINE_DISTANCE: Maximum distance to connect stars with lines
  • LINE_COLOR: Color and transparency of constellation lines
  • MOUSE_DRIFT_STRENGTH: How far the field drifts toward the cursor (px)
  • MOUSE_X_SHIFT / MOUSE_Y_SHIFT: Parallax shift strength
  • MOUSE_EASING: How fast motion follows the mouse (0..1)
  • MOUSE_ROTATION_INFLUENCE: How much horizontal mouse motion changes rotation speed
  • FORWARD_SPEED_MULTIPLIER: Speed of stars coming toward viewer

Files

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