The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Black Hole.js

    Renders black hole gravitational lensing effects in an image canvas using WebGL, glfx.js, and numeric.js
    Filed under  › 

    • 🔾12%Overall
    • 371
    • 196.1 days
    • 🕩16
    • 👥2


    Demo and explanatory blog post.


    In the time-honored tradition of taking yet another noun and making .js file out of it, I proudly present black-hole.js, which uses a numerical ordinary differential equation solver from numeric.js, and some nice WebGL utilities from glfx.js, to render the gravitational lensing of a black hole.

    Note: due to HTML5's security restrictions, you must either render images from your own domain or from a server where CORS is ok.


    <div id="canvas_placeholder"></div>
    <script src=""></script>
    <script src=""></script>
    <script src="./black-hole.min.js"></script>
      var corsOkImageUrl = '';
      BlackHole.blackHoleifyImage('canvas_placeholder', corsOkImageUrl)

    You can also specify some parameters to change the gravitational lensing effect:

      BlackHole.blackHoleifyImage(placeholderId, corsOkImageUrl, {
        distanceFromBlackHole: 70, // 80 is default
        polynomialDegree: 3, // 2 is default
        numAngleTableEntries: 2000, // 1000 is default. More might improve quality but impact performance
        fovAngleInDegrees: 60, // 73 is default. Yeah, it's an unusual choice, but it just looked cool, ok?
    Show All