Skip to main content
SimilarExport ZIP
100%

Wiggly Worms

✓ Published1🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Aug 7, 2025
Forked from Jazzy Starfield

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.

AI-generated description

3D Wiggling Starfield with Hue Shift (Dark Mode)

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

Features

  • Dark Mode: Features a deep space background with vibrant stars
  • 3D Perspective: Stars move through 3D space with realistic depth perception
  • Wiggle Motion: Stars wiggle and undulate in mesmerizing wave patterns
  • Rotation Effect: The entire starfield slowly rotates around the center
  • Dynamic Hue Shift: The entire canvas continuously shifts through the color spectrum
  • 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

  • 800 stars are generated with random positions, colors, sizes, and speeds
  • Each star exists in 3D space (x, y, z coordinates) with wiggle properties
  • Stars wiggle using sinusoidal wave functions with unique phases and intensities
  • Stars rotate around the center using trigonometric functions
  • Perspective projection creates the illusion of depth
  • CSS hue-rotate filter is applied to the entire canvas each frame for color shifting
  • 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 (dark space theme)
  • WIGGLE_AMPLITUDE: How far stars wiggle from their base position
  • WIGGLE_FREQUENCY: How fast the wiggle oscillates
  • WIGGLE_PHASE_VARIATION: Creates different wiggle patterns for each star
  • HUE_SHIFT_SPEED: How fast the hue shifts (degrees per frame)

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

Similar vizzes

Loading thumbnail…

Fork of Wiggly Worms

This interactive canvas animation depicts a starfield of 800 colorful, wiggling stars with motion trails, rendered against a dark background with an overall hue shift effect. Each star follows a sinusoidal wiggle pattern while moving toward the viewer with a perspective projection, creating a sense of depth. The code uses the Canvas 2D API's `fillRect` and `stroke` for drawing, alongside `requestAnimationFrame` for the animation loop and a CSS `hue-rotate` filter for the color cycling.

CCurran Kelleher
91% 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
80% 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…

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
77% match
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
76% 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
74% match
Loading thumbnail…

Network Effects

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.

CCurran Kelleher
73% match
Loading thumbnail…

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

CCurran Kelleher
71% match