Recollections of “Recollections”

Animation, Exemplary Work

A still from Recollections

There’s a wonderful reverberation in there. It’s the concrete floors that propagate it--reminding you that you’ve been welcomed inside an experiment, a work in progress.  Even though I enjoyed the Reuben, it was carpeted, and thus robbed of that reverberation, that sound that came to represent a massive space filled with physically principled play.  I assume the reverberation is still there, but I haven’t been to the Exploratorium in probably 20 years, so maybe one of you can leave a comment and reassure me that it hasn’t changed.

My favorite memory there is of an installation called Recollections, by Ed Tannenbaum, which I must have seen in the early 1980s.  Standing in front of a large video projection, your silhouette is captured, colored, and added to the image being projected, in real time.  The result is that your movements leave cycling washes of color, creating a hypnotic feedback loop between your actions and the screen’s reactions. (Ed periodically updates the piece to keep up with the technology curve.)

I remember being aware of the pixelation of the display, which makes sense, seeing as its resolution was only 256 x 240.  I remember an indistinct realization that the colors were passing through the pixels—that the silhouettes weren’t actually self-contained objects, but data passing through a static grid.  I remember the palette shifts that would change the whole tone of the experience, and waiting for my favorite ones to reappear. I think I was vaguely aware that the piece was running on an Apple II—the technology felt within reach.  Mainly though, I remember just being really happy, and not wanting to leave. Yeah. Stuff like that would be good to make.

Thanks, Ed, that was awesome.


I got to play a Theremin!

Fun, Music, Wii

Leon Theremin playing a Theremin

Some pure geeky fun today. A few weeks ago I was at the Reuben H. Fleet Science Center in San Diego, and was psyched to find a Theremin included in their new audio-related exhibition (which is quite good).  I’d never seen one in person, much less played one, so I immediately ran over and launched into my best rendition of Bernard Herrmann’s theme from The Day the Earth Stood Still. I’m sure I embarrassed myself mightily, but who cares! I got to play a Theremin!

The Theremin I saw was the classic “piece of furniture with antennae” form factor you see in the image of Leon Theremin himself to the right, not the sleek Moog version you can see below in a performance of the Zelda theme.

This may qualify as a geek singularity: using the Wii remote to simulate a Theremin playing the theme from Star Trek. Enjoy…


“We get to decide” what is next-gen

Games, Interactive Design, Wii

Don Daglow

This is so right on, I couldn’t pass it up. In a speech at the GCDC in Germany this afternoon (covered in this article at, Stormfront Sudios President and CEO Don Daglow made some excellent points that deserve to be repeated far and wide.

“If it changes the player’s view of what interactive entertainment is; if you think differently about it; if you have a new perspective after playing the game that you didn’t have before, to me that’s next-gen,” Daglow said in a refutation of conventional wisdom that you can’t create a next-gen experience without dramatic increases in processing power. I couldn’t agree more.

The most significant innovations waiting in the wings for interactive art and entertainment are absolutely not about processing power, better algorithms, or any form of rocket science, though they may be enabled by technological innovation (as with the Wii remote). They are simply smart design, inspired thinking, artistry, and most importantly, perspective—an actual point of view on the world that arises from one’s personal experience.

Another Daglow quote: “We’ve spent a quarter of a century saying ‘the machine is holding me back’… The only problem is that now the machines are so powerful, we’ve lost our excuse.” This became really clear to me in the waning years of the last console generation (PS2, Xbox, GameCube), when I started to get bored with gaming in general. Everything was a retread; new versions of old games with upgraded graphics. I was shocked out of my complacency, however, when the Wii controller was first announced (evidenced by the fact that as soon as I heard the announcement I immediately estimated the dimensions of the remote and built a Duplo version the same size to start imagining what was possible...)

Daglow defends the Wii as a next-gen platform from the skeptics who doubt that it’s lesser-powered processor qualifies it as such with a blunt truth that should be remembered and repeated:

“Nobody gets to tell us what we think is next-gen - we get to decide for ourselves.”

Amen to that.


Cardinal splines in ActionScript (Updated)

Algorithms, Flex, Source Code

Here’s the code driving the cardinal spline function I mentioned in the post last week on visual prototyping with Flex. ActionScript already has a bezier drawing method called “curveTo,” but it obliges you to specify a control point for every anchor point you add to the curve. This is great for precision, but sometimes you just want to run a smooth curve through a bunch of points without having to figure out where all the control points should be.

That’s what’s great about the cardinal spline—the next and previous points on the curve function as the control points.  (This means you need to add an extra point to the beginning and end of the curve, as you can see in the diagram accompanying the Wikipedia entry for c-splines.) You also get a “tension” parameter which allows you to set how taut the curve is between points.

I’ve included my current incarnation of this routine below.  Here’s how to use it:

  1. Start with an array of values you want to run the curve through: 3, 7, 2, 6
  2. Duplicate the start and end values: 3, 3, 7, 2, 6, 6
  3. Iterate through each pair of the original values, each of which represents a segment of the curve: 3-7, 7-2, 2-6
  4. For each of these iterations, proceed along the curve n number of steps (more steps = a smoother curve)
  5. Call this function at each step to get the value of the curve at that step

If you’re using the function to set the location of a sprite, then you’ll need to maintain two lists of values (one for x position, one for y position) and call the function once for each list as you’re iterating through each segment of the curve.

Update: Here’s an .fla example that uses the function to draw a curved line through twenty random points.

Here’s the source for the function itself:

 * Returns a value at the given step on the cardinal spline between two other values. 
 * @param prevVal  The point just prior the curve segment we are evaluating. 
 * @param startVal     The starting point of the curve segment we are evaluating. 
 * @param endVal       The ending point of the curve segment we are evaluating. 
 * @param nextVal  The point just after the curve segment we are evaluating. 
 * @param numSteps     Number of steps in the curve segment. 
 * @param curStep  The current step in the curve segment. 
 * @param easing       Type of interpolation to be applied to the curve segment. 
 * @param tension  How taut the curve is (0 = straight, 1 = curvy) 
function getCardinalSplinePoint(prevVal:Number, startVal:Number, endVal:Number, nextVal:Number, numSteps:Number, curStep:Number, easing:String, tension:Number):Number {

    var t1:Number; 
    var t2:Number;
    switch (easing) {
        case “easeinout”: 
        t1 = endVal - prevVal; 
        t2 = nextVal - startVal; 
        case “noease”: 
        t1 = 0; 
        t2 = 0; 
        case “easein”: 
        t1 = 0; 
        t2 = nextVal - startVal; 
        case “easeout”: 
        t1 = endVal - prevVal; 
        t2 = 0; 
    t1 *= tension; 
    t2 *= tension;
    var s:Number = curStep / numSteps; 
    var h1:Number = (2 * Math.pow(s,3)) - (3 * Math.pow(s,2)) + 1; 
    var h2:Number = -(2 * Math.pow(s,3)) + (3 * Math.pow(s,2)); 
    var h3:Number = Math.pow(s,3) - (2 * Math.pow(s,2)) + s; 
    var h4:Number = Math.pow(s,3) - Math.pow(s,2);
    var value:Number = (h1 * startVal) + (h2 * endVal) + (h3 * t1) + (h4 * t2);
    return value; 


Flex for visual prototyping

Digital Humanities, Experiments, Flash, Flex, Interactive Design

This is one reason why I’m really digging Flex right now. I’m in the design phase with Sharon Daniel on a follow-up project to Public Secrets and we’re talking about dynamically generating a large number of curved forms as part of the design. All well and good, but how do I mock up the curves without drawing a million squiggly lines by hand? Easy—build a little Flex app that lets me set the parameters of the curve and generate as many as I want, then take screenshots and bring them into Photoshop. This is my first app using this many controls, and it only took a couple hours to put together. There’s a lot of ways in which Flex makes building this kind of thing feel as easy as it really should.

The curve is drawn using a cardinal spline algorithm (Update: c-spline source code) I first ported to Lingo back when I was working on Chroma, and then to ActionScript a couple years ago for Mobile Figures. I like it because it’ll run a smooth curve through any number of values without you needing to specify separate control points.

Check out the app: Curve Designer

Curve Designer application


Page 1 of 2 pages  1 2 >