Riviera Blog

It appears that my previous entry on calendars received some attention, so I thought I’d make a nice looking version for the New Year.

The design is somewhat arbitrary but it’s still possible to alter the parameters at the top of the JS file to change it. In fact there are now many more possible variations than with the last post.

To the download page!

If you’re still reading this, here’s a few technical notes:

• I managed to somehow fit a year (and a few extra days) in the calendar by stretching horizontally on some values of x. Hence the irregular aspect of the overall shape. I’d have rather have found a proper rectangular curve, though.
• Forget compactness! This layout may be defeating the purpose of the previous post, but it’s more practical in the end (e.g. for writing things on the calendar).
• Now it works in Opera, Batik and Firefox. It seems that Safari definitely doesn’t support SVG masking.
• I found a few other curve definitions (from fractint), but none worked better. They are in the source, though, so easy to play with.

Happy New Year!

Update: SVG export now available

A new version of textorizer is available: textorizer1_2. Because it’s now a downloadable application (for linux, windows, and osx) it offers unprecedented functionality: a complete user interface for tweaking almost all possible parameters, the ability to use images on your disk, and of course it works offline.

This was made possible (and easy) thanks to Processing, as well as controlP5.

Feedback is welcome at max @ lapin – bleu . net

[tags]textorizer, graphics, processing[/tags]

Last night I came across the famous Vertigo poster by Saul Bass, which I really like. And it got into my head to figure out how the spiral was done. A couple of hours later I had something that wasn’t too far from it:

I’m posting the code here (I’ve used Processing). Maybe someone will find a great use for it! I’m not allowed to post the font, though. You’ll have to get it yourself at typographica.org.

If you’re just curious about how the spiral is drawn, it’s simply an ellipse that is rotated and shrunk at each step. The rotation and shrinking steps decrease asymptotically towards the central ellipse. I’d be quite interested to know how Bass did it.

[tags]graphics, processing, hitchcock, design, geometry, saul bass, vertigo[/tags]

I’ve been playing with Processing for a few weeks now, resulting in new version of the celtic hack. (Click the picture and watch in awe.)

Processing is nice because it’s Java under the hood, so it’s cross platform, object-oriented, it’s got a garbage collector and it’s not too hard to port C code. And on top of Java, Processing offers a very nice graphics API (I haven’t used much of it yet, but the basics are good and the documentation and examples show off nice extras). Especially nice is the fact that in order to write a hack, you can start very simply as you don’t have to be bothered with Java classes and imports:

void setup() {
  size(200, 200);  // window size
  background(0);   // background colour: black
  stroke(255);     // draw in white
}

void draw() {
  line(0, 10, width, height);
}

That’s all and it’s a very nice idea, especially for non-expert programmers (for whom Processing is especially designed), or for people like me who look at Java every 5 years and have to relearn how to start every time. The last nice feature is the IDE, which is simple but makes it very easy to develop apps. All this contributes to a very pleasant environment for writing small graphics hacks, running them and exporting them to standalone apps or applets.

However, where things become slightly more confusing is when you want to go beyond small hacks. In this case, celtic has somewhat complex data structures and functions, and it took a long while to understand what was going on when changing gears from a simple setup/draw job to writing complex classes for nodes, edges, graphs and splines and implementing a complex display loop. Here are a few traps I fell in:

- Processing redefines float and int. That simply kills any use of java.lang.Math: functions and even constants. Processing redefines the simplest ones but if you need a more complex one (like log) you’ll have to rewrite it.

- You can’t write one class per file, in good Java fashion. In fact you can, but none of the files (except the main) will be able to access the API, including float and int. So it’s useless.

- It’s a bit tricky how setup() and draw() work, sometimes. For instance, if you happen not to start setup() with size() then it’s called twice.

- You can’t call a function init(). You get an obscure error message if you do, and that’s the kind of thing that takes hours to debug and makes you yell WTF?! when you find out.

- Talk about obscure error messages, if you put all your classes in the main file but forget setup() and draw(), or leave them for later, then you’re told that you can’t do forward references in class definitions. Another few hours of finding out what’s going on followed by another WTF moment

Maybe I shouldn’t have started with a complexish hack, and it would have taken me less time to figure out the above reading more documentation, in particular a clear explanation of how the Processing code is transformed into Java. Most of the problems above would have been cleared up.

Anyway, now that I’ve found the main pitfalls, I’m really enjoying Processing. Java feels a little clunky, compared to more modern programming languages like Python or Ruby (who’s able to write System.out.println(“p=”+x+”, “+y+”.\n”) without messing up at least once?), but removing all those mallocs and free from old C code is still very enjoyable! So I’ll probably be writing or rewriting hacks with it (at least those where SVG fails), until canvas makes Processing redundant and all is to be rewritten again.

And I’ll definitely be playing with Mobile Processing.

[tags]Processing[/tags]

Another graphics hack which generates an abstract picture from another, inspired by Roger Excoffon’s work. See example below and more here. Play with it online on this site, or download the php code and run it on your machine.

[tags]svg, graphics, hack, escoffon[/tags]

I wasn’t allowed to talk about it before, but now I can: my “textorizer 2” has been used to generate the murals that decorate the newly opened Pier D at Dublin Airport. I was contacted by SOM a few months ago in order to contribute my idea and its implementation, after they noticed my textorized Joyce on flickr. Pier D was opened a week ago and I was flown there last week, before the official opening, to see it all shiny and new. So I would like to thank SOM for contacting me about textorizer, crediting me on their great designs and very generously funding my other endeavours. That’s how Free Software should be rewarded. (See also their Pier D Environmental Graphics page).

Top: Oscar Wilde design by SOM, and detail. Bottom: James Joyce design by me, and detail. Pier D has several other similar designs for various Irish writers, including Joyce (but it wasn’t conveniently located for a clear picture).

Update: only kidding. Bloody plagiarists

[tags]textorizer, svg[/tags]

A web version of textorizer 2 is now available. No more compiling C code (and no more people asking me to do it for them, hopefully). Just fill out the form, press the button and voilà. And now that most modern browsers support SVG (textorizer2 was successfuly tested on Firefox 2, Safari 3 and Opera 9), it should be even easier. Please add your best results to the textorized group on flickr!

[tags] textorizer, svg [/tags]

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).

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:

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:

or command navigations:

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.

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:

• x²+y²-z²=-1

The combined projections above yield the following formula:

• x’ = x / sqrt(x² + y²)
• y’ = y / sqrt(y² + y²)

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

• xⁿ+yⁿ-zⁿ=-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, xⁿ + yⁿ)
• y’ = y / nsqrt(n, yⁿ + yⁿ)

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.