Visible Area: things visible - things imaginable

I have been reviving SoundField using Processing. I am still pleased with the simple and intuitive audio interface, but what bugs me is the design of the stereo controls.

Especially with multiple overlapping sound areas, the stereo circles create "circle noise" - it becomes difficult so see which circle belongs to which sound.

Time for a little research for alternative designs.

The following diagrams show the sound area move control in red, and the stereo sound control in blue.
At the left side the left and right channels are in balance; at the right the audio is panned halfway the right.

The current stereo control:

Possible alternatives...

The stereo sound as a masked background:

As a curved line segment, with a smaller circle as control:

The curved line segment as draggable control:

A small draggable line inside (below) the move control:

I like the clean look of the last design best. But because of the small size the affordance needs some work.

Some months ago HEMA launched a highly viral animation.

A great idea - and beautifully executed by the FlashFabriek at Satama - that has attracted a lot of people to the redesigned site of the HEMA. For non-Dutch readers: this is the department store where 90% of the Dutch population shops. I was member of the small team at Lost Boys that created the redesign of the online HEMA shop that went live summer 2007. As the shop feels (partly) mine, I wished I had created that viral as well!

This animation comes with a tradition.

Firstly it brings to mind the 2003 Honda Cog commercial for the Honda Accord.

(for better quality see the high res QuickTime movie)

This kind of cause and effect is called a Rube Goldberg machine, named after the famous American cartoonist that created complex devices that perform simple tasks in indirect, convoluted ways (Wikipedia entry).

Of course the goal of these contraptions is the ingenuity of the chains. It is a world in itself where ordinary things and sudden relationships between things become carrier of creative findings. A loftier goal than the - somewhat related - Domino Day championships.

Since 2002 the Japanse television show PythagoraSwitch for young children shows short Rube Goldberg type videos to show world phenomena.

But the creative team of Wieden and Kennedy UK must have been inspired by much earlier work. The setting of the commercial, a museum floor and walls, gives away the reference to art.

In 1987 the Swiss artist duo Peter Fischli and David Weiss created the video Der Lauf der Dinge (The Way Things Go). It is a 30 minutes video showing a long chain reaction, but without any clear purpose - the film just ends. It has a definite roughness, as the setting is not a museum but an old industrial hall, and fire, steam and fluids play a prominent role.

From the Wikipedia entry:

The film evolved out of work the artists did on their earlier photography series, "Quiet afternoon," (German: Stiller Nachmittag) of 1984-1985. As the delicately unstable assemblages they constructed for the photos were apt to almost immediately collapse, they decided that they wanted to make use of this energy.

Looking at the fragment, the aesthetics of the Honda commercial are far away. One only has to view the start with the rotating garbage bag. This is a commercial, and these are other times. The commercial has been inspired by, not based on the art movie. Still, according to Wikipedia, Wieden and Kennedy eventually admitted to copying a sequence of weighted tires rolling uphill. Was that meant to be another hint to their inspirers?

"The Way Things Go" is available from Amazon.

I would like to point you to the new site for Inn Amsterdam: http://www.inn-site.com/

Inn is an international agency for Dutch photographers Marcel Christ and Morad Bouchakour (who has also created the new photography style for HEMA).

Design: Esther Noyons. ActionScript: me. Created with ASAP Framework. CMS created with TWiki.

The interface I created with Dessislava Karoushkova (concepting) for the Open Ateliers of the Rijksakademie Amsterdam where we did our final year (2000). Created with Macromedia Director.

Some notes on the design:

• Every artist (participant) had one virtual room to show his or her work. They could choose which sides (of 6 ) to use.
• The images of the work made up the walls.
• Video works were possible. To show videos in 3d I created 10 second animated GIFs from the movies to show on the walls. On clicking the zoomed image would change into a QuickTime movie. The QT movies was often smaller than the animated GIF! (ahem)
• The entrance to each studio was through a name cloud. The cloud had 4 appearances: dense cloud, dispersed cloud, alphabetical vertical list and scrolling horizontal list. A mouse rollover on a name would evoke a piano sound. I created more liveliness by randomly changing the loudness of each note.
• I built a CMS to manage participant names, images and locations of the images in the virtual room, all in Director as well.

I have been working hard at my ActionQueue for the ASAP Framework. Ironically, because I had written an implementation in Java for Processing during my last holidays, I just found a new way to solve my problem in ActionScript!

Read my ASAP post ActionQueue refactoring for ActionScript 3.

Problem:

1. I want to show a large Flash movie in a small window
2. The movie should not be scaled larger than 100%

Solution: use a liquid layout and constrain the scale from small to 100%, not larger.

Problem 2: Flash publish settings are not much help to you. Sure, you can set width and height to 100%, and set Scale to "No scale". But that will move the movie past the top left corner when you drag the window small.

The actual solution is to manage scaling in ActionScript. It took me a while to work it out properly, so I want to share it with you - it may save you considerable time.

View the demo movie - resize the window to view the effect

Of course you can make the scaling rules more sophisticated - see for example Almodovar's Volver movie site.

The code:

// set movie size constants
var MOVIE_MAX_WIDTH:Number = 550;
var MOVIE_MAX_HEIGHT:Number = 400;
// in this example we use an offset on all sides
var MOVIE_PADDING_V:Number = 2;
var MOVIE_PADDING_H:Number = 2;


// invoke "onResize"
Stage.scaleMode = "noScale";

var stageResizeListener:Object = new Object();
stageResizeListener.onResize = resizeStage;
Stage.addListener(stageResizeListener);
// invoke to init sizes
resizeStage();


function resizeStage() : Void {
	var maxWidth:Number = MOVIE_MAX_WIDTH - MOVIE_PADDING_H * 2;
	var maxHeight:Number = MOVIE_MAX_HEIGHT - MOVIE_PADDING_V * 2;

	var settingsAspectRatio:Number = maxWidth / maxHeight;
	var height:Number = Stage.height - MOVIE_PADDING_V * 2;
	var width:Number = Stage.width - MOVIE_PADDING_H * 2;

	var stageAspectRatio:Number = width / height;

	var resizeFactor:Number = 1;
	var scaleFactor:Number = 1;
	if (stageAspectRatio <= settingsAspectRatio) {
		// higher than wide
		// calculate the new height given settingsAspectRatio
		var h:Number = width / settingsAspectRatio;
		// as percentage:
		resizeFactor = 1.0 / maxHeight * h;
		scaleFactor = 1.0 / Stage.height * height;
	} else if (stageAspectRatio > settingsAspectRatio) {
		// wider than high
		// calculate the new width given settingsAspectRatio
		var w:Number = height * settingsAspectRatio;
		// as percentage:
		resizeFactor = 1.0 / maxWidth * w;
		scaleFactor = 1.0 / Stage.width * width;
	}
	if (scaleFactor > 1 ) scaleFactor = 1;
	if (resizeFactor > 1 ) resizeFactor = 1;
	_level0._xscale = _level0._yscale = 100 * scaleFactor * resizeFactor;

	var x:Number = (maxWidth - width) / 2;
	if (width > (resizeFactor * maxWidth)) {
		x += (width - resizeFactor * maxWidth) / 2;
	}
	x += MOVIE_PADDING_H;
	_level0._x = x;
	
	var y:Number = (maxHeight - height) / 2;
	if (height > (resizeFactor * maxHeight)) {
		y += (height - resizeFactor * maxHeight) / 2;
	}
	y += MOVIE_PADDING_V;
	_level0._y = y;
}

And these publish settings go with it:

Download the demo plus source code

My first Processing and ChucK demo had a major pain - you needed to start and stop ChucK from the command line. No longer!

In this new demo Processing sends out messages to monitor.ck. When this program no longer receives any updates it shuts down ChucK. So starting and stopping ChucK is now done by Processing.

The demo sends mouse coordinates (x and y) to a ChucK application, helloworld.ck, to change freqency and harmonics of a 'Blit' (STK band-limited impulse train).

This is how the demo looks like (listen with headphones):

Downloads

(updated 15 September 2007)

• Demo application (Mac, Windows, Linux)
• The Readme text with installation instructions
• Source code for Processing and ChucK

A couple of weeks ago my colleague Barth mentioned Processing to me. I knew the works of John Maeda and Ben Fry from a number of years back, but I found it too small, too closed at that time. Now I was surprised by the growth of the platform and the community. I decided to give Processing a try during my holidays. More about that work later...

Linked on the Processing site I found ChucK, a new audio programming language. I see a lot of possibilities to create audio by visual means.

I have created a demo application to let Processing and Chuck talk to each other through OSC. The demo loads 4 audio files. Volume and panning values are controlled by Processing and sent to ChucK. ChucK analyses the sound spectrum and sends back analysis data.

This is a non-interactive sketch, but interactivity would be trivial to add. PS: if this demo looks a bit similar to SoundField, this is no coincidence...

The demo needs ChucK to be installed, so it won't play on a web page. But this is how the demo will look like (listen with headphones):

Yes, I have updated the video as well. Watch the previous video demo on YouTube

Downloads

(updated 15 September 2007)

• Demo application (Mac, Windows, Linux)
  • You need Java to run the application, to be downloaded from http://www.java.com/getjava/
• The Readme text with installation instructions
• Source code for Processing and ChucK

This week I went to see Wolfsbergen, written and directed by Nanouk Leopold. A beautiful film rich in structure and full of interwoven contrasts - using the ordinary to cover major themes of life.

I won't repeat the plot here as it has been told elsewhere. Also because this is a movie, and the story is just a small part of the whole experience. Wolfsbergen is markedly visual, using all available means of cinema to bring the concepts across.

I think Nanouk has done a magnificent job. The film is just extraordinary. Bias note: I know Nanouk from my former life as an artist. We even went to the same art class, but our work was very different then. And halfway the nineties I went into multimedia and she went to make films.

Somehow Nanouk's films strike me as familiar, quite strongly. As a part of me, really. Today I got confirmed.

In a video interview Nanouk tells us she uses space as a means to express the movie characters. The way I read this, the surrounding space is in fact an intrinsic part of their inner life. The way space folds around them, structures movement, restricts our view, captivates our moods. Space can tell us more than the expression on an actor's face.

This aspect of using space to express feelings has been part of my own visual language when I was making visual art. A language with a history - I am sure we both have a shared admiration for Yasujiro Ozu.

A particular example of how the film tells the story is the scene where Maria leaves the house. At the start of the scene the first thing you notice is the low humming sound of a car. Just by the sound of it you know that this is a taxi waiting outside. Maria is at the end of the hallway, at the open door, enclosed by the walls of the long hall. This is a long shot - she never comes close so we cannot read the expression on her face. Just before she closes the door she takes a look back inside in our direction and you realise she's not leaving for work, not with this gaze projected back into the house.

Further read:

• Interview: Nanouk Leopold on her multigenerational family drama 'Wolfsbergen'
• In-depth review of Tokyo Story by Roger Ebert

Dutch:

• Video: Nanouk Leopold over Wolfsbergen - short video with film fragments and a few actor quotes

After having worked on my faithful G4 Powerbook for the last 2 years, I finally got a beautiful fast brand new Intel Mac from my work this week. YES!

First thing I did was to test VisDoc. The latest bug reports I got were all from people using Intel Macs, so I was getting suspicious there might be something platform related. To my dismay I found out my users had been right. And the output very wrong.

Something peculiar goes on in Intel's internals. A simple function like

- (BOOL)isConst
{
   return [mType containsObject:@"const"];
}

should return a BOOL, right? Apparently not anymore, because [inMember isConst] now happily returns a pointer and that is never a NO or 0. To get reliable results I need to cast every boolean return value to BOOL: (BOOL)[inMember isConst]. Redundant but it does the job.

VisDoc 2.0.1 should fix all outstanding bugs for Mac Intel computers.