I’m a happy owner of Nexus One phone for over a month already, so it’s about time to look into developing Android apps. I set out to create a live, animated wallpaper based on this “Awesome digital bokeh effect in Photoshop” tutorial. The light bubbles would be in different planes/layers, and would move at different speeds when flipping homescreens, hopefully creating some kind of 3D illusion.
How does it feel to develop for Android? First, my background: my day-to-day work is mostly Python, before that I’ve worked for about two years with Java 1.4 too, absolutely no previous OpenGL experience. I have rudimentary understanding how 3D transformations and projection to 2D work though, from high-school Pascal & mode 13h times. Given that, hacking on Android code was pretty enjoyable. The platform comes with convenient tools and reasonable amount of documentation, Google easily found answers to my newbie-type questions, all of the problems I encountered I wasn’t first one to stumble upon. Unsurprisingly, there’s a wealth of OpenGL information on web. Also, realized I totally need to get more RAM for my home laptop, 1GB is way short for running both Eclipse and Android emulator.
For my live wallpaper, I started with idea of composing individual light bubbles on top of gradient background with the help of OpenGL ES. Android SDK comes with helpful sample projects, I picked one that was closest to what I needed–a rotating textured triangle–and started modifying it. First, I replaced the triangle with square. In the screenshot we see that texture is mapped incorrectly and there’s also a visible redrawing glitch:
Next, several of those textured rectangles at various sizes (positions on z axis), additively blended together:
With background gradient thrown in:
The gradient is there and the bubbles are there but the effect looks crap… Reason is, for the effect to work elements should blended using “Color Dodge” method, as specified in the original tutorial. The problem is, OpenGL ES 1.0 doesn’t support such blending mode. This would be possible with OpenGL ES 2.0 and a fragment shader though. Getting that to work would involve massive amounts of RTFM and would limit my wallpaper to OpenGL ES 2.0-capable hardware. So what other, easier options? Using 2D graphics and blending in Java code, pixel by pixel!
This approach technically works, with some tuning the effect could be made to look good, but the problem is performance: I was getting 4-5fps refresh rate at best on my Nexus One, and the wallpaper also made the rest of system sluggish.
Next bright idea, prepare source pictures so that the effect would look right even with simple additive blending that OpenGL ES 1.0 supports fine. Here I am testing the idea in GIMP, layering my images over each other, and the result looks promising!
So soon enough my Lens Blur is working nicely as separate demo application both on emulator and on the phone. Found some advice and code to turn my GL code into Live Wallpaper, and bang, the result!
I also uploaded this Live Wallpaper to Android Market, so, if you have Android 2.1 device (currently, officially, this means just Nexus One), you can try it out yourself! Search for “Lens Blur Live Wallpaper” on Market or use this QR code: