Our first Open Source contribution: Stunning Photo Filters for your Android apps
Let’s face it — the first thing most of us do when food arrives at our table is pull out our phones and take pictures of what we’re eating.
Now, we know everyone loves using filters on their photos, and we want foodies to have a simple way to apply them before sharing their photos on the Zomato app. The problem was, most of the predefined filters in publicly available image processing libraries don’t really go too well with food shots (we say this after a lot of experimenting, which — obviously — meant a lot of pictures, and a lot of food!). The only solution was to create our own custom filters that would make good food shots look even more delicious.
So we did.
Colour by number
We started out by trying various effects on a wide variety of food shots, by playing around with their RGB channels on tools like Photoshop to see what looked best. But that’s just the first step. How does one replicate an effect that looks good on Photoshop, on Android? We solved this using Independent RGB colour transformation.
We started with taking key points on the XY plane of a Channel graph from a tool like Photoshop. In this example, the points are [0,0], [175,139] and [255,255]:
Next, we generated a Bézier curve using these points, and normalized the graph into an array ranging from 0 to 255. In this array, the index represents the input value, and the value at that index is the output.
So RGB[4] = 6, meaning all the pixels with colour value 4 would now be 6. Similarly, R[35] = 78, which means that pixels with Red value 35 would now be 78, and so on.
But wait — that wasn’t the solution yet. Let’s assume we have an image that is 1024 x 1024 pixels (i.e. 1048576 sq.px). It would take far too much time to traverse through each pixel and check the output value in the array for each channel of that pixel. We knew we wouldn’t be in business until we found a way to make this process a lot quicker.
Speed is everything
With the first approach, it was taking as long as 4 seconds to process an image, so we tried using bitwise operations to change colour values of a pixel instead of stock methods offered by Android. That kind of worked — it brought our processing time down to 2 seconds, but it was still nowhere nearly good enough to put the code into production.
We realised we could try porting the logic to NDK (C/C++), which runs a lot closer to the hardware and would be able to process images much faster. So, we ported to NDK, and voilà — we could process the same image in a fraction of a second!
At this point, we were happy with the code, and knew it was in good shape to push into production, so we went ahead with it. You can take these filters for a spin in our latest Android app update, available here on the Play Store.
Free for all
Food tastes better when shared (or that’s what people tell us anyway), so it was only fair the same logic applied to our photo filters. We felt this was something developers could really make use of, to offer their own users a great photo sharing experience.
Moreover, we’ve been wanting to give back to the Open Source community for a while, seeing as we use a good number of free libraries in our apps. So we’ve pulled this block of code into a separate module and open sourced it for anyone and everyone to use. You can find the library on our page on Github (where it also trended for a few days!).
Note to fellow developers: In addition to changing channel curves of an image, this library also allows you to play around with effects like brightness, contrast, saturation, colour overlay, and vignettes. For more information, check out the documentation here.
As always, we’re open to feedback, suggestions, and contributions that can help us make things even better. Give us a shout at android@zomato.com.
Happy coding, and happy snapping!
