Black Hole Visualization Application
Generation of a HTML application that renders a mathematically-accurate black hole. (I already feel the fascination the fans of Interstellar have right now.)
Prompt
Create a complete HTML application that renders a mathematically-accurate black hole. The visualization must be visually appealing and realistic, must include elements such as the black hole's event horizon, accretion disk, gravitational lensing effects and surrounding stars or space background. - The entire visualization must be contained within a single HTML file (inline CSS and JavaScript are allowed). - Use HTML5, CSS3, and JavaScript (or WebGL/Canvas if needed) to create the effect. - The black hole should have a distinct event horizon (dark center) and a brightly colored accretion disk. This is the light that gets accelerated around the black hole, causing a lot of friction and emitting a lot of X-rays, alongside high-intensity glow - Include subtle animations or interactive elements if possible to enhance the visualization, like sliders to control the mass and the spin. - The background should simulate outer space (e.g., starfield) and the visualization must account for the gravitational lensing - The simulations must be right according to the: Schwarzschild Radius, the gravitational lensing, the gravitational force, the photon sphere, the spin of the black hole, the electromagnetic field 1. Structure the HTML file with appropriate sections for the canvas or SVG element. 2. Use CSS for styling the background and black hole elements. 3. Implement JavaScript to render the black hole and animate features like the spinning accretion disk. 4. Optionally add interaction, such as mouse movement affecting perspective or zoom. 5. Ensure the entire solution is self-contained in one file, without external dependencies. Provide the full HTML content, including <!DOCTYPE html>, <html>, <head>, and <body> tags so that the user can save it as a single .html file and open it directly in a modern web browser to view the black hole visualization. - Prioritize performance and compatibility. - Visual realism is required. Artistic interpretations must be kept to a minimum. - Avoid external URLs, all code should be contained inline.
A system prompt was added to support web rendering
Answer guidance
- The generated code must render right - The black hole must be visually correct — not 100% correct, but definitely correct according to our knowledge of how black holes look like (i.e.: https://oseiskar.github.io/black-hole/) - The sliders must work, the results of the formulae must be correct (at least for the Schwarzschild Radius) - The Gravitational Lensing effect (https://en.wikipedia.org/wiki/Gravitational_lens) must be seen - The accretion disk must be present, and must have the correct warp effect (https://en.wikipedia.org/wiki/Accretion_disk) - Not required to be seen: the actual spinning of the black hole, the electromagnetic field
