I had this idea in my head for a while: all the graph visualisations you see on the web these days (social networks, topics, tags, etc.), reminded me of Tamara Munzer’s work from a few years back, on using hyperbolic geometry to display graphs so that you always see the whole graph, whatever part you’re looking at. Put it simply, hyperbolic projections give an impression that you’re looking at objects through a magnifying glass (see figure, left). And that’s what Escher was showing in his “Circle Limit” series (right).

Escher's Circle Limit 4

Somehow it crossed my mind to do an interactive version in SVG, so I wrote some code for it, and then forgot about it for lack of real uses. Then I read Designing for Small Screens, a book on UI design, which discusses how to display as much information as possible on phone or PDA screens. One particular method it shows is the magnifying glass effect:

magnifying effect

Using hyperbolic projections to produce this kind of lens effect is one way to show geometric information on a reduced space, but it has its drawbacks: the geometry of the objects is warped, which can be confusing. Also, not all the screen’s area is used, which somewhat defeats the purpose.

However there is a better solution. When I started to implement the hyperbolic projections, I came across old friends of mine from university: quadric surfaces, which led me to find a way to fix both problems. Section 2 explains the gory details. By modifying the projection formula, one can add a parameter that makes the magnifying glass effect more squarish and flatish, and thus makes the display a bit more friendly than by using the default projection.


Left: default projection, middle and right: flatter projection

This works particularly well with grid displays like calendars:

calendar display, exponent: 2
calendar display, exponent: 2

or command navigations:

menu display, exponent: 2
menu display, exponent: 2

SVG sources: grid, calendar, menu. ECMAScript code for the projection and the interactive panning.
The Gory Details

The two examples showed in the figures at the beginning actually use the Pointcaré disc model, which preserves angles but distorts lines into circular arcs (as shown on the figure 1). That distortion can be confusing for grid displays like calendars, although it might work for graphs. So instead I went for the Klein disc model, which preserves lines but not angles. The figure below show how it works in one dimension.

Klein projection

The observer is located at the origin (O) and looks up in the z direction. The original objects are located on plane s (i.e. the screen). First, each point (yellow circle) is projected onto a hyperbola (red line) and becomes the blue circle. Then the point is projected back onto s using a standard perspective projective. The effect is exactly as if the observer was looking at the objects laid out on the hyperboloid. This shows graphically how all the points of the hyperboloid are visible, as they are projected into a finite interval of s.

In 2 dimensions, s is now a plane (i.e. the screen) and the hyperbole becomes a hyperboloid of 2 sheets:


The hyperboloid’s algebraic equation is:

  • x2+y2-z2=-1

The combined projections above yield the following formula:

  • x’ = x / sqrt(x2 + y2)
  • y’ = y / sqrt(y2 + y2)

Now, in order to go “flatter and squarer”, the hyperboloid needs to go “super”:

  • xn+yn-zn=-1

where n is any even positive integer. The greater n is, the squarer/flatter the surface. The red hyperbole becomes all squashed on s, and in 2D, the surface is now a super hyperboloid and looks like:


A super hyperboloid is one particular type of superquadric, a superset of quadrics surfaces with nice properties. See Barr, A.H., Superquadrics and Angle-Preserving Transformations, IEEE CGA, No. 1, January 1981, pp. 11-23.

The projection formulas become:

  • x’ = x / nsqrt(n, xn + yn)
  • y’ = y / nsqrt(n, yn + yn)

and our objects now look like the images above showed.

Of course, all those exponentiations and roots take a while to compute, so the practicality of the whole thing remains to be demonstrated. The code could also support for more primitives and tree transforms (actually, the code did support transforms, but bugs in SVG renderers made me remove it), but that is left to the reader.

This entry was posted in General, in English, petits dessins. Bookmark the permalink.

One Response to Superhyperbolic!

  1. I fill the whole screen while bringing out the center by simply applying both a vertical cylinder and a horizontal cylinder. Here are a couple of pictures where the bike riders would not even be visible on a six hundred pixel wide photo, yet expanding the center of the frame using two cylinders instead of a fisheye makes the effect barely noticeable. I think it is closer to how our brain actually processes depth.

Leave a Reply

Your email address will not be published.