JavaScript Black Hole Animation with Canvas

In this experiment, we'll build an interactive black hole animation with JavaScript and HTML5 Canvas, including an accretion disk, spiraling particles, adjustable gravity, and a visual approximation of gravitational lensing. You can run the demo directly in your browser and change gravity, mass, and density in real time.

LIVE DEMO

Interactive Black Hole Demo

Move the pointer near the black hole

CANVAS + JAVASCRIPT

Gravity 0.55 Mass 6.0 Particles 90

The idea in one line

We are not solving general relativity in the browser. We combine a simple inverse-distance force with real visual cues — shadow, accretion disk, gravitational lensing and asymmetric brightness — so the result looks and feels much more convincing.

How the JavaScript Gravity Effect Works

gravity.js

const dx = blackHole.x - particle.x;
const dy = blackHole.y - particle.y;
const distanceSq = dx * dx + dy * dy;

const force = (gravity * mass) / distanceSq;
const distance = Math.sqrt(distanceSq);
const nx = dx / distance;
const ny = dy / distance;

// Pull inward + add a tangential component so matter spirals.
particle.vx += nx * force - ny * orbit;
particle.vy += ny * force + nx * orbit;

The force stays intentionally simple; most of the visual realism comes from how the disk is projected, lit and bent around the shadow.

How the Black Hole Effect Is Built

1. Shadow + ringThe center stays completely dark while a thin light ring marks the strongly lensed region around the shadow.

2. Accretion diskHot gas orbits in an inclined disk: whiter near the center and more orange/red farther out.

3. Lensing + motionThe back side of the disk reappears bent above and below the shadow while outer particles accelerate and spiral inward.

↗

Challenge

Try maximum mass with low gravity. Then reverse the radial force: the disk and lensing remain, but the outer particles begin to escape.

This experiment is part of Can JavaScript Do This?, our series of visual effects, games, and experiments built directly in the browser. Try the demo, change gravity, and watch how the system responds.

ADVERTISEMENT

ADVERTISEMENT