Design a site like this with
Get started

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

I’ve long been fascinated by non-Euclidean tessellations and symmetries , like this one based on an example in the book Indra’s Pearls. 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.

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.

October 5, 2020 update: The original post has been updated to fix or remove broken links. A more recent version of the doodler (based on the same codebase) is here and  on Codepen.


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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: