I just fin­ished a visu­al­iza­tion for my sec­ond assign­ment at Berkeley. It was made using Tableau, a rapid-visualization appli­ca­tion, and Photoshop. You can read more about the process behind it.

Presidential cam­paign con­tri­bu­tions made by indi­vid­u­als dur­ing the 2007-2008 elec­tion cycle, by polit­i­cal party and con­trib­u­tor location

Using FEC data of indi­vid­ual con­trib­u­tors to pres­i­den­tial elec­tion cam­paigns, this bar chart illu­mi­nates that both California- and San Francisco-based indi­vid­u­als give sig­nif­i­cant por­tions of the total amounts received by cam­paigns of each party. It is also clear that Democratic cam­paigns have received over 1.5 times as much as Republicans in this elec­tion cycle, at the national, state, and city lev­els. Contributions to Independent and Libertarian cam­paigns barely even reg­is­ter in com­par­i­son, and Green ones not at all.

The lat­est ad from the Alliance for Climate Protection con­tains some rotat­ing, 3D type rem­i­nis­cent of David Small’s Talmud Project. Watch the whole thing, or just jump to 15 sec­onds in.

My Processing work­shop went very well on Saturday. When a group doesn’t inter­rupt with ques­tions, I worry that they’ve tuned me out, but it turns out every­one was just busy hack­ing away, mak­ing crazy blinky shapes and col­ors! From the offi­cial report:

Scott took us through the Processing IDE briefly, dis­cussing the parts of the win­dow, how to run your pro­gram, how to get help, and a few other use­ful tips. Then he jumped right into how to pro­gram - we were all able to cre­ate a sim­ple diag­o­nal line imme­di­ately. He walked us through flat sketches, mov­ing sketches, 3-D sketches, text, import­ing exter­nal images, var­i­ous con­trol struc­tures, and a brief expla­na­tion of objects. About 6-8 remained after the work­shop and con­tin­ued play­ing with the language.

All agreed Scott did an excel­lent job of intro­duc­ing Processing and that it’s a fas­ci­nat­ing and use­ful language.

You won’t believe me, but square A is the same value of gray as square B. (Don’t just take Wikipedia’s word for it — ver­ify it your­self by sam­pling the two squares in Photoshop.)

When we per­ceive an object to be three-dimensional, our brains auto­mat­i­cally account for the light­ing con­di­tions, and com­pen­sate for nearby color and bright­ness values.

I’ve been read­ing a lot about visual per­cep­tion for class, and this is one of the most inter­est­ing images so far.

Thanks to ColourLovers for post­ing this.

A few weeks ago, I wrote admir­ingly about the ground­break­ing, orientation-independent inter­face of my favorite iPhone game, Dizzy Bee.

I shared my admi­ra­tion with the folks at Igloo Games, and got a response from Nathan, the designer and devel­oper behind Dizzy Bee, the company’s first prod­uct. He agreed to answer a few ques­tions for me, shar­ing some of the process behind this inno­v­a­tive game and UI.

Scott: How many oth­ers did you work with to cre­ate the final product?

Nathan: Three total. I did all of the pro­gram­ming and design. Art was han­dled by my good friend, and the sounds were con­tracted out.

How did the con­cept for the game orig­i­nate? Can you describe your process for evolv­ing the con­cept and new ideas?

The game started as a twist on a labyrinth game. I felt there would be a lot of accelerometer-based flat games, so I decided to try a ver­ti­cal ver­sion. (Many peo­ple seem to pre­fer to play it flat, though.) I’m a big fan of character-based action, so I like to put eyes on just about every­thing — rather than balls and holes, I wanted to have good guys and bad guys. I felt like con­trol­ling mul­ti­ple good guys would be really com­pelling, so I started with that. It wasn’t clear what was going on, who the main char­ac­ter was, and what you were try­ing to do, so I decided we’d have a main char­ac­ter to draw your focus, and we would build toward con­trol­ling mul­ti­ple friends — that’s were the cages were born. Then we put in the basic bad guy that moves almost the same as you, and we knew we had a game. After that, it was just play­ing with dif­fer­ent physics aspects to make unique char­ac­ters. The birds just have a max­i­mum speed that they go, so they kind of fall slowly. The big guy is much larger and heav­ier than you, so he doesn’t fit in cer­tain places. I tried tons of dif­fer­ent enemies/objects out. The ones I could make a cool stage out of stayed, and the rest were tossed.

Once you had the idea for the game play UI (which uses only the accelerom­e­ter as input), how did you start think­ing about the UI ele­ments that appear between stages?

I often have to make tem­po­rary art while I’m pro­to­typ­ing things. I felt I could draw a blob and call it an island, so that’s where the island/sea con­cept came from. I had orig­i­nally gone for a more novel approach for unlock­ing stages. I had wanted each island to have a theme and a port city. After you com­plete the port city (kind of an intro­duc­tion to that island), you could play any level on that island. So after beat­ing the first island you would have 3 new port cities, and if you beat those right away you would have 12 new lev­els to try. I still like the idea, but the dif­fi­culty ramp­ing wasn’t work­ing. People would find a stage that was way too dif­fi­cult, and the unlock­ing of islands wasn’t really a reward at all, so I changed it to a more tra­di­tional progression.

As for the Results Screen, I wanted good replay value, so I decided on 3 things to grade peo­ple on. [The three scales that deter­mine one’s score are: fruits saved, flow­ers col­lected, and per­cent­age of fruits that exited the level in a chain — mean­ing, they were saved at the same time. See screen­shot above.] I wanted those to be very promi­nent. Also, if the fruits lived or not and if they chained or not are very impor­tant, so I wanted that to be visu­ally rep­re­sented as well. The rest I just left up to my artist, and what you see is what he came up with.

How would you describe the Dizzy Bee UI?

It’s an up-less spinny UI. As I was mak­ing the game, I took care to make sure that noth­ing after the splash/loading screen had an “up”. The dia­log boxes orig­i­nally could be rotated 360 degrees as well, but unfor­tu­nately I couldn’t get the refresh going fast enough to make them smooth, so I had to set­tle for 90-degree increments.

Another thing I like to do with UIs is take one theme and apply it to every­thing. For exam­ple, I made a level edi­tor in Mario vs Donkey Kong 2, and in that there were lots of things that would scale up and down with an elas­tic type effect, finally set­tling on the cor­rect size. In Dizzy Bee, all of the UI ele­ments are like a spin­ner on a nail with a weight at the bot­tom, so they like to keep some momen­tum and even­tu­ally set­tle in the right spot. Also, each weight is a lit­tle dif­fer­ent, so each indi­vid­ual ele­ment moves slightly differently.

What ter­mi­nol­ogy did you use inter­nally to describe all these ele­ments? I tend to use “UI” to refer to more tra­di­tional inter­face ele­ments, like the text and tap-able but­tons that appear out­side of the stages.

I use UI very broadly to mean any­thing that’s not the in-game action. There are a few terms to spec­ify which part more closely. I use front end to describe any title screens/credits/file selec­tors. Level select is the island/sea sec­tion screen. HUD is any­thing that is shown while play­ing the game, such as play­ers’ lives or health. (Incidentally, Dizzy Bee has no HUD.) Pause menu for… well, you know. Lots of com­pa­nies use these same terms in dif­fer­ent ways, which has caused me some con­fu­sion in the past.

I’ve called it an “orientation-independent” UI. Were you or oth­ers on the Igloo team think­ing in those terms, or did you use other lan­guage to describe what you were building?

I was just think­ing in terms of Dizzy Bee is an “up-less” game, but I looked back at an old e-mail, and I also used the term “ori­en­ta­tion inde­pen­dent”. There are a lot of things I do dur­ing devel­op­ment that I ques­tion if any­one will even notice. Thanks for rec­og­niz­ing it, and point­ing it out.