Beautiful Connections: Mobile artwork for Nokia E71 (see nokia.co.uk/e71)

I recently had the privilege of being commissioned by Wieden + Kennedy to creating an artwork for Nokia’s new smartphone E71. It’s a new model featuring a full QWERTY keyboard, and is intended to function as a complete communication platform for people on the move. As a response to this purpose, W+K’s campaign focused on the idea of “Beautiful Connections”.

My contribution was a mobile app that allows the user to type in a short SMS-style message, which is then used as the basis for a generative animation that results in a visual compositions of curling forms. The final image can then be sent to other users as a MMS or saved to the phone memory for use as a wallpaper.

Technically it was a challenge to get all the different functions to come together in a single coherent application. The project was developed as a pure J2ME app based loosely on an old version of Mobile Processing. To get a smooth rendering style I chose to use the JSR-226 API for Scalable Vector Graphics, which allowed for properly anti-aliased drawings at the cost of a lower frame rate (approx 7 FPS). Standard J2ME graphics would have given 20 FPS, but the final result would have been less attractive.

All interface elements (menus, text input fields and contact information menu) were built from scratch to avoid the lo-tech feel of the default J2ME UI elements. This required quite a bit of work, but it would have been silly to break the organic feel of the application by using the native phone UI. Instead, the decision was made to make the app feel like a completely upgraded experience. This goal was finally achieved through liberal use of transparent PNGs and old school pixel font trickery.

Visit nokia.co.uk/e71 to see the campaign and download the application (it’s free!) Make sure to also check out the four excellent videos produced by Carl Burgess, Universal Everything, Field and SHFT. To complete the Beautiful Connections concept the web site also features an interactive message generator built in Flash that allows you to create images using live sound and web cam input.

My thanks to the Wieden + Kennedy crew for inviting me to do this project, in particular to Sermad Buni and Louis-Philippe Tremblay for their excellent support. My thanks also to Nokia for having the vision of wanting artworks on their phones. Now, if only Apple would create a category for art on their App Store…

A new online storage contender: Dropbox

Digital nomads and data paranoiacs everywhere tend to be big fans of online storage, and I am no exception. I’ve been using Box.net to share large files with clients and colleagues for a long time. It’s a great service with a nice GUI, with good support for sharing files. Their service record is excellent, I’ve never had any with service outages or trouble uploading.

However, the storage limit on the basic Box.net plan is only 5 GB for $7.95 / month. They offer an upgraded plan with 15 GB, but I’m not prepared to pay $19.95 every month for a few gigabytes. I’d be happy to pay up to $10 / month, but in return I want enough storage that I can use it without worrying about running out of space. 50 gigs or more would be sufficient for that purpose.

Shopping around, I’ve found JungleDisk to be a great solution for genuine online backup. It’s based on Amazon AWS storage, and users are charged according to actual storage used. I currently store 14 gigabytes, which last month cost me a measly $3.56 for last month including transfer fees. Compared with the one-off $20 purchase of the software, this is a very reasonable option.

JungleDisk uses a desktop application for its operations, so it’s well integrated in the native file system and supports automated backup tasks. I have it set up to safeguard key folders like current projects, office documents etc. I can also access files interactively through a cached network drive, which allows me to download old projects and large media files even while travelling.

Dropbox is a new storage service that has only just come out of beta, and it looks very promising so far. It combines a dynamic web interface with a desktop application, providing the best of both worlds. The software sets up a sync’ed folder on your computer, so that editing folder structures and uploading files is as easy as copying files around your file system. Files uploaded through the web interface will be downloaded and sync’ed with the local folder.

The web interface allows you to set up file sharing with other Dropbox members. So far a few features are missing that would make it easy to share files with non-members. There is a public folder that you can use to provide public URLs to specific files, but it still lacks the important feature of sharing public folders.

According to a recent blog post Dropbox plans to offer 2 GB for free and 50 GB for $9.99 / month, or $99.99 / year. Sounds like just the right deal for my purposes. I’m looking forward to seeing how it develops. But even if I end up switching from Box.net I’ll probably keep JungleDisk for backing up larger projects.

Burak Arikan: Twitter Networks / Jeff Clark: TwitArcs

In general, I’m a fan of social software, believing that it has great potential to be useful in the overlapping spheres between the personal and the professional. Nevertheless, I’m somewhat of a late comer to the Twitter revolution. Despite early enthusiasm from smart people like Tom Carden, I initially saw it mostly as a pseudo-chat medium and a potential timewaster. I signed up, then never came back.

However, a recent conversation with Burak Arikan about Twitter and collective thinking made me revisit the Twitter network. And guess what? I like it. Sure, there’s plenty of noise in the Twittersphere. But by wisely choosing whose streams to follow, Twitter becomes much like a collective conversation, providing in-progress snapshots of thoughts and ideas from some people I have come to know and admire.

At its best, Twitter is like a Hive Mind, echoing with ideas and spontaneous viewpoints.
By using a tool like Twhirl or Twitterfox, Twitter becomes an ambient information feed that you can tune in and out of at leisure. Its immediacy means that you’ll never experience the blog reader’s guilt of having 500 unread items in your feed reader. But by following the twitters of interesting people you’ll quickly find links to useful resources and learn about their creative processes.

Twitter tools & visualizations

The following are some recent Twitter-related resources that give an idea of the bigger Twitter picture, including network visualizations and Twitter hacks a little outside the mainstream. Feel free to post comments with links to interesting Twitter tools and hacks.

• Burak Arikan: Growth of a Twitter Graph
• Jeff Clark: TwitArcs / Twitter Spectrum / Twitter StreamGraphs
• explore.twitter.com – Index of Twitter tools, including the Twitter Blocks visualization (created by a Stamen team including the aforementioned Tom Carden)
• Twitterfeed.com – Tool for syndicating a RSS feed as a Twitter stream)
• Twistori – Visualization of twitters relating to emotional states
• Twittervision – Geographical visualization of public twitters

My own Twitter stream can be found at http://twitter.com/mariuswatz/. I try to keep my Twitters somewhat topical, but occasional digressions will occur. After all, that’s the beauty of Twitter.

As you might have noticed I’ve replaced the code formatting plugin that I use on the blog. I had trouble with the Geshi-based plugin I used before, so I replaced it with Alex Gorbatchev’s SyntaxHighlighter. This produces lovely formatting and works well – mostly.

SyntaxHighlighter hiccups when encountering the < character unless there is a blank space directly following it, most likely due to it being interpreted as the start of a HTML tag. Also, the "copy to clipboard function produces incorrect code because the text copied has < and > characters converted into the HTML entities &lt; and &gt;. However, I’m not sure if this is a problem with SyntaxHighlighter or with WordPress, since WordPress sometimes messes with formatting by automagically trying to provide good HTML substitutes for certain character combinations.

Most frustrating of all, WordPress has started replacing the ’s in “it’s” with a triple ellipsis character, as well as some other strangeness. Any tips for fool-proof plugins for posting properly formatted code would be most appreciated!

Rhinoscript sketch, extruding a revolution surface along random curves. Good cheesy fun.

I had a chance to see a bit more of the impressive tool Rhino 4 during the Generator.x 2.0 workshop, and so I thought I’d have a go at making a simple sketch in Rhinoscript. As it turns out, the fact that Rhinoscript is based on VBScript makes coding feel horrible at first. Seriously, who would want to use syntax like that? It might be easy for beginners to pick up, but it quickly gets painful once you’re dealing with complex API calls and 100+ lines of code.

Nevertheless, frustration soon gives way to amazement at the built-in Rhino library and its vast array of heavy-duty functions for creating and manipulating curves, meshes and NURBS surfaces. In comparison, mesh generation in Processing is enough to give anyone a headache, and I seriously doubt anyone would even attempt to implement NURBS. Even Boolean mesh operations is a staggering task, with no good Java libraries readily available.

While Rhinoscript is firmly a non-realtime tool, its power for pure geometry is amazing. I would definitely use Rhino as a creative tool for digital fabrication projects, where animation is not the goal. There are some excellent RhinoScript resources online, for starters look at RhinoScript 101 and David Rutten’s tutorial. I would also definitely recommend using the Monkey Script editor instead of the built-in editor, it’s more powerful and has a very useful documentation feature.

The script below gives a basic idea of the Rhino syntax, and while it is a basic sketch suffering from 3D clichées, it shows the power and versatility of Rhinoscript. I just wish it wasn’t Visual Basic.

Read the rest of this entry »

Screenshot of IE running integrated with Processing and other AWT components.

For a while I’ve been wondering if it couldn’t be useful to be able to render proper HTML from inside Processing. While Processing is excellent for realtime graphics, the typographic support is a little basic when faced with the task of designing a more complex layout. Rather than write a new library, why not just use a fast HTML engine?

While there are quite a few HTML rendering engines out there, not all are very complete or indeed very fast. This might be one of the cases where using native code makes sense. Both Internet Explorer and Mozilla offer ways of embedding their rendering engines through native bindings, and after a little googling I was able to find JDIC – the JDesktop Integration Components project.

JDIC aims to bring Java applications closer to feeling like “real” desktop apps. I’m not sure if that’s a battle I would have taken on myself, but in any case they have exactly what I needed: A simplified web browser ready for embedding, able to use either IE or Mozilla as engines. A little coding later and I had a hybrid Processing / AWT application running a web browser. It will even support Flash and Java content, provided that you’ve installed the proper plugins.

The WebBrowser.setContent() function is perfect for loading your own machine-generated content, and events can be captured and processed appropriately. It would even be possible to have a hybrid application, with part of the interface being straight Processing and the rest AWT. I’m keen to try using this to create more complex on-screen layouts. HTML and CSS will always look much better than anything one could create using Swing.

See Flickr for some screenshots.

Read the rest of this entry »

Burak Arikan et. al: Meta-Markets

I’ve recently been playing with the excellent Meta-Markets.com site set up by the talented Burak Arikan. Essentially Meta-Markets is a virtual stock market for trading socially networked capital. If you have a hot blog, a popular Flickr stream or were the first poster of an essential del.icio.us bookmark you can offer it for trade through an IPO, just as if it were a company.

Each user starts out with a capital of 25 “buraks”, which can be used to buy shares in traded commodities in any of the 6 given “markets”: Flickr, Facebook, del.icio.us, Feedburner, Digg and YouTube. By offer an IPO of your own social capital you accumulate value that can be used for further trade. Ultimately the system will also include auctions and payment of dividends to stock holders.

You can make an IPO of any del.icio.us bookmarks of which you were the first poster. Finding out exactly which these are can be a drag, since del.icio.us does not provide an overview of this info. Even using the del.icio.us API won’t give you the needed information, the only way is to use the del.icio.us URL history feature. Needless to say, this can get tedious when done manually.

To address the issue I’ve hacked up a tool I call deliciousChecker. It downloads your bookmarks and then proceeds to check their posting history using HTTP calls to the history page. del.icio.us will block offensive applications that make repeated API calls, so deliciousChecker only downloads the bookmarks when there’s been an update. There is also a 15 second default delay between HTTP calls, it’s not recommended to go lower than this since Yahoo will think you’re a denial-of-service attack.

The code is written in Processing using the delicious-java and Apache Commons HttpClient libraries. The source is included, but for non-Processing users I’ve also provided precompiled applications for Mac, Windows and Linux. You must edit the “delicious.conf” config file to add your username and password.

The application can be exited safely by pressing the escape key. It also auto-saves the database with regular intervals. Upon exit (whether from interruption or upon completion) the application writes a HTML file with your bookmarks, indicating which ones were first posted by you as well as how many other users have saved them.

• deliciousChecker02.zip

Following up on my post a few days ago about online storage: I just rechecked the Box.net web site only to discover that they have increased their prices rather than drop them. 5 GB is now $7.95/month or $79.95/year. 15 GB is $19.95/month or $199.95 per year. I might be willing to pay that – if we were talking about 100 GB of storage.

I’ve looked around at other solutions, but haven’t found any that seem really appealing. I’d be happy to hear suggestions or any feedback about your own experiences.

The idea of storing data online is sexy. It means easy sharing of files, pseudo-backup and access-everywhere all rolled into one. I’ve been using Box.net for a year now, with mostly good experiences. It’s got a well-designed dynamic interface, it makes sharing extremely easy and the service is very stable. I do have a few complaints though:

• The space you get is small. 5 GB for $5/month is not a lot. They have a bigger plan at 15 GB at $15/month (== $180/year), which hardly seems like a bargain.
• The interface looks great, but is sometimes a little tricky for complex file operations such as moving lots of files around. It’s got a great search function though.
• Most importantly: Uploading can sometimes be painful, requiring the use of either a popup applet or a built-in Flash tool. Navigating the file structure from these tools seems like it’s harder than it should be, with slow GUI response times.

Essentially, I’ve been wanting a file browser-like interface for uploading, with immediate folder navigation. Box.net has promised for a long time that they would release an uploading app that works outside the web browser, but has not delivered so far. I like their service and I’m not looking to switch, but I just wish it’d be easier to use…

To the rescue: Fire Uploader, a Firefox extension that supports FTP-style uploading to Box.net, Flickr, Picasa and YouTube. Browsing my Box.net account, creating a new folder and uploading a bunch of images was a snap. It supports downloading as well, but unfortunately not moving files.

It remains to be seen how stable Fire Uploader is in dealing with huge files and broken uploads, but so far it’s looking really good. Upcoming versions might add site-specific functions such as setting permissions, as well as new services to upload to. If it supported moving files it could almost be a complete Box.net GUI replacement.

For Flickr uploading, Fireflix is useful, but a little clunky. For FTP transfers, I like FireFTP, another great Firefox extension. It allowed me to finally do away with clunky FTP software, and do it all inside the browser. I love that that the browser becomes an environment for getting things done.

As mentioned previously, I’ve been working on developing a visual piece for a Nokia phone. After trying Mobile Processing, I came to the conclusion I’d be better off going the old school way: Pure J2ME development in Eclipse. It makes me appreciate just how easy developing in Processing really is compared to going back to the bare bones.

Seeing as my target is a Nokia phone, I figured using Nokia’s own Carbide.j tool for J2ME development. Now it looks like that was a mistake. Nokia has just announced that they’re discontinuing development of Carbide.j. Instead, they suggest two Open Source alternatives, Eclipse with the EclipseME plugin or NetBeans IDE with the NetBeans Mobility Pack.

I found out about the announcement while trying to repair my apparently broken install of Carbide.j, so I’ve now made the jump to EclipseME and dumped Carbide.j altogether. EclipseME feels much better integrated with the IDE, running a MIDLet in a given emulator is as easy as running a regular app. Carbide.j forced you to use a series of clumsy steps just to get the emulator up and running.

Right now everything’s running flawlessly except when I try to use Nokia’s S60 3rd Edition (FP 1) emulator. It barfs at the step of creating the JAR file for some reason. I guess I’ll just stick to Sun's WT5 2.5 emulator and forget about using any fancy Nokia-specific stuff like transparency. The upside is that my final app will theoretically run on any MIDP 2.0 phone.

Update: When trying to install my MIDP application generated with EclipseME on the Nokia phone I kept getting “Invalid JAR” errors. According to a post on eclipseme-users, this is due to EclipseME not including a vital piece of information in the JAD file. To fix it, simply open the generated JAD file with a text editor and add the following:

MIDlet-1: Classname,,packagename.Classname

“Classname” should be the name of your MIDlet class, “packagename” should be the name of the package it’s in. After I added this line to the JAD it installed just fine.