100%

Milkey Way Galaxy

✓ Published1🌍 Public

Last edited Mar 24, 2025

Created on Mar 24, 2025

A Canvas-based animation depicts the Milky Way as a glowing, rotating spiral of ten thousand stars. Logarithmic spiral arms, colored dust lanes, and semi-transparent nebulae are rendered with radial gradients and individual `ctx.arc` calls. Star colors vary by position, with a yellowish core and bluish young stars, while `requestAnimationFrame` drives smooth, Keplerian rotation where inner regions orbit faster.

AI-generated description

Milky Way Galaxy Visualization

This project creates an interactive visualization of the Milky Way galaxy using HTML Canvas and JavaScript. The visualization features:

Thousands of stars distributed in a spiral galaxy pattern
Multiple spiral arms with distinct structures
A bright galactic core
Colored dust lanes and nebulae
Realistic rotation with inner regions rotating faster (Keplerian rotation)
Different star colors representing various star types
Responsive design that adapts to different screen sizes

How to Use

Simply open the index.html file in a modern web browser to view the galaxy. No interaction is required, but the visualization will automatically adjust if you resize your browser window.

Implementation Details

The galaxy is rendered on an HTML Canvas element with these key features:

Star generation with varying colors based on position in the galaxy:
- Yellowish stars in the core
- Bluish young stars in selected spiral arms
- General yellowish-white stars throughout
Dust lanes that create darker regions in the spiral arms
Nebulae rendered as colorful, semi-transparent clouds:
- Reddish emission nebulae
- Bluish reflection nebulae
- Yellowish star-forming regions
Realistic spiral structure with logarithmic spirals
Animation uses requestAnimationFrame for smooth performance

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Milkey Way Galaxy

This interactive canvas simulation depicts a rotating, multi-armed spiral galaxy with thousands of dynamically colored stars, a central black hole, and adjustable dust clouds. It uses Canvas API 2D drawing with a logarithmic spiral algorithm for star distribution, Keplerian differential rotation, and supports pan, zoom, and tooltips on celestial objects. Sliders control star count, rotation speed, arm number, and dust visibility.

NNita

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

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

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

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

71% match

Loading thumbnail…

Milky Way

This visualization displays a 360-degree panorama of the Milky Way, captured by the European Southern Observatory, reprojected onto a stereographic projection to simulate the night sky as seen from Earth. The interactive animation rotates the view over time, allowing exploration of the entire celestial sphere. Built using WebGL and custom shaders, the code compiles vertex and fragment shaders to perform the inverse stereographic projection and image texture mapping in real time. The source equirectangular image is loaded as a texture, with mipmaps enabling accurate rendering during continuous motion.

Mmbostock

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

70% match

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

69% match