Tag: programming

Download my travel-time map

I am a bit ner­vous about doing this, but since sev­er­al peo­ple asked, here goes: You can now down­load the trav­el-time map of the Nether­lands I made in Pro­cess­ing. I have export­ed appli­ca­tions for Lin­ux, Mac OS X and Win­dows. Each down­load includes the source files, but not the data file. For that, you will need to head to Alper’s site (he’s the guy who pulled the data from 9292 and ANWB). I hope you’ll enjoy play­ing around with this, or learn some­thing from the way it was put together.

Some notes, in no par­tic­u­lar order:

  • Please remem­ber I am not a pro­gram­mer. The vast major­i­ty of this sketch was put togeth­er from bits and pieces of code I found in books and online. I have tried to cred­it all the sources in the code. The full write-up I post­ed ear­li­er should point you to all the sources too. In short; all the good bits are by oth­er peo­ple, the bad code is mine. But who cares, it’s the end-result that counts (at least for me).
  • Relat­ed to the pre­vi­ous point is the fact that I can­not fig­ure out under which license (if any) to release this. So the usu­al CC by-nc-sa license applies, as far as I’m concerned.
  • If this breaks your com­put­er, offends you, makes you cry, or eats your kit­tens, do not come knock­ing. This is pro­vid­ed as is, no war­ranties what­so­ev­er, etc.
  • Why am I ner­vous? Prob­a­bly because for me the point of the whole exer­cise was the process, not the outcome.
  • I can’t think of any­thing else. Have fun.

Sketching in code — Twitter, Processing, dataviz

Sketch­ing is the defin­ing activ­i­ty of design writes Bux­ton and I tend to agree. The genius of his book is that he shows sketch­ing can take on many forms. It is not lim­it­ed to work­ing with pen­cils and paper. You can sketch in 3D using wood or clay. You can sketch in time using video, etc. Bux­ton does not include many exam­ples of sketch­ing in code, though.1 Pro­gram­ming in any lan­guage tends to be a hard earned skill, he writes, and once you have achieved suf­fi­cient mas­tery in it, you tend to try and solve all prob­lems with this one tool. Good design­ers can draw on a broad range of sketch­ing tech­niques and pick the right one for a giv­en sit­u­a­tion. This might include pro­gram­ming, but then it would need to con­form to Bux­ton’s defin­ing char­ac­ter­is­tics of sketch­ing: quick, inex­pen­sive, dis­pos­able, plen­ti­ful, offer min­i­mal detail, and sug­gest and explore rather than confirm.

I have been spend­ing some time broad­en­ing my sketch­ing reper­toire as a design­er. Before I start­ed inter­ac­tion design I was most­ly into visu­al arts (draw­ing, paint­ing, comics) so I am quite com­fort­able sketch­ing in 2D, using sto­ry­boards, etc.2 Sketch­ing in code though, has always been a weak spot. I have start­ed to rem­e­dy this by look­ing into Pro­cess­ing.

As an exer­cise I took some data from Twit­ter — one data set was the 20 most recent tweets and the oth­er my friends list — and decid­ed to see how quick I could cre­ate a few dif­fer­ent visu­al­iza­tions of that data. The end results were: 

Today's start - timeline

one: a time­line that spa­tial­ly plots the lat­est tweets from my friends — show­ing den­si­ty at cer­tain points in time; or how ‘noisy’ it is on my Twit­ter stream, 

Neatly centred now

two: an order­ing of friends based on the per­cent­age of their tweets that take up my time­line — who’s the loud­est of my friends?,

Bugfix – made a mistake in the tick mark labels

three: a graph of my friends list, with num­ber of friends and fol­low­ers on the axes and their total num­ber of tweets mapped to the size of each point.

The aim was not to come up with ground­break­ing solu­tions, or fin­ished appli­ca­tions.3 The goal was to exer­cise this idea of sketch­ing in code and use it to get a feel for a ‘com­plex’ data set, iter­at­ing on many dif­fer­ent ways to show the data before com­mit­ting to one solu­tion. In a real-world project I could see myself as a design­er do this and then col­lab­o­rate with a ‘prop­er’ pro­gram­mer to devel­op the final solu­tion (which would most like­ly be inter­ac­tive). I would choose dif­fer­ent sketch­ing tech­niques to design the inter­ac­tive aspects of a data-visu­al­iza­tion. For now I am con­tent with Pro­cess­ing sketch­es that sim­ply out­put a sta­t­ic image.

Tools & resources used were:

If as a design­er you are con­front­ed with a project that involves mak­ing a large amount of data under­stand­able, sketch­ing in code can help. You can use it to ‘talk’ to the data, and get a sense of its ‘shape’.

  1. There is one involv­ing Phid­gets and Max/MSP, a visu­al pro­gram­ming solu­tion for phys­i­cal com­put­ing. [↩]
  2. Some exam­ples include a mul­ti-touch project I did for InUse and a recent pre­sen­ta­tion at TWAB 2008. [↩]
  3. I don’t think any of these visu­al­iza­tions are very pro­found, they’re inter­est­ing at best. [↩]

Pollinator — a casual game prototype made with Mobile Processing

I wrote a game about a bee and flowers today

Last sun­day I sat down and cod­ed a pro­to­type of a casu­al game in Mobile Pro­cess­ing. I got the idea for it the evening before: You’re a bee who needs to col­lect as much hon­ey as pos­si­ble in his hive while at the same time keep­ing a flower-bed bloom­ing by pol­li­nat­ing… Play it and let me know what your high score is in the comments!

Thinking and making

I’ve been look­ing for an excuse to get some expe­ri­ence with Pro­cess­ing (par­tic­u­lar­ly the vari­ant suit­able for devel­op­ing mobile stuff) for a while. I also felt I need­ed to get back into the mak­ing part of the field I’ve been think­ing about so much late­ly: Game Design. I agree with Saf­fer, Webb and oth­ers — mak­ing is an impor­tant part of the design prac­tice, it can­not be replaced by lots of think­ing. The things learnt from engag­ing with the actu­al stuff things are made of (which in the case of dig­i­tal games is code) aren’t gained in any oth­er way and very valuable.

Get the game

I’ve uploaded the first ver­sion of the game here. You can play it in the emu­la­tor in your brows­er or if your phone runs Java midlets, down­load the file and play it like you’re sup­posed to: While out and about. The source code is pro­vid­ed as well, if you feel like look­ing at it.1

Pollinator 0.1

How to play

You’re the yel­low oval. The orange tri­an­gle in the top left cor­ner is your hive. Green squares are grass, brown squares are seeds, red squares are flow­ers and pink squares are pol­li­nat­ed flow­ers. The field is updat­ed in columns from left to right (indi­cat­ed by the yel­low mark­er in the bot­tom). A seed will turn into a flower (in rare cas­es a pol­li­nat­ed flower). A flower will die, a pol­li­nat­ed flower will die and spread seeds to grass around it. Move your bee with the direc­tion­al keys, use the cen­tre key to grab nec­tar from a flower. You can cary a max­i­mum of 100 nec­tar. Drop your nec­tar off at the hive (again using the cen­tre key) to up your score. When you first grab nec­tar from a pol­li­nat­ed flower and sub­se­quent­ly from a nor­mal flower, the lat­ter is pol­li­nat­ed. Try to keep the flower-bed in bloom while at the same time rack­ing up a high-score!

You’ll get 10 nec­tar from a flower (in bloom or not). Pol­li­nat­ing a flower costs 5 nec­tar. If you try to take nec­tar more than once from the same flower, you’ll loose 10 nec­tar.2

Improvements

Stuff not in here that I might put into a next ver­sion (when­ev­er I get around to it):

  • Ani­ma­tion — I need to get my feet wet with some script­ed ani­ma­tion. Thing is I’ve always sucked at this. For now it’s all tile-based stuff.
  • Bet­ter feed­back — For instance show the points you earn near the bee and the hive. I think that’ll make the game a lot eas­i­er to under­stand and there­fore more fun.
  • Menus, pause, game over — It’s a pro­to­type, so you get dumped into the action right away. (The game starts on the first key you press.) And there’s no actu­al game over mes­sage, the field just turns green and you’re left to won­der what to do.
  • Bal­ance — I’m not sure if the game like it stands is bal­anced right, I will need to play it a lot to fig­ure that out. Also there’s prob­a­bly a dom­i­nant strat­e­gy that’ll let you rack up points easily.

The aim was to cre­ate a rel­a­tive­ly casu­al game expe­ri­ence that will almost allow you to zone out while play­ing. I think it is far too twitchy now, so per­haps I real­ly should sit down and do a sec­ond ver­sion some­time soon.

Mobile Processing

I enjoy work­ing with Mobile Pro­cess­ing. I like the way it allows you to pro­gram in a very naive way but if you like struc­ture things in a more sophis­ti­cat­ed fash­ion. It real­ly does allow you to sketch in code, which is exact­ly what I need. The empha­sis on just code also pre­vents me from fid­dling around with ani­ma­tions, graph­ics and so on (like I would in Flash for instance.) Per­haps the only thing that would be nice is an edi­tor that is a bit more full-fea­tured.3 Per­haps I should grab an exter­nal edi­tor next time?

Feedback

If you played the game and liked it (or thought it was too hard, bor­ing or what­ev­er) I’d love to get your feed­back in the com­ments. Any­one else out there pro­to­typ­ing games in Pro­cess­ing? Or using it to teach game design? I’d be very inter­est­ed to hear about it.

  1. Not that it’s par­tic­u­lar­ly good, I’m an ama­teur coder at best. [↩]
  2. I’m not sure this is the right kind of neg­a­tive rein­force­ment. [↩]
  3. The auto­mat­ic code for­mat­ting refused to work for me, requir­ing me to spend a bit too much effort on for­mat­ting by hand. [↩]

Gift outcompetes exchange in design too

I just fin­ished Eric Steven Ray­mond’s Home­steading the Noos­phere. It’s a ter­rif­ic read for any­one look­ing for a thor­ough look at the inner work­ings of the open source soft­ware devel­op­ment com­mu­ni­ty. Like oth­ers, when­ev­er read­ing this kind of stuff soon­er or lat­er apophe­nia hits and I try to tie bits to my own dis­ci­pline, which isn’t pro­gram­ming but design.

In one of the last chap­ters of the essay (titled Gift Out­com­petes Exchange). Ray­mond offers some tan­ta­lis­ing insights into the rela­tion­ships between doing com­plex cre­ative work, moti­va­tion, and reward. While read­ing it I recog­nised a lot of ideas that I’ve long felt are impor­tant but could nev­er real­ly artic­u­late. Now I final­ly have some great quotes, and (over 10 year old) research to back it up!

Psy­chol­o­gist There­sa Ama­bile of Bran­deis Uni­ver­si­ty, cau­tious­ly sum­ma­riz­ing the results of a 1984 study of moti­va­tion and reward, observed “It may be that com­mis­sioned work will, in gen­er­al, be less cre­ative than work that is done out of pure inter­est.”. Ama­bile goes on to observe that “The more com­plex the activ­i­ty, the more it’s hurt by extrin­sic reward.” Inter­est­ing­ly, the stud­ies sug­gest that flat salaries don’t demo­ti­vate, but piece­work rates and bonus­es do.

Thus, it may be eco­nom­i­cal­ly smart to give per­for­mance bonus­es to peo­ple who flip burg­ers or dug ditch­es, but it’s prob­a­bly smarter to decou­ple salary from per­for­mance in a pro­gram­ming shop and let peo­ple choose their own projects (both trends that the open-source world takes to their log­i­cal con­clu­sions). Indeed, these results sug­gest that the only time it is a good idea to reward per­for­mance in pro­gram­ming is when the pro­gram­mer is so moti­vat­ed that he or she would have worked with­out the reward!

Oth­er researchers in the field are will­ing to point a fin­ger straight at the issues of auton­o­my and cre­ative con­trol that so pre­oc­cu­py hack­ers. “To the extent one’s expe­ri­ence of being self-deter­mined is lim­it­ed,” said Richard Ryan, asso­ciate psy­chol­o­gy pro­fes­sor at the Uni­ver­si­ty of Rochester, “one’s cre­ativ­i­ty will be reduced as well.”

So a team of design­ers work­ing in the mode Ray­mond describes would choose their own projects and not be reward­ed for their per­for­mance on projects (which is usu­al­ly mea­sured in effi­cien­cy and client sat­is­fac­tion). In stead, to real­ly keep them moti­vat­ed, they’d be giv­en a large amount of auton­o­my (and would­n’t be instruct­ed on which prob­lems to solve and how to go about it). Of course, this only works with skilled work­ers, but I don’t think that’s the rea­son these philoso­phies haven’t been applied to design work on the scale they have been in pro­gram­ming. I think a lot of resis­tance for actu­al­ly allow­ing design­ers work like this in a com­mer­cial set­ting are relat­ed to a fear of giv­ing up con­trol. Lat­er on Ray­mond fin­ish­es the chap­ter with:

Indeed, it seems the pre­scrip­tion for high­est soft­ware pro­duc­tiv­i­ty is almost a Zen para­dox; if you want the most effi­cient pro­duc­tion, you must give up try­ing to make pro­gram­mers pro­duce. Han­dle their sub­sis­tence, give them their heads, and for­get about dead­lines. To a con­ven­tion­al man­ag­er this sounds crazi­ly indul­gent and doomed—but it is exact­ly the recipe with which the open-source cul­ture is now clob­ber­ing its competition.

When will the first exam­ples appear of design done in this way? When will the first projects pop up that out­com­pete the cathe­dral style designs process (or are they already among us)? Are there any design­ers out there actu­al­ly work­ing in this way? I’d love to hear from you.

Update: I changed the link to Flickr into one point­ing to a post by Tom Coates on how Flickr was built.