Lens Blur Live Wallpaper for Android 2.1

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.

Wallpaper from tutorial

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:

Advertisements

18 thoughts on “Lens Blur Live Wallpaper for Android 2.1

  1. I love it, even though I have a few suggestions…

    I know this is alomst impossible to fix, but can’t you make the edges of the circle only be glow-able, with the interior of the circles more transparent, less opaque? Also, in your screenshot, they seem to be a bit too bright….

    Thanks!

  2. Hi, is there any reason why I can’t find a download for this? The QR code is coming up empty when it hits the marketplace, and all other search results on the marketplace aren’t finding it.

  3. Really want to give this one a try looks great, but I cannot find on my market. Anyway you can post the APK here?

    Thanks

  4. I cannot find it on the marketplace !
    Could you give us a direct link to download your app ?

    Thank you !

  5. I’d love to see the source for this. I’ve been looking for a good live wallpaper example for a while now.

  6. I’d just love to see the app. PÄ“teris, I’ve been checking back to this site almost every day for about a month…any news about getting our hands on this?

  7. Sorry about keeping mum–I’ve been having vacation and no broadband connection for past month.

    I suppose the app doesn’t show up in market because I’ve done something wrong in app’s manifest.xml file. Here is a direct link to .apk, please try to install that and let me know if install fails and mentions any specific reason why it’s failing:

    http://cu.serveris.lv/up/storage/BlurWallpaper.apk

  8. @Matt E: I’d be happy to share the source code if there’s interest for that! However, the code will needs some cleanup before going public, also I’m still on EDGE connection via tethered Android phone, so this will have to wait for a bit.

    Meanwhile, I suggest to look at the examples provided with Android SDK. There are some examples for live wallpapers and lots for 2D and 3D graphics, so you can scour through these and combine the bits. That’s what I did 🙂

  9. PÄ“teris, thanks for responding! I just installed it on my droid, and the install went fine, but it’s just coming up as a blank screen. Everything is white, and that’s it. I got a failed response message the first time I tried to load it, and I’ve tried loading it a few more times, and have not gotten that message, but I still have a white screen. I haven’t gotten any specific error messages, but I’ll continue to try loading it to see if any come up.

  10. @Cave: OK, so there’s a bigger problem than just market not showing this app. I only have Nexus One at hand, would you mind helping me out with testing this on Droid? 🙂

    My guess is that Droid has problems handling giant texture sizes I’m trying to use (longest edge is 1440px). So I built a package with smaller textures and one layer less, it looks crappy but if it works at all, then I know what to do–split my big textures in several smaller ones. Here’s the link to APK:

    http://cu.serveris.lv/up/storage/BlurWallpaper-small.apk

  11. PÄ“teris, same thing. Just a white screen. Didn’t see any force close at all, but still just a white screen. Please let me know what I can do to help out.

  12. Tried the above smaller-texture version on my Droid 2.1 and get the white screen. I also get the error: “Sorry! The application Lens Blur Wallpaper (process lv.monkeyseemonkeydo.wallpapers.blur) has stopped unexpectedly. Please try again.”

    That error message probably doesn’t tell you anything, but you never know.

  13. It doesn’t work since I updated to froyo. Please fix it ’cause it’s such a cool wallpaper! Great job!

  14. I’d love a copy of the code. I’m just starting out on Android development and this would be a great way to get a headstart. No worries if the code is messy…that’s the way it should be! Thanks!

  15. Can I use the large wallpaper you made as a background for my UI toolkit project page? It’s an open source project for responsive UI elements, I really need a slick bk for the page – thanks for your consideration!

Comments are closed.