Skip to main content
SimilarExport ZIP
100%

Network Effects

✓ Published0🌍 Public
CCurran Kelleher
Last edited Aug 7, 2025
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, enhanced with constellation-like lines connecting nearby stars.

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
  • 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

New Constellation Feature

  • Dynamic Connections: Lines appear between stars that are close to each other
  • Subtle Appearance: Light gray lines with transparency create a delicate constellation effect
  • Performance Optimized: Uses a spatial grid to efficiently find nearby stars
  • Depth Integration: Lines respect the 3D perspective and rotation of the starfield

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 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

Files

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

Similar vizzes

Loading thumbnail…

Gradient Starfield

This example shows a 3D starfield animation with 2,000 colorful stars moving through space and slowly rotating around the center. It runs on HTML5 Canvas and vanilla JavaScript, using `requestAnimationFrame` for smooth animation. Stars are generated with random positions, sizes, speeds, and colors, then rendered with perspective projection and recycled when they exit the viewport. The code uses trigonometric functions for rotation and a perspective factor for depth perception, with a translucent background to create subtle trails.

CCurran Kelleher
80% match
Loading thumbnail…

Blurry Spinning Rainbow Starfield

A colorful starfield animation displays 800 glowing stars moving through 3D space with a rotating perspective and dark cosmic background. Stars appear in vibrant HSL colors with varying sizes and speeds, creating a luminous, ethereal effect. The animation uses HTML5 Canvas with `requestAnimationFrame`, applying trigonometric rotation and perspective projection to simulate depth as stars move toward the viewer and recycle off-screen.

CCurran Kelleher
79% match
Loading thumbnail…

AI Test with Stars

This visualization presents a starfield of green stars connected by lines, forming a dynamic constellation. The stars gently drift and collide under a force-directed simulation, creating an organic, evolving network. Using D3.js, the code employs `d3.forceSimulation` for physics-based movement, `d3.drag` for interactive manipulation, and `d3.zoom` for pan and zoom controls. Stars are drawn as SVG paths, with lines linking those within a proximity threshold. The animation loop, driven by `requestAnimationFrame`, continuously updates positions and redraws the scene, allowing users to explore the interconnected star system.

CCurran Kelleher
79% match
Loading thumbnail…

Light Mode Starfield

A colorful starfield animation rendered on an HTML5 Canvas, with 800 stars moving through 3D space against a light background. The stars rotate around the center using trigonometric calculations and are projected with perspective depth. Each star features a distinct HSL color, size, and speed, and stars are recycled when they move off-screen. The animation runs with requestAnimationFrame, and the canvas resizes to fill the viewport.

CCurran Kelleher
79% match
Loading thumbnail…

Spinning Rainbow Starfield

This animation presents a colorful starfield viewed from a single point, with 2000 stars moving through three-dimensional space while the entire scene rotates around the center. The stars appear in random colors and sizes, leaving faint trails as they travel forward. Built with vanilla JavaScript and HTML5 Canvas, the piece uses trigonometric functions for rotation, a perspective projection formula to simulate depth, and `requestAnimationFrame` for smooth animation.

CCurran Kelleher
78% match
Loading thumbnail…

Jazzy 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.

CCurran Kelleher
77% match
Loading thumbnail…

star circle spin - canvas

Nine red stars orbit a central point on a 500-pixel Canvas, each tracing a circular path while collectively spinning as a group. Built with D3.js v4, the animation uses custom shape elements to store angular state, updating each star’s position every 5 milliseconds. The stars’ coordinates come from a hardcoded SVG path, scaled and offset dynamically per iteration, creating a smooth, rotating constellation effect.

PPatrick Wojda
74% match
Loading thumbnail…

Wiggly Worms

A 3D starfield animation displays 800 colorful stars wiggling through dark space with a rotating perspective and a continuous hue shift across the color spectrum. Each star, generated with random positions, sizes, and speeds, undulates via sinusoidal wave functions and recycles when moving off-screen. The animation uses vanilla JavaScript with Canvas API for rendering, `requestAnimationFrame` for smooth looping, and a CSS `hue-rotate` filter applied to the canvas each frame to create the dynamic color shifting effect.

CCurran Kelleher
73% match