Category Archives: Design

Hans and Umbach: WiiChuck Pong

Hans and Umbach recently had a huge breakthrough that they wanted to share with you. A few weeks ago they built the Monski Pong example from Tom Igoe’s Making Things Talk book, substituting a few potentiometers for the arms of their non-existent Monski monkey (and non-existent flex sensors). They learned a lot in the process, but the boys have become increasingly concerned that they haven’t done enough work with front-facing interactions.

Stuffing a few wires into a breadboard is great for proof-of-concept work, but it brings with it a delicate and fussy interaction environment that lacks robustness and aesthetics. In the last week they’ve refocused their efforts on interactive input methods, rather than raw electronics, taking apart a Super Nintendo controller and interfacing a Nintendo Wii Nunchuk in the process.

Hans and Umbach: Taking apart an SNES controller

Hans and Umbach: Taking apart an SNES controller

Hans and Umbach: Arduino Hearts Wii Nunchuck

This got them thinking. “If we can access the accelerometers of the Wii Nunchuk as an input source, can we use them to play our Pong game?” The answer is yes, and the boys want to show you how they did it.

Hans and Umbach: Wiichuck Pong Components

First up, you’ll need a Nintendo Wii Nunchuk. These things are sweet, as they carry both an X and Y axis accelerometer (as well as a couple of buttons) for less than $20. Hans hasn’t found any libraries yet that interface with the analog control up top, but these other inputs have been more than enough to keep Umbach busy.

You need access to the wires and pins inside the controller, but it would be an awful shame to cut that beautiful cable. Lucky for us, Tod Kurt has created the WiiChuck adapter, a simple tiny PCB that takes the pins from the Nunchuk plug and breaks them out into a standard 4-pin header. You can get a WiiChuck adapter at SparkFun for a measly $3.

The adapter doesn’t come with the pins to plug them into your Arduino, though, so you’ll want to get a row of break-away headers so you can cut off a 4-pin header for yourself. You need to solder those pins into place, so now you’re also in the market for a soldering iron and some solder as well. And some wire cutters for separating those break-away headers from their kin. Yeah, it takes quite a bit of stuff to get started. We’re lucky to have Umbach on our team, who carries with himself a bandolier full of tools and electronics wherever he goes.

The whole point of the WiiChuck adapter is to be able to plug your Nunchuk into your Arduino, so you can do magic stuff like communicate serially with your computer, or control other things plugged into your Arduino. When it comes to writing code and working with the software side, Tod Kurt put together a WiiChuck library that makes it pretty easy to interface between the Arduino and the Nunchuk without doing everything yourself. If you download the WiiChuck Demo zip file, you’ll get the library of functions for connecting to the Nunchuk, as well as a demo that shows it all (hopefully) working.

The demo is great and all, but the boys wanted to make it do something. They had recently built the pong example from Tom Igoe’s book, and were interested in controlling the paddles with the accelerometer inside the Nunchuk. There are two pieces of software at work here. The first is the Pong game itself, written in Processing, that accepts incoming serial data and moves the paddles based on that. The second is the sensor reader, written in Arduino, that takes incoming sensor data from the Arduino and converts it into a format that the Pong game understands.

To get it all to work, Hans made some changes to the Arduino sensor reader example, blending it with the code from the WiiChuck demo. That way, the Arduino would pull down and translate input from the Nunchuk’s accelerometers (and buttons) into a format compatible with the Pong game. The game itself required minimal modification, only modifying the minimum and maximum ranges for the paddle values to conform to the range of values produced by the accelerometers.

Hans and Umbach: Wiichuck Pong Game

Et voila! C’est magnifique! This video up top shows the fruits of our labor… tilting the Nunchuk up and down moves the right paddle, and tilting it left and right moves the left paddle. One button starts the game rollin’, and the other button resets the scores.

If you’re interested in trying it out for yourself, Hans and Umbach have packaged up all their code into a fine and handy zip file. Or, you can browse the individual files ici:

WiichuckPongReader.pde (Arduino)
nunchuck_funcs.h (Arduino library)
WiichuckPongGame.pde (Processing)
WiichuckPong.zip (Everything zipped up)

Thanks, and happy hacking!

Hans and Umbach: Prototyping In Light

Hans and Umbach took some time out from their work to help me with my capstone project, where I’m trying to help people maintain a connection with the outdoors when they work inside for a living. In particular I’ve been studying how sunlight plays with indoor architectural spaces, and how the shapes of cast light change throughout the day as the sun moves across the sky. My explorations have been deeply inspired by the work of Daniel Rybakken, Adam Frank, and Philips’ efforts with dynamic lighting.

I wanted to create a device that would mimic the movement of the sun throughout the day, and I turned to Hans and Umbach for advice as to how to build such a thing. They recommended something as simple as a clock movement with a paper screen that would rotate, changing the angle and position of a beam of light from a Maglite over the course of time. Deemed Chrono we set forth to build such a prototype, to see how it would work.

"Outside In" Chrono Prototype Construction

"Outside In" Chrono Prototype Construction

"Outside In" Chrono Prototype Construction

"Outside In" Chrono Prototype Stage

Light is a tricky beast to prototype with, to be sure, but these small steps begin to point us in the right direction. We recorded a few time-lapse videos that show the movement of the prototype in a simulated office desk environment, condensing thirteen minutes of movement into less than two minutes:

The electronics are simple, but it’s an interesting and subtle way to communicate the slow passage of time within “embodied” space!

Hans and Umbach: Tragedy!

We have some sad news to report on the Hans and Umbach side of things. Umbach was soldering the other day, putting together our second Arduino Proto Shield from Adafruit, when he burned himself pretty bad on his soldering iron. Don’t worry, he’s a healer!

You see, Umbach keeps his soldering iron to the left of himself when he’s working. The strong affordance of the soldering iron seems to indicate that you should hold it like a pen, but of course that is a ridiculous notion. The long metal end of the iron is about a million degrees, and it will burn your skin in an instant. You should hold it not like a pen, but further back, like a… not pen… or a paint brush… or something.

But then, even that is not entirely accurate. As you get more comfortable with soldering you realize, or at least Umbach has realized, that the iron is not the most important thing you wield in your hands. The iron merely heats up the area, and it does not require nearly the fine motor control as the solder itself. Indeed, the solder should be held in your dominant hand, so you can be as precise as possible with whatever parts you may be slagging in liquid metal.

Umbach was in his groove, grabbed his soldering iron in his left hand, and without thinking made to pass it to his right hand, as he would a pen. He grabbed it for only half a second, but it was enough to burn the back of his index finger and the inside of his middle finger.

There is a lesson here, and it’s not necessarily that Umbach was thoughtless, careless and stupid. As humans we are constantly filtering information, performing apparently routine tasks without deliberate thought. This is in much the same way that I am convinced no one actually learns Photoshop or Illustrator, but over time is able to unconsciously filter out the aspects of the interface that distract from their everyday usage. It’s an incredible ability, and one that frees up our mental capacity to dream of such awesome things as transistors, skee ball, and bears juggling chainsaws.

We go through life largely in a state of absorbed coping. In the case of Umbach, we see that this can get us into trouble sometimes. Grabbing the hot end of a soldering iron is clearly a poor decision, and had Umbach been consciously aware of the results that would inevitably follow from his actions he would never have done it in the first place.

But we are people, and as people we adopt certain habits that are applicable in certain situations. When these situations unexpectedly cross one another, such as the strong pen-like affordance of a soldering iron triggering the pen-like habit of holding, we may find ourselves with burned fingers. As designers it’s important that we deliberately consider what the form of our products communicate to our users, even unconsciously, and design in a manner that discourages the absent-minded adoption of an incorrect interaction model.

Or maybe Hans just needs to take over the soldering from now on.

Your Workflow is the Battlefield

There’s been quite the wailing and gnashing of teeth over the Apple iPad not supporting Flash. Personally, I welcome this new landscape of the web, where a future without Flash seems not only bright but possible indeed.

That said, what is unfolding here is of considerable gravity, and will likely determine the future of the web. Most web professionals use Adobe tools in some capacity to do their job, whether Photoshop, Illustrator, Dreamweaver (gasp), Flash, Flex, Flash Cataylst, or even Fireworks (which is, according to many, the best wireframing tool on the market, despite its quirks and crash-prone behaviors).

Now, I am not privy to inside information, but based on what I’ve been able to glean, Adobe’s strategy is something like this. There is a deliberate reason that your workflow as a standards-based web professional sucks; that Photoshop doesn’t behave the way you want it to, that exporting web images is still a pain in the ass, and that you actually need to fight the software to get it to do what you want.

Adobe knows how you use its software. Adobe knows how you want to use its software. Adobe understands your existing workflow.

And it doesn’t fucking care.

You see, Adobe doesn’t view you, as a web professional, as someone engaged in building websites. It doesn’t view itself as one who builds the tools to support you in your job. Adobe does not view you as the author of images and CSS and HTML and Javascript that all magically comes together to create a website, but rather as the author of what could potentially be Adobe Web Properties™.

They are not interested in supporting your workflow to create standards-based websites, because that is not in their strategic interest. They would much rather you consented to the cognitive model of Adobe Software™ to create proprietary Adobe Web Properties™ that render using Adobe Web Technologies™.

In essence, Adobe wants to be the gatekeeper for the production, as well as the consumption, of the web.

Apple knows this, and knows that the future of the web is mobile. Their actions are no less strategic than that of Adobe, and Apple has chosen a route that deliberately undermines Adobe’s strategy; Adobe’s strategy for controlling not just the consumption of rich interactive experiences on the web, but their production as well.

From the production side, as far as Adobe is concerned, if you’re not building your websites in Flash Catalyst and exporting them as Flash files, you’re doing it wrong.

Your frustrations with Photoshop and Fireworks in not supporting the “real way” web professionals build standards-based websites are not by accident, but by design. Adobe views each website as a potential property over which they can exert control over the look, feel and experience. As these “experiences” become more sophisticated, so do the tools necessary to create them. Adobe wants to be in the business of selling the only tools that do the job, controlling your production from end-to-end, and then even controlling the publication of and access to your creation.

Apple’s own domination plans for the mobile web undermines all this.

And Adobe is pissed.

Hans and Umbach: “You know how grip works.”

Over winter break, Kate and I were fortunate enough to attend the British Advertising Awards at the Walker Art Center in Minneapolis. One commercial from Audi in particular really stuck with me, because of its clear reference to our highly sophisticated ability to navigate and interact with our physical surroundings.

With the Hans and Umbach project, this is what I aim to render explicit; that we have these incredibly well-developed skills for working with the physical artifacts in our environment, and by deliberately designing for these skills we can create more compelling, more engaging, more intuitive interactions.

Hans and Umbach: Soldering and Building

The Hans and Umbach Electro-Mechanical Computing Company

Phew, have we got a treat for ya’ll! Last night Hans was able to tame the wild beast that is Adobe Premiere Pro, and compiled some videos of Umbach (or was it Hans?) building some stuff with Arduino.

First up, the boys soldered together an Arduino Proto Shield kit from Adafruit. You can witness their amazing efforts in super-speed time, where sixty minutes of inhaling metallic fumes has been condensed into three power-packed minutes!

After that, the boys took their new creation and built a three-channel LED color mixer, out of a few potentiometers and one of these kick-ass triple output LEDs from SparkFun.

A huge shout goes out to Ryan Rapsys of Erratik Productions for the music!

Hans and Umbach: Atoms Are the New Bits

The Hans and Umbach Electro-Mechanical Computing Company

Needless to say, Hans and Umbach are extremely excited about this new article in Wired magazine, which champions a trend of garage tinkerers and other DIYers acting in concert to bring the world its next generation of products. Just as the internet democratized digital publication, so will new prototyping technologies democratize physical production.

We’d better get crackin’.

Version Zwei

hans-umbach-v2

Apologies to any Germans in the audience for brutalizing your beautiful native tongue.

Going Indie

It’s barely December, but I’m so sick and tired of this semester that I’m already working on next year. Kate was nice enough to get me Phaeton as an early Christmas present, and so I’ve been working on the art direction for my independent study next year:

The Hans and Umbach Electromechanical Computing Company

This is gonna be a fun one.

I suck at this whole self-promotion thing.

app-store-badge

owl-iphone-banner-470

The smart.fm iPhone app is now available in the App Store, and has been for a few weeks.

Not only is it awesome, it is also free. Thanks to the smart.fm iPhone app, I’m finally learning all those stupid tiny states on the Eastern seaboard. Because I wouldn’t want to try to learn something more ambitious, now, would I?

Super-mega-huge props go to the kick-ass team at Cerego and the experience ninjas at Adaptive Path. They made this whole thing happen.

Me? I drew pretty pictures:

smartfm-evolution

Which I guess is pretty kick-ass in its own right.