How can I change the color of a complex graphic?

Question

I have a graphic in Adobe Illustrator (lets say a cat) that I want to use in an Android application. I would like to have the user be able to change the color of the fur using a color picker. What can I save the graphic as (SVG?) to allow me to programatically control the color from with the android app? Do I have to have a separate image for each color of the cat?

Answer 1

There’s also a simple trick for color mixing without having to touch the pixel data. Just save several versions of the image with shifted colors, read them into the application, overlay them and use alpha blending to mix between them. This way you can get smooth colour changes without too much work. (I’ve done it, just not on Android.)

Reply to comment so that I have more space: Yes, three R/G/B images will work. If you want to have more color options, you can prepare six images with hue rotated by 60 degrees from each other (60/120/180/240/300/360). That can be easily done in your bitmap editor of choice, this is how the Hue/Saturation dialog looks like in Pixelmator:

Hue shift http://zoul.fleuron.cz/tmp/hue.jpg

Then you simply display two of them at a time, keep the lower alpha at one and change the upper alpha from 0 to 1. When you reach 1, you hide the lower image and display the next one in the foreground with zero alpha. Repeat ad libitum. This will give you plenty of color hues with smooth mixing and little work.

Answer 2

You don't need several images - you can do this with a single image - use whatever format is supported on the target platform. Android supports PNG, GIF and JPG - I would choose either PNG or JPG, with preferences for JPG since this is presumably a photograph.

Assuming that the existing image has color (i.e. not black or white fur) you can change the colors of the fur either by

• colorizing the image - this forces all colors into a given hue
• hue shift - this shifts the hue of all colors by a given amount

To implement this. you could use jjil - Jon's imaging library - targeted at mobile devices with specific support for Android.

To implement both of the transformations above, follow these steps:

1. first convert the image to HSV, using the RgbHsv pipeline stage
2. convert the desired fur color RGB to HSV (e.g. is red fur is reqired, convert rgb(red) to hsv(red). (Example code.)
3. Then you chose how to modify the image color - either by setting H (hue) for each pixel to the same hue value as the desired fur color (from step 2), or by adding the difference of the selected hue to the image pixel hue (modulus 255) to get a hue shift. You might also scale the V value to provide lighter or darker shades of fur.
4. The HSV values of the image are then converted back to rgb. There doesn't appear to be a HsvRgb filter in the jjil library, but this can be implemented as an inverse of RgbHsv. Here's a HSV2RGB function.

If there are other colors in the image that are important, you can leave these unaffected and only apply the transformation to specific colors in the image. You check the current HSV value, and if the hue, S or V values are outside of those that you don't want to modify then you simply don't change those values. For example, if the cat has green eyes, and brown fur, you skip over HSV values where the H indicates it's a shade of green - leaving that color, and the eyes unchanged.