setColorTransform HSV mode

chipster123 · April 2012

@altilim, could the setColorTransform() function support the HSV model as well as the RGB model?
I want to affect the hue without changing the saturation or value, and the RCB approach doesn't support it. It just tints the overall image. Changing hue allows the grays (equal r,b,g proportions) to go untouched while changing the non-grays.

ar2rsawseen · April 2012

If you only interested in Hue, then HSL will also suit you.

I've dealt with HSL recently, here's the code I used (just ported it to Gideros, didn't test thoroughly, but seems to work):

local rgb_to_hsl = function(r, g, b)
	r = r/255 
	g = g/255 
	b = b/255
	local max = math.max(r, g, b)
	local min = math.min(r, g, b)
	local h
	local s
	local l = (max + min) / 2
	if(max == min) then
		--achromatic
		h = 0
		s = 0
	else
		local d = max - min
		if(l > 0.5) then
			s = d / (2 - max - min)
		else 
			s = d / (max + min)
		end
 
		if max == r then
			if g < b then
				h = (g - b) / d + 6
			else
				h = (g - b) / d
			end
		elseif max == g then
			h = (b - r) / d + 2
		elseif max == b then
			h = (r - g) / d + 4
		end
		h = h / 6
	end
	return math.floor(h*360 + 0.5), math.floor(s*100 + 0.5), math.floor(l*100 + 0.5)
end
 
local hsl_to_rgb = function(h, s, l)
	h = h/360
	s = s/100
	l = l/100
	local r, g, b
	if(s == 0) then
		--achromatic
		r = 1
		g = 1
		b = l
	else
		local q
		if l < 0.5 then
			q = l * (1 + s)
		else
			q = l + s - l * s
		end
		local p = 2 * l - q
		r = hue_to_rgb(p, q, h + 1/3)
		g = hue_to_rgb(p, q, h)
		b = hue_to_rgb(p, q, h - 1/3)
	end
	return math.floor(r * 255 + 0.5), math.floor(g * 255 + 0.5), math.floor(b * 255 + 0.5)
end
 
local hue_to_rgb = function(p, q, t)
	if(t < 0) then t = t + 1 end
	if(t > 1) then t = t - 1 end
	if(t < 1/6) then return p + (q - p) * 6 * t end
	if(t < 1/2) then return q end
	if(t < 2/3) then return p + (q - p) * (2/3 - t) * 6 end
	return p
end
 
local h, s, l = rgb_to_hsl(35,9,34)
print(h.." "..s.." "..l)

atilim · April 2012

@ar2rsawseen, I think @chipster123 wants to change HSV values of a sprite. And unfortunately its not possible to achieve this effect with OpenGL ES 1.1.

chipster123 · April 2012

@ar2rsawseen, thanks for the code, but @atilim is correct and I am sad. =((

ar2rsawseen · April 2012

I must be missing something, but,
can't you retrieve RGB using :getColorTransform() or use a default RGB value,
convert it to HSL,
modify hue,
convert back to RGB,
and use setColorTransform() to set new RGB values?

OZApps · April 2012

@ar2sawseen, The RGB method will colour a sprite into one colour, where as I *GUESS* that Chipster is wanting to fade a sprite out rather than re-colour it in monochrome.

While what you are suggesting sounds fine on the surface, but it won't work the way it is intended to.

Scouser · April 2012

I think @Chipster123 may want to have one set of sprites (say soldiers with a blue uniform) and then using HSV change only the uniform colour to maybe red or green. It would be an excellent feature and would save so much memory. Unfortunately as atilim says, using OpenGL ES 1.1 this is not possible. If I remember rightly, shaders are not supported in OpenGL ES 1.1 either otherwise this could maybe have been implemented as a shader program.

techdojo · April 2012

If @Scouser is right about @Chipster123's intended use case then another approach would be to split the character into different elements and then create a parent "character" sprite in which the elements were recombined to make a new character. You could either then supply a set of your own "uniforms" or if the "uniform" section was white then you could colourise only the section you were interested in (and combining it with @ar2rsawseen's idea would probably give you the effect you need.

atilim · April 2012

Hi,

After reading your posts (mainly @techdojo's post), I tried to implemented a simple example that displays an image with changing HSV values.

First I created 3 images by shifting their rgb channels:
1st image -> r, g, b
2nd image -> g, b, r
3rd image -> b, r, g

Then I calculated the 3x3 color transform matrix from HSV values and apply these values to these images by using setColorTransform and then render them with additive blending.

On the other hand, it seems it's not a practical way to be used in a real application.

(edit: I take the matrix from here: http://beesbuzz.biz/code/hsv_color_transforms.php)

chipster123 · April 2012

I'll post example images. But the gist of it is that changing hue on a color image leaves the gray parts gray and shifts the color parts however I want. This use case is to have a common set of graphics with color and gray parts then apply different hue shifts to the bitmaps for different "teams". The base application will only require one set of graphics, but the application can apply any color scheme the user wants.

OZApps · April 2012

@Atilim, that is recolouring the whole sprite, almost like colouring it with RGB, Can we recolour only a particular colour, say the Toucan's beak which is Yellow, that would be nice to achieve.

chipster123 · April 2012

Here is the example. The original image on left, one of an "infinite" hue shifting options in middle, ugly rgb mixed approximation on right.

@OZapps, to get what you want, then I would overlay the "non modifiable" colors on the final shifted image. In this examples, the skin may be a pink color regardless of the uniform choices the user makes.

techdojo · April 2012

So basically you are combining separate images to create a whole object?

Just create all of your graphics you want to colour in a white / greyscale and then apply the RGB tinting only to that layer - it'll give you the same effect. Your adding the "pink" faces on later anyway.

When "render to texture" becomes available you could replicate this process before the game starts and then just have a single sprite sheet to use.

Just my $0.02

Scouser · April 2012

@Chipster123: Seeing your example and what you want to achieve then the only possibility I can see is what @techdojo suggested. You will need to store separate images for the coat and skirt (in the above example) and apply a color_transform to just them elements then add them as children to the main image. It may be a little more wasteful on graphics memory but at least you will still only need to store one set of images.

DOH!!! Ninja'd by techdojo

(

techdojo · April 2012

Scouser · April 2012

Grrrrrrr!!!!!!!

OZApps · April 2012

@Chipster123, if it is about creating composite images, then it is almost like the Paper Dolls technique, where you can recolour the base skin and then place any piece of clothing / layers on it. I thought you were wanting to change the HSV of the entire sprite.

chipster123 · April 2012

@OZapps, it was about changing the color parts of images. My example was simple but the idea is the same; change the colors an not the grays - hue shift gives this. I just was asking originally if it was possible for the api to support it. It's not and I'm OK with that.

keszegh · February 2014

I was wondering if one can make a bitmap monochrome with some trick in Gideros. I've found this topic, from which it seems this is not possible yet, but will be possible later when opengl 2.0 support comes. can anyone confirm these infos?

ar2rsawseen · February 2014

@keszegh you can using Media plugin set each pixel of an image, for example to same r g b values

keszegh · February 2014

@ar2rsawseen, thanks, that's good to know.
still, it would be more convenient to work with bitmaps (media is not a bitmap, or is it? there is no freely available documentation for it and in the labs topic i did not find if it inherits from any class) especially that media is in experimental stage, so i'm still interested if opengl2 might bring this feature.

ar2rsawseen · February 2014

Media basically is an image file, that then can be loaded into Bitmap.

Currently without @atilim's consult I can not confirm nor deny the possibility of feature being supported in OpenGL 2.0

But I will check with him

keszegh · February 2014

i see, you can save the media to a file and then load it back as a bitmap if you like.
thanks for checking the opengl2 part.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

setColorTransform HSV mode

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

setColorTransform HSV mode

Comments