My Error 404: Making a Black Hole with the Canvas
- published:
- 2009.01.27
- topics:
- javascript
I felt like I should do something fun with the zachstronaut Error 404 page. Doing something witty with your error pages (specifically 404) is a fine, long running tradition on the internets. I was reading Wikipedia pages about celestial objects and sifting through the NASA site for inspiration when I got bored and decided to play some Super Mario Bros. It was after beating World 1-4 that I had that "eureka!" moment:
Yes, that's right: the lightbulb went on in my head, and I thought to myself, "My Error 404 page should be a black hole!" What does this have to do with Mario? Well, nothing.
Moving on — an animated black hole on my error 404 page sounded like a great idea to go along with the zachstronaut outer-space theme. I decided to programatically draw and animate the stars in the accretion disk around the black hole using JavaScript and a window-sized <canvas> tag. Have a look at the black hole in action, and be sure to View Source also. All of the code is there.
View Error 404 Black Hole Using JavaScript and the Canvas
I suppose some people would have opted for Flash here. I used JavaScript and the Canvas because I could, and because I love JavaScript as a language. I'm not the only one having a little fun with the Canvas these days. The homepage of Paul Armstrong's recently redesigned site uses the Canvas to animate his logo in the background. No Flash there, either.
To animate the black hole I cheated so the code would be much shorter and easier to write. I avoided doing any real math to orbit the stars in circular paths or to calculate realistic gravitational pull on the stars by the black hole. The illusion of the stars orbiting the black hole is actually handled quite simply by rotating the entire <canvas> tag with the rotate() method of the Canvas JavaScript API. As for gravity, all of the stars are simply moving towards the center of the black hole at a rate logarithmic to their distance from it. I do get the impression that rotating a very large Canvas is kind of slow (if your computer is more than 2-3 years old I apologize in advance). I wonder if just actually calculating the circular orbital paths of all the stars individually would end up being faster. I may have to revisit this with the goal of smoother animation... I've got some ideas that don't involve tracking 600 stars individually.
Browser support isn't consistent for the Canvas yet. It's no huge surprise that Internet Explorer fails to implement the Canvas, and I wasn't willing to use one of the JavaScript based hacks out there to sneak support in. Sorry Internet Explorer users (get a real browser).
Mozilla/Firefox doesn't yet support the CSS skew() transformation, and because of this the black hole animates in a bird's eye view in Firefox. I've actually skewed the <canvas> tag itself in WebKit to give the black hole some perspective. The animated preview of the black hole I included above in this post shows the rendering in Webkit. You can read more about WebKit CSS Transforms on the Surfin' Safari blog.