Visualizing hyperbolic symmetries using WebGL (aka a hyperbolic doodler in your browser)

I’ve long been fascinated by non-Euclidean tessellations and symmetries. The most widely known examples of these are the circle limit images by M.C. Escher.  I’ve always wanted to create an interactive way of producing these images, and with the advent of WebGL I’ve made some preliminary steps to doing this in the browser.

To see what I’ve done, you need a WebGL-capable browser.  Hopefully it will work for you, but your platform may not be capable of supporting WebGL. (There are some more setup and troubleshooting tips at the Learning WebGL website.)

The current experiments are a hyperbolic doodler and a hyperbolic kaleidoscope.  In the scheme of things, they are just minor variations of one another.  In both cases, things happen when you drag the mouse across the disk (dragging slower is better, at least until you get the hang of what’s going on).  In the doodler, you get a trail of white dots which is reflected across hyperbolic lines to get an infinite symmetry going all the way to the border of the disk.  The occasional colored shape is thrown in for a splash of color.  In the kaleidoscope, you get the same trail of dots, and more frequent colored shapes, along with a movement effect.  The impression you get is of throwing confetti into a hyperbolic mirrored chamber.

These are preliminary experiments.  I hope to do a lot more to increase control and expressiveness (and to let you save your work), but the project is on a bit of hiatus as I do a paying gig.  So I’ve posted this in the interim.

3 thoughts on “Visualizing hyperbolic symmetries using WebGL (aka a hyperbolic doodler in your browser)”

Leave a Reply

Your email address will not be published. Required fields are marked *