New Media Initiatives Blog

Most techies probably know that Leopard has been out for a while now. Aside from all the goodness that is Time Machine, the thing that has me most excited is the new version of Quartz Composer. Create Digital Motion did a great post about what’s new, and you should read their post for the exhaustive info.

Aside from many useful things (closed loops!), there are two things that stick out to me as exceedingly useful for creating dynamic digital signage:

• Data crunching: Quartz Composer can now load, and download XML files, which makes it much easier to move large chunks of data in and out of your composition.
• Multiple screens -- or multiple projectors: There is now support for running Quartz compositions across multiple screens, and also a cluster.

Being able to use XML data rather than just an RSS feed could be extremely useful for specifying things beyond text and images. Color values, timing, or any number of things could be included here in XML. The way we generate most of our pages here at the walker, our output is XML, so piping something like the Walker Calendar into a Quartz Composition just got much easier.

The second thing on that list is the really exciting part. As part of the Developer Tools, apple added a new application called Quartz Composer Visualizer, aka QCV. It does a couple of things. It lets you play a single quartz composition across multiple screens, which you could not do with Quartz Composer in Tiger. I’m not sure yet how this works across multiple video cards. It also adds a network mode, where a host and clients share the same composition and synchronize via the network. Here’s a movie I made of a modified version of our Vineland Lobby Kiosk Screensaver:

This is running on two different computers, my laptop and my desktop (with two displays). For the most part, the displays are in perfect sync. There is a little blip, but I think that’s probably because my Desktop is struggling to keep up, due to an older video card. There is also the option to run a second composition as an “optional processing composition”. What this means is that you can create another composition that has the logic for processing the data and settings, which gets passed along to the display compositions. Basically, this allows you to use a MVC way of doing things. Here’s a screenshot of the app in use:

Finding clients is done via bonjour, so it is limited to the local network, but all you have to do is fire it up on each machine and they find each other. Depending on how well separate video cards are supported, it could be quite easy to run a multiple screen setup from one high-end Mac Pro, since most of QC processing happens on the video card(s). Mac minis could also work as well, though due to the underwhelming onboard video, might not have enough horsepower to do any fancy core image effects.

QCV isn’t an industrial level application; you couldn’t ship this off to a client as a complete solution for a digital signage project. But for use in house, or a situation where it could be monitored more closely, it could be extremely useful. The complete source code to QCV is also included in the developer tools, and it’s meant as a template and example for people. An enterprising objective-c developer (which I am not) could create such an industrial level application. But as a template application, it is surprisingly useful. QC and QCV are the things in leopard that excite me the most.

Daniel Shiffman has just released Most Pixels Ever as an alpha library for use with processing.

What is MPE and how does it work? From mostpixelsever.com:

The Most Pixels Ever library is a software solution for taking a single-screen real-time graphics application (developed in Java) and spanning it across multiple screens (each connected to a separate computer). Its features include "time syncing" and "spatial syncing." Time syncing ensures that each frame is rendered simultaneously on each display and is achieved by network communication. Spatial syncing ensures that each client computer renders the appropriate portion of the larger display on its display.

I can’t wait to play with it and see what the possible applications are for signage. Performance looks to be quite good. Daniel posted a video of Run Lola Run on the IAC video wall:

Run Lola Run Lola Run Lola Run Lola Run from shiffman and Vimeo.

Daniel’s also teaching a class this fall, and the projects are being developed for the IAC wall. The syllabus looks interesting, including computer vision and phone interaction.

WebWalker is getting touchy feely all over in this edition with some computer interface goodness.

• This one might be a bit old, but it seems Panasonic demonstrated some sort of multi-touch table a last year, as well as a gigantic interactive video wall. I don’t really know how to describe the table. The video looks very nice in 720P glory, but the narration that goes with it is worth a chuckle and the interface is just a bit weird. Translucent fish?
• Another big multitouch screen, this time from DAHAN T&S (via nuigroup via engadget). This time we get dolphins instead of fish, but my questions still remain, why so many creatures of the sea on multitouch screens? There’s no video, so I can’t tell if their dolphin talks like ours.
• Speaking of sea creatures, did someone say calamari? The iPhone is certainly putting some pressure onto the demand for multitouch, we should remember multitouch is not actually that new. Case in point, Powerbook trackpads have been multitouch for years, giving users that lovely two-fingered scrolling. Apple even owns a multitouch patent. The iPhone is taking the idea and coupling it with a screen, which is really the important part. I’m rather curious to know how it works and what kind of tech they’re using to make it happen. None of us in NMI plan on getting an iPhone for various reasons, so who’s going to be the first person to take apart their iPhone?
• And while it is not multitouch, this is a neat project: The digital newsstand. It is basically a newspaper box with a computer screen replacing the window showing todays issue. It is not entirely practical, but I certainly appreciate consistency of the visual language and presentation. If you were going to show newspapers, you might as well do it in the right box. (via Paul)

Daniel Shiffman dropped a quick note about a new article in Metropolis Magazine covering IAC’s video wall:

To project a 120-foot-long high-definition video image requires not one but eighteen sequential projectors perfectly calibrated with computer software so that the point at which one projected image starts and the next takes over is barely discernible--a process called "edge blending." When Al Gore stands in front of a giant projected graphic of CO2 emissions in An Inconvenient Truth, edge-blended projectors are working behind the scenes. To choreograph, translate, edge-blend, and calibrate the imagery requires an entire room of computers. All in all, says Steve Zink of Warren Z Productions--which produced the software system and the spinning globe--it uses enough power to "run a small house or two." So much for LEED certification.

It is a quick but interesting overview of the wall, and some of the projects and content IAC is putting on it. It sounds like they also face a lot of the same issues we face with the Hennepin Signage: projectors aren’t cheap, easy to align, synchronize, or see in the daylight.

The IAC Building site has a video of the projection if you sit through all the flash nonsense and click video wall, or just grab the FLV directly.

Here’s a youtube video from what seems to be some sort of dance party:

If you didn’t know, this wall is in the Frank Gehry designed headquarters for InteraActiveCorp. Wired had this to say about the building and Gehry several months ago:

The new headquarters for Barry Diller’s InterActiveCorp stick up from the low-rise terrain of Manhattan’s West Chelsea neighborhood like Space Mountain at Disneyland. The 10-story asymmetrical protuberance has outer walls that veer every which way, a typical design for architect Frank Gehry. But the building’s showstopper is a facade that looks like sails billowed by the wind. Gehry, famous for his complex compositions in titanium and stainless steel, had never before designed a major building in glass, and he was shocked to learn how difficult it would be to soften and mold the material around the contours of the building. Each of the 2,541 pieces of glass would have to be heated to 1,148 degrees Fahrenheit, then cooled and shaped. It was physically possible, but the sheer size of the project made it seem inconceivable. “We didn’t think we could do it,” Gehry says. “We were going to abandon it.”

So it would seem technical hurdles and setbacks are nothing new for this building. The narrative is one that we’re familiar with too, but such is the price of being cutting edge.

If you’ve been to the Walker recently, you may have noticed that the Bazinet Garden Lobby has a bit more light in it these days. You may have also noticed that the Vineland kiosks have a new screensaver on them.

The screensaver on those kiosks is something that Eric had played with before. I also made a version of a screensaver that uses more of Walker Expanded, and posted about it a few months back. In depoloying it to the iMacs, though, I ran into some trouble. The machines we’re using have their graphics driven by a lowly GeForce FX 5200, the 64mb lame dog of the quartz extreme world. When I put the screensaver on them, it would create horrible drawing problems, similar to the artifacting you would see on a jpeg file at the highest compression, except worse.

This hung me up for a while, but at some point I decided to try again. Through a process of trial and error, I figured out the magic bit that was missing was the Clear object:

Paints the entire rendering destination with a constant color and clears the depth buffer. This is usually the first rendering operation a composition should perform, in order to reset the rendering destination to a known state and prevent visual artifacts. If the rendering destination is intended to be composited over some other visual content, make sure the alpha component of the color used to paint is smaller than 1.0.

Dropping a clear object in there did the trick and the saver was now running quite well. Sometimes it is the simple, obvious things that are missed the most easily. Here is a rendered preview of the kiosk screensaver.

The trick to getting the background pattern bars to swoop in the way that they do is to use two different interpolation objects, one for X position, and one for Y rotation, feeding into a sprite. Both objects should be set to the same duration. The X position simply moves the sprite from left to right (-4 to 4), and the Y-rotation (-30 to 30) changes the tilt as it moves right to left. Since they’re both running at the same duration, the animation appears very smooth. Put this all in a macro patch, copy and paste a bunch, changing the duration, pattern and color, and you have our flying identity patterns.

I would love to give away this screensaver so those of you on Mac’s could enjoy it, but it depends the fonts Walker Expanded and Avenir. It is possible that I could convert the identity patterns to images and change the typeface to Arial or Helvetica and get pretty close. Would anyone be interested?

Here’s a larger image of the Kiosks in the Bazinet Garden Lobby, with the new Vineland entrance being prepared in the background:

Wrapping up my three-day digital signage extravaganza are two videos from the MCA Chicago. Their signage is located behind the lobby desk, just inside and to the right of the main entrance.

The four signs are not synchronized or spanned, but the timings are such that it can appear that there are things that line up. Having the signs behind glass and built into the wall gives them a more polished, integrated look. The glare in person is not as bad as it appears in the video.

Also, I have to say, the Stingel show at the MCA is fun. I am a big fan of work that lets visitors touch, interact and leave their mark. The silver walls were quite marked up after only a week, I can only imagine what they’ll be like in a month or two.

In addition to recently visiting MAM, I was also to the Art Institute of Chicago over the previous weekend. Here is a little videographic evidence of that visit.

Signage at the Art Institute of Chicago on Vimeo

This signage isn’t all that exciting. Based on what I saw, the loop is pretty short and it only advertises their audio tours. I really like how the mouse pointer is stuck on the screen in the upper left. At least we know it is running from a mac (the cursor is black). The display is located in an area just to the left of the main entrance of the building, in the coat check and tickets counter room.

As a native of Milwaukee, I visited home over the christmas holiday break. While there, I had the opportunity to stop into the Milwaukee Art Museum, which I always enjoy. In the lobby of the museum, I noted some digital signage which was not there when I last visited over a year ago. Here is a short documentation video:

MAM Signage on Vimeo

They have essentially divided the screen into three sections. The largest displays posters for current exhibits along with a welcome message. The two side areas cycle through images of work in the museum and info about things visitors to the museum might want to know: events for that day, where the bathrooms are, schedule for the Brise Soleil opening, etc. It doesn’t seem particularly groundbreaking, but it is likely quite easy to update, only requiring static images to be changed periodically. It does catch your eye as you come into the museum, since it is directly in front of the main entrance from the parking structure or the street. The shot at left shows slightly more context. The lobby desk is a few yards behind me as I’m taking this picture.

If you’re not familiar, several years ago they added a new addition, designed by Santiago Calatrava, his first building in the US. It has been a huge success for the museum and the city of Milwaukee.

As has been mentioned here in the past, I have been tinkering with quartz composer for use as dynamic, digital signage. It is a good fit: extremely fast, can talk to the internet, usable on a lot of different systems. There are a growing number of locations within the museum where we’d like to apply dynamic signage, but off the shelf systems to do it are often convoluted and proprietary, not to mention expensive. Currently in the Walker Cinema, we use a DVD that I render in After Effects and update periodically. This affords a lot of control, but also takes a fair amount of labor to update.

It is this kind of an application where Quartz Composer can work well. Any quartz composer movie can be saved as a quicktime movie, but there are some limitations:

• no mouse and keyboard events
• no contents download from Internet (RSS feeds, images…)
• edition of the input parameters of the compositions

Notice that second one? That’s the doozy if you want your quartz comp quicktime movie to use an RSS feed to get the text.

There is a simple workaround, though, and that is to simply download the RSS feed to the local machine before you open the movie in quickitime. You simply build the composition (before saving it as a movie) to look for that file on the local drive. Here’s a quick command to grab our RSS feed and save it:

/usr/bin/curl http://calendar.walkerart.org/news/today.wac > /tmp/today.html

And then your path for the RSS feed inside quartz is:

file://localhost/tmp/today.html

Problem one solved. This lets us manually open up the quicktime movie and export it to any format quicktime can export to. Once you have it in that format, you can transform it, play it or transfer it with much more ease.

I’ll post about how to automate the whole process in the future, and the problems that occur when you try to deal with HD resolution screens. In the meantime, here is a short demo of what I have been able to achieve with quartz composer and our identity system (a work in progress).

In the process of looking for digital signage software this afternoon, I ran across this great hack using a keynote developed by Kendrick Erickson and Eric Perrino at the University of Minnesota. Essentially, they pulled info from the school’s database and used XSL to translate it and insert it into Keynote’s XML-based file format. They also used a mac mini to do the displaying, since, of course, Keynote runs only on the mac. Even geekier, Kendrick and Eric managed to turn the display on and off from the mini via serial and (presumably) a cron job.

I have often wondered why I haven’t seen more signage developed using OS X, since it’s superior display capabilities make it extremely well suited for this type of application. As Kendrick and Eric note:

Other benefits such as OS X’s BSD foundation made it easier to update slide content from Crimson and develop supporting software. We’ll also be able to expand the capabilities of the display framework later on by developing custom software using the Quartz 2D engine or OpenGL directly.

It is something we’re looking into.

While i was digging through old video for my last post i found these. I usually pay attention to the signage in museum lobbies and entrances, especially when it involves some sort of media presentation. I was pretty excited to see what the Mori Art Museum would do with their lobby. As you can see from this video it is straight forward and dull at the desk. I was expecting something a more experimental and fun like the MoMA did with their desk. They did have a large back projected screen in the corner of their lobby that was integrated into the architecture, it was just showing a still slide show and when I tried to take video of it their very attentive gaurd shooed me away (but you can still see it a little).

Front Desk of Mori Art Center

Mori video signage and gaurd

Omotesando Hills, an upscale shopping mall in the Aoyama district of Tokyo has an integrated media component called Notion Organization Project. I’ve been meaning to write something about it since my visit to Tokyo earlier this year unfortunately I could not find many articles written in English so I’m relying heavily on my poor Japanese skills and translation programs.The project consists of LED screens on the outside facing Omotesando Street. The LED wall is low resolution but large scale so close up it image seems like a rather disconcerting jumble of flashing screens. From across the street or down the block however the illuminated wall is quite striking. Legs in sillouette are the most interesting video, the display alternates between that and an abstract color wash. At first I thought the pedestrians walking by on the side walk were creating the visuals above. That proved to be an illusion but brought to mind the Podium Lights or Memory Wall projects which would be very interesting to see in a busy space like this.

Video taken from a pedestrian bridge over Omotesando Street.

This is a close up view of the LED wall, you can see it is quite low resolution but very large.

Inside the project continues as a projection of light and image from the ceiling. There are directional speakers playing layers of music and natural sound effects, which i suppose is soothing and condusive to shopping. Both the projection and directional speakers are on motors which allow them to trace a path up and down the malls long stairs creating an effect of water cascading down. The imagery on the interior projections is close up video of the famous trees lining Omotesando Street and nearby rivers. Theatrical lights provide color which changes to reflect the current season. Unfortunately they wouldn’t let me take any video of the inside but there are some photos of it on their site. The effect indoors is less spectacular than the outside but it is mesmerizing if your walking down the long stairs.
(more…)

I finally got a chance to see the MoMA’s dynamic signage in person this weekend. The display system is a horizontal array of 9 high resolution LCD monitors. The MoMA hired the motion graphics and design mega-studio Imaginary Forces to do the design and execute the signage project. Imaginary Forces has a description of the process on their site as well as some images of the installation.

The approach to this project was a bit different than the one we used for our projected signage. The 9 screens at the MoMA act as independent displays to some extent. They play similar content in synch but video/image/text from one display does not cross over onto the other.

I think some of the video (admittedly shakey) I took in the lobby explain the difference. You can see the screens play either an image, striped video or an announcement at first, then all the screens transition to play a welcome message at approximately the same time. You can see the word welcome never spans the two screens, instead it remains on it’s own screen independantly. It’s an interesting solution that chooses to reinforce the gaps and multiple discreet displays in a purposeful way. In this way they’ve cleverly sidestepped the synching issues that can plague multi-display software and addressed the potenial distraction caused by the gaps around the montiors.

Also interesting on the sign is the generation of animated stripes. On this video you see an image starting on the screen then the center 4 pixels expand to create the colorful stripes. So the stripes are images being vertically stretched.

Our current installation of the projected signage on Hennepin Avenue has been up and running since the opening but again we didn’t have any sort of complete documentation for it online. Brian Dehler and Eleanor Savage of the Walker’s Events & Media Production department had put this video together that shows the projected signage in different circumstances. In twilight when the letters are ghostly but mostly legible, the small letters seen on the interior, and at night when the Walker’s lights are off and the projection displays most vividly.

Small Quicktime:Hennepin Signage(6MB)
Large Quicktime:Hennepin Signage(~30MB)

One of the side benefits of making Quatz Composer files is that you can use them as screen savers in Tiger (OS X 10.4) just by putting them in the right folder. The folder path should be:
Macintosh HD > Library > Screen Savers
or
Macintosh HD > Users > “Your User Name” > Library > Screen Savers

I put a few of my first tests online. They are rough but kind of fun and they all run off our RSS feed. Feel free to use them as screen savers or open up the source either way let me know what you think.
Spread Across the Screen
Spin in a Circle and Rotate
Pink Text on Blue