Mastodon
symbol set ordered with z-order curve to increase spatial locality

When presenting an alphabet on a grid a problem occurs. Symbols that should be close to each other gets “drawn out” over a row. So in terms of 2-dimensional distances digits should be close for example. As such if the user finds one digit the eye-movent to find the next should be minimized.

A recursive Z-order curve visualized

Z-order curves have many applications in computer science. One application is in GPUs to store textures in order to improve cache locality. The algorithms that operate on textures work in 2d, just as our eyes do while scanning a surface[1].

Digits make the problem apparent

When looking at digits the problem becomes apparent here the distance between 2 and 7 is 5, the worst case for this scenario. In the image below the distance is 3 which is the worst case for that scenario. We get a natural grouping spatially of similar objects without manually having to do provide an order. This will come in handy when using dynamic data as an alphabet.

Inspiration and improvements

xkcd strip

My inspiration comes from a XKCD strip which uses a Hilbert Curve to preserve locality. See associated blog post.

More advanced space filling routines can be used[2]. However I went with Z mapping as it demonstrates the concept and has a very neat implementation.

                                                                            
function zmap_ind2p(i){                                                            
    var p={x:0,y:0}                                                                          
    var n=0                                                                          
    while(i!=0){                                                                             
        p.x=p.x|((i&1))<<n                                                                           
        p.y=p.y|((i&1))<<n                                                                           
        n=!n?1:n<<1                                                              
    }
    return p                                                                }

Every odd bit combined from the linear-index gives the x-coordinate and the rest the y-coordinate.

Hilbert curve

I hope this trick might inspire someone who wants to display sortable objects in 2d (and why not 3d).

Read more on the experiment that uses this

Like what you read?

I do this full time and on an open source basis, to keep it so please consider donating.

References

[1] Z-Order Curves at wikipedia
[2] Space Filling Curves at wikipedia

Spread the word

Leave a comment

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