For the First Thursday Art Walk, I created some projector art for the Everett Station Lofts:

(Here’s the .swf version.) There was a lot of nice feedback. Random people would spot it and exclaim, “That’s awesome!”

A secret view from inside the lab!

Things I learned from this experience:

Keep it obvious. The tiny bright spot in the corner of the video is an LED sign displaying a phone number. Anyone who called was treated to this soundscape:

Guess how many people called? … Zero! By my estimation, the typical art-walker gazed at the Math+Heart graphics for a few seconds, hardly enough time to notice the tiny phone number.

A different approach would be a phone-centric interactive, such as Mall of America: A Toll Free Audio Exhibition. Their phone number is displayed in massive yellow lettering! The back-end could be developed with Twilio, or a similar group that provides interactive phone service.

Don’t expect 60 FPS from Flash’s display list. Ultimately, I did achieve 60 FPS on one of my computers (with the occasional dropped frame, alas) but I invested an unhappy amount of time, fiddling & optimizing, to reach that point. (Flash’s OpenGL graphics, a.k.a. Stage3D, are more performant. But I didn’t attempt this, for fear of texture memory issues.)

Motion design tips. The mathematical glyphs are essentially large particles, which enter at random speeds. This “swarm” felt best when the random speeds ranged between 50% and 100% of some maximum value. Any ranges wider than 50% broke the cohesive effect, and felt sloppy.

I experimented with randomizing the easing equations, for instance the rotation could twist at either an exponential or quartic rate. This was surprisingly frustrating to watch. The glyphs behave almost like a unified fluid, so it hurts when they move according to different rules.

Also bad: Using different tween times & delays for the four properties: X, Y, scale, and rotation. I tried using tweens to look like a phantom hand was hurriedly slapping the glyphs down on the canvas. This felt weaker than the smooth, unified motion that was used in the final version.

To achieve movement that was both organic and emotive, I could have tried filming myself acting out the motion with slips of paper, then traced that motion. (Or developed rules to mimic that motion. It could work! Maybe!)

Simple variations can be very effective. The space packing algorithm has two modes. It switches between packing space that’s visible on the screen, and packing a larger space including a region below the bottom edge. When it switches to the second mode, it suddenly has a tall, uncluttered space to fill. The result is a texture that constantly varies between tight square-shaped glyphs, and taller ones. The contrasting modes look good!

3 thoughts on “Math+Heart

  1. Utterly hypnotic. The Matrox Reloaded! I wonder how performant this would be if it were done using 3D CSS transition effects on a puzzleboard of divs, running in a web browser?

    The effect really is striking, and just screams for a whole picnic basket of variations … color shifts, mazes in the negative space, sudden highlighting of pre-arranged words … a slow zoom-out effect instead of a scroll-down effect, done by rendering the central block of characters to a canvas and zooming it en-masse … creatures digging through the lettering and pooping out punctuation, like some deranged nethack dungeon …

  2. Come to think of it, you could even do a cheap kind of intra-character filling, by rendering the characters to offscreen canvases with an extremely small font size, then testing individual pixels for blank space. A variation of a mipmapping algorithm.

  3. All excellent ideas. My experience with CSS 2D/3D has been pretty good (re: the carousel). But I wouldn’t expect high performance if the individual particles were kept separate throughout their lifetime on the screen; you’d probably want to bake them onto a scrolling canvas after they land, much like the Flash version. But then again, maybe a browser could render large vector symbols faster than juggling a large canvas object.

Leave a Reply

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