How to set same (constant) hue value for every pixel's of an image by using ColorMatrix?

Question

I am trying to set a constant hue value for entire image with using ColorMatrix. My goal is to make entire image look with same color without loosing brightness of any area. I found a way to shift the hue values of an image by using ColorMatrix but i couldn't find any way to set same hue value for all pixels. I can do it with iterating every pixel of image but this approach is too slow. I am not sure if it is possible to do it with ColorMatrix and i am open to possible solutions other than ColorMatrix approach.

Input Image

Hue shifting output Image*

Desired output Image**

*This can be done with color matrix

** I can do this with iterating pixels but not with ColorMatrix

PS: I am trying to do this on Android but i believe the question is not directly related to the android since ColorMatrix approach is common on other platforms like Flash, C# etc.

Cassity

If speed is an issue, have you considered using OpenGL's fragment shaders? – Hardandfast

Answer 1

not really familiar here, but i belive this link can help: http://www.graficaobscura.com/matrix/index.html it's c code, so you have to translate C -> ColorMatrix, but in the last paragraph there is the operation

Hue Rotation While Preserving Luminance

which seems what you are looking for.

Yours

Answer 2

I don't think there is a way to do exactly what you're asking for with a ColorMatrix. It sounds like what you want to do is transform from RGB to HSL color space, set H constant across all pixels, and transform back from HSL to RGB. These color space transformations aren't linear, and can't be represented with matrices. Because of the different way these spaces parameterize color, I also suspect some degradation could occur doing RGB->HSL->RGB.

I think the closest you would be able to achieve with the ColorMatrix is by using one to convert to greyscale, and another to weight the RGB values (tint them). This kind of thing is often used to do fake sepia tone photos, but it is not what you are asking for.

Agnomen

Answer 3

I have made a quick sample in Flash (this question is tagged as ActionScript), not sure if this is what you are looking for:

http://megaswf.com/serve/1047061

The code:

import com.greensock.*; 
import com.greensock.easing.*;
import flash.events.MouseEvent;

colorButton.addEventListener(MouseEvent.CLICK, onColor);
resetButton.addEventListener(MouseEvent.CLICK, onReset);

function onColor(e:MouseEvent):void {
    TweenMax.to(mc, 1, {colorMatrixFilter:{colorize:0x0099ff, amount:1}});
}

function onReset(e:MouseEvent):void {
    TweenMax.to(mc, 1, {colorMatrixFilter:{colorize:0x0099ff, amount:0}});
}

Icecap

Answer 4

here is a quick way to do it, if you want to set the hue to, let's say, h(0.5, 0.2, 0.3).

var matrix:Array = new Array();
matrix = matrix.concat([.5, .5, .5, 0, 0]);
matrix = matrix.concat([.2, .2, .2, 0, 0]);
matrix = matrix.concat([.3, .3, .3, 0, 0]);
matrix = matrix.concat([0, 0, 0, 1, 0]);
var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);

image.filters = [filter];

I'm not sure it will respect perfectly the luminance, but it may satisfy your need!

Emlynn

Thanks for your answer, unfortunately this is just changing the rgb not the hue value. – Cassity

Well, with this solution, every pixel has the same hue. – Emlynn

Answer 5

Check out QColorMatrix, which has a ColorMatrix routine called RotateHue. Source is in C++, but is portable to other languages (I've ported part of it to .NET in the past and it worked great).

Cripps