JUEGS EN HTML5

Cómo crear un agujero negro con JavaScript y Canvas

Una visualización interactiva inspirada en cómo reconocemos un agujero negro: sombra central, anillo de fotones, disco de acreción brillante y luz deformada alrededor. Mueve el cursor y cambia gravedad, masa y densidad para ver cómo responde la escena.

LIVE DEMO

Pruébalo

Mueve el cursor cerca del agujero negro
CANVAS + JAVASCRIPT
La idea en una línea

No intentamos resolver relatividad general en el navegador. Combinamos una fuerza inversa con señales visuales reales de un agujero negro —sombra, disco de acreción, lente gravitacional y brillo asimétrico— para que el resultado se vea y se sienta mucho más convincente.

La línea que cambia todo

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;

La fuerza sigue siendo deliberadamente simple; el realismo visual viene de cómo proyectamos, iluminamos y curvamos el disco alrededor de la sombra.

Qué está pasando

1. Sombra + anilloEl centro permanece completamente oscuro y un anillo fino de luz marca la zona donde la luz fuertemente curvada domina la imagen.
2. Disco de acreciónEl gas caliente orbita en un disco inclinado: más blanco cerca del centro y más naranja/rojo hacia afuera.
3. Lente + movimientoLa parte trasera del disco reaparece curvada arriba y abajo, mientras las partículas externas aceleran y espiralan hacia el centro.
Reto

Prueba masa máxima y gravedad baja. Después invierte la fuerza radial: conservarás el disco y la lente, pero las partículas exteriores comenzarán a escapar.

Este experimento forma parte de nuestra serie de cosas visuales hechas directamente en el navegador.
ADVERTISEMENT
ADVERTISEMENT

No hay comentarios:

Publicar un comentario

Buscar en el blog

Archivo del blog

Últimas en inglés