The slabtype algorithm, Part 1: Background

Algorithms, Flash, Graphic Design, Interactive Design, Typography,
1/23/08

Animator/designer Alessandro Ceglia pointed out to me a few months back that it’s possible that many users of Public Secrets don’t realize that the piece’s visual presentation is almost entirely algorithmic. Once you get beyond the title screen, all visual composition is handled dynamically, and you’ll never be able to take two identical screenshots of the piece. The designer’s statement for the project describes the two main algorithms used in the project: treemaps (an existing solution dating back to 1991) and an original text-layout algorithm which as of this article is dubbed “slabtype.”

Treemaps (which I fell in love with after seeing Martin Wattenberg’s Map of the Market while I was working at Razorfish) are covered extensively elsewhere (description, history, Wikipedia) and are used to generate the overall layout of boxes for each screen of the piece. In this four-part series of posts I’m going to present a graphical breakdown of the slabtype algorithm responsible for laying out the text and quotations which appear inside the boxes (source code will be provided in the final post).

As the design process for Public Secrets began to lead Sharon Daniel and I back towards her original idea of making the treemap algorithm a central metaphor of the piece, it became clear that we could really use some aesthetically pleasing way of dynamically placing arbitrary amounts of text inside a box. Early designs organized the statements of the incarcerated women as collections of titles, but ultimately these approaches were rejected as too index-like and lacking in emotional power.

A subsequent design hit upon what later became our “split” view, which runs text along an arbitrary rectilinear dividing line between halves of a binary. The dividing line was shown to organize the space on either side into rectangular blocks in which text was laid out along the borders of squares. The idea was intriguing, and I started writing some pseudocode to work out how to fit the text to the border: the program would make a “best guess” at the relative point sizes needed and then refine the guess iteratively. The algorithm was never finalized, however, as it was clear that the type was too hard to read in this configuration.

Further exploration led to a new tack in which the text associated with a particular box was chopped up and resized into a slab that approximated the shape of its enclosing rectangle. This method seemed to add an urgent quality to the quotes and supported an approach in which the quotes themselves were the primary visual experience of the piece—dovetailing nicely with Sharon’s original intent to foreground the voices of the women.

The above screen was assembled by hand in Illustrator and Photoshop, but after Sharon agreed that this approach held promise, I started working on the algorithm itself.

Next: The slabtype algorithm, Part 2: Initial calculations

 

Flash Platform Workshop cancelled; Q&A posted at Adobe

Events, Flash, Flex,
11/29/07

Unforeseen events have unfortunately forced the cancellation of the Flash Platform Workshop that was scheduled for Monday, December 3. Apologies for the inconvenience; if the workshop ends up being rescheduled I’ll post any information as soon as it’s available.

In other news, Adobe has recently posted a short Q&A between myself and Steve Anderson, associate editor of Vectors and director of the Ph.D. program in Media Arts and Practice at USC’s School of Cinematic Arts. Check it out when you get a chance!

 

Upcoming Events: ‘Designing for Convergence’ Panel and Flash Platform Workshop

Announcements, Events, Flash, Flex, Interactive Design,
11/16/07

Wanted to bring a few upcoming events to your attention. First up: on this coming Monday, November 19 at 10:00 am PST, I’ll be joining Dmitri Siegel, designer, writer and art director for Urban Outfitters, and Peter Lunenfeld, media theorist and professor at Art Center College of Design, as part of a panel on ‘Designing for Convergence,’ sponsored by Adobe and the new interdivisional program in Media Arts and Practice at the USC School of Cinematic Arts. This panel will be simulcast as an interactive online forum via Adobe Connect and you are welcome to join us! If you would like to attend, you will need to register first.

Two weeks later, on Monday, December 3 from 1:00 pm - 5:00 pm PST, I’ll be teaching a Flash Platform workshop focusing on programming in ActionScript 3.0 and MXML and at the basics of working in Adobe Flash and Flex (and how you decide when to use either one). This workshop will also be simulcast via Adobe Connect; I don’t have the registration link as yet but will post it when it becomes available. UPDATE: The Flash Platform workshop has been cancelled until further notice.

You can get more details about both events.

Also, I’d like to thank Scott Fisher for inviting me to speak at the USC Interactive Media Division’s weekly forum last night. ‘Seeking Eloquence in Interactive Space’ was the topic I tackled, and we ended up having some good discussion afterwards; got to chat with a few former students of mine as well. A pleasure.

 

Page 6 of 8 pages ‹ First  < 4 5 6 7 8 >