Android Particle Self Portrait

A few years ago I set myself the task to make a project on android that allowed me to be visually expressive with coding. An idea that resonated was creating a self portrait of dynamic floating particles — particularly, an app that would let someone take a selfie and see their particle self portrait as a live wallpaper. An added bonus would be if the particles shifted on screen based on phone tilting or screen taps.

Having had experience hitting the limits with the core android graphics library while developing the Sin City Live Wallpaper, I knew that was not the way to go for updating several thousand particles. That left two options in my mind — in the absence of a google-able android particle library — something involving renderscript or OpenGL ES. Before diving into these realms, I wanted to have a big picture strategy of the algorithms necessary for a magical realism self-portrait.

I scoured the web to see if anyone had done what I wanted in another language or platform. I quickly came across a blog post by Nikhil Bobb on making a self portrait using a super non-developer friendly framework called Processing.js. I was stoked to find that Processing was trying to work out native support for Android. Fortunately, Nikhil’s particle self portrait was pretty gnarly. I was able to tweak his code to get more of a “floating” vibe to the particles. Unfortunately, I did not get the quality or hooks I wanted out of the Processing.js native port. The whole experiment did teach me that a perlin noise function was the way to go for generating random circular floating motion for each particle. Below is an example of the floating effect self portrait particle effect using Processing.JS:

I tested out Nikhil’s original algorithm on my own photo here and came up with another hack with a cool effect I call Sparkle.

After a few failed experiments with renderscript, I opted to go with OpenGL ES. There were a short handful of openGL ES tutorials online but few that were able to help with the end goal. A number went into far more detail about matrix math than was probably necessary, and others assumed base knowledge that I was lacking.

Could there possibly be a book dedicated to opengl es and android (or at least mobile)? Yup, so I obtained a copy of OpenGL ES 2 for Android: A Quick-Start Guide (Pragmatic Programmers). Sometimes you get lucky, and a book has just the right amount of knowledge bombs to drop on you. This book lays out a nice architecture for how to start simple android OpenGL projects and modules, one which is very similar to what I ended up using for the ParticleGL project. It covers everything from writing simple shaders, managing buffer objects, the camera object perspective matrix models, and updating references from the java code. I am fairly certain the code could would be more performance optimal with a combination of a C++ library and OpenGL ES. I even looked into a framework called Cinder that is used by The Mill, but ultimately the java+openGL approach I used worked. There’s no need to optimize prematurely. You can view the source code on GitHub, you can download the demo app here (play store link to come soon), and watch a video sample below:

I share this with the hope that others can build off it easily. I once hoped to build a library that others could use to quickly iterate, but abandoned this project long ago to focus more on my full-time job and other activities :/ This app has sat on the shelf for sometime. Other developer friends get stoked about it when I show it off. So please, if you like this and want to use all the code to make something grander, do it! Or, you can just see what your own particle self portrait looks like by swapping in a 48×48 photo of yourself with the background cropped to white. Keeping color in the eyes of your original image while leaving the face to grayscale can also look quite alluring.

Leave a Reply

Your email address will not be published. Required fields are marked *