Colorizing an image?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
User avatar
Jasoco
Inner party member
Posts: 3639
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Colorizing an image?

Post by Jasoco » Wed Jan 25, 2012 7:11 am

How do you colorize an image to any color but black?

Obviously if you setColor(255,255,255) it draws the image at full color, and if you change those numbers uniformly down to setColor(0,0,0) you end up with the same image but black.

But how would you draw an image with other coloring? Like say white? You can't setColor(255,255,255) because that's just full color. There doesn't seem to be a way to make an image colorized correctly other than black. Even if you just remove one color value from setColor, you just end up turning off that color channel and end up with an image that's not what you want.

Is there a way to colorize an image to other colors?

i.e.
Image

User avatar
MarekkPie
Inner party member
Posts: 587
Joined: Wed Dec 28, 2011 4:48 pm
Contact:

Re: Colorizing an image?

Post by MarekkPie » Wed Jan 25, 2012 7:51 am

The way I would try is converting the pixelData to HSL, and then only changing the hue. That way, the other values don't get affected, and it still maintains it's lightness/saturation and retains its bright and shadowy areas.

You'd obviously also need to convert back to RGB for LOVE to deal with it, but as long as you aren't doing it dynamically, it shouldn't be a big issue.

coffee
Party member
Posts: 1206
Joined: Wed Nov 02, 2011 9:07 pm

Re: Colorizing an image?

Post by coffee » Wed Jan 25, 2012 8:48 am

Ahh, I'm interested in this subject too but I lightly thought this yet Jasoco, a bit because LOVE don't seem very oriented for this kind of color manipulation like other language engines that offer more gfx functions or blending modes of this kind.

However I think the "problem" or the best way to deal with this in LOVE is that your "normal" graphic better not be normal/colorized.
My sugestion is to keep "normal" gfx as a "middle" grey tones and then colorize it wth some colored alpha mask over it. Even better is to divide the plant in 3 separate items (plant, trunk and pot) and colorize individually. But probably this alternative already come to your mind before.

This is of course one theoretical advice. There is people around that had for sure the same problem I guess and better suited/qualified to answer it.

User avatar
bartbes
Sex machine
Posts: 4944
Joined: Fri Aug 29, 2008 10:35 am
Location: The Netherlands
Contact:

Re: Colorizing an image?

Post by bartbes » Wed Jan 25, 2012 9:58 am

I'm not sure.. additive blend mode, perhaps? (Hint: I always forget what blend mode does what.)
With PixelEffects you could most definitely do this, but it seems like something simpler should be possible.

coffee
Party member
Posts: 1206
Joined: Wed Nov 02, 2011 9:07 pm

Re: Colorizing an image?

Post by coffee » Wed Jan 25, 2012 10:14 am

Thank you bartbes,
adding this related info
viewtopic.php?f=4&t=6119&p=44713
Facilited Escape seem to use additive blend (I guess in explosions/rocket trail)
http://nova-fusion.com/games/facilitated-escape/
viewtopic.php?f=5&t=3532

User avatar
kikito
Inner party member
Posts: 3150
Joined: Sat Oct 03, 2009 5:22 pm
Location: Madrid, Spain
Contact:

Re: Colorizing an image?

Post by kikito » Wed Jan 25, 2012 9:49 pm

A solution without shaders in pseudocode:

Code: Select all

function colorize(image, color)
  local result = makeAnImageOfOneColor(color, image:getDimensions())
  love.graphics.setcolor(255,255,255,128) -- notice the alpha here
  drawInImage(result, image)
  setPixelsToSameAlpha(result, image)
  return result
end
In other words: start with a rectangle of the color you want to use, paste the image on it with some alpha, and then set the alpha of the resulting image to the alpha that the original image had. That should do it.
Last edited by kikito on Thu Jan 26, 2012 5:17 pm, edited 1 time in total.
When I write def I mean function.

coffee
Party member
Posts: 1206
Joined: Wed Nov 02, 2011 9:07 pm

Re: Colorizing an image?

Post by coffee » Wed Jan 25, 2012 11:34 pm

kikito wrote: love.graphics.setcolor(255,255,255,0.5) -- notice the alpha here
I didn't even thought that value could be possible. I really must check what effect that makes :D
Seems a good theoretical formula. However If thinking well that will only work well with images without transparency right? (because layering two or more graphics with alphas will "merge" colors and "contaminate" the transparent zones I think). But I could thinking in a wrong way if setPixelsToSameAlpha(result, image) only operate in "solid" pixels and don't paint the alpha pixels.

EDITED Maybe you thiking detect first if that point have alpha and paint it or not kikito?

User avatar
Jasoco
Inner party member
Posts: 3639
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: Colorizing an image?

Post by Jasoco » Thu Jan 26, 2012 2:23 am

Keep in mind this is being used in my Raycasting engine and I'd have to apply this effect to every single quad and sprite being drawn on screen which ends up being at least 640-1040 draw calls on 640 mode. (Depending on whether floors and ceilings are being drawn) It would be better if setColor could colorize an image. I don't know why Löve doesn't have such a simple obvious image manipulation method built-in.

If I have to draw an image twice, that is a failure because it slows the framerate so much when I'm drawing 840 images twice. (Which I was at first and have since stopped doing to keep things simple)

Right now I can darken an image. But that's it. It makes it work with depth in dark areas, but what about white fog or really cool lighting effects. Green for slime. Red for fire or hot areas. Make it fade between red and black for alarms. Shame.

User avatar
tentus
Inner party member
Posts: 1059
Joined: Sun Oct 31, 2010 7:56 pm
Location: Appalachia
Contact:

Re: Colorizing an image?

Post by tentus » Thu Jan 26, 2012 4:43 am

kikito wrote:A solution without shaders in pseudocode:

Code: Select all

function colorize(image, color)
  local result = makeAnImageOfOneColor(color, image:getDimensions())
  love.graphics.setcolor(255,255,255,128) -- notice the alpha here
  drawInImage(result, image)
  setPixelsToSameAlpha(result, image)
  return result
end
In other words: start with a rectangle of the color you want to use, paste the image on it with some alpha, and then set the alpha of the resulting image to the alpha that the original image had. That should do it.
EDIT: FIXED.
Last edited by tentus on Thu Jan 26, 2012 7:41 pm, edited 1 time in total.
Kurosuke needs beta testers

User avatar
kikito
Inner party member
Posts: 3150
Joined: Sat Oct 03, 2009 5:22 pm
Location: Madrid, Spain
Contact:

Re: Colorizing an image?

Post by kikito » Thu Jan 26, 2012 5:17 pm

tentus wrote:Is 1/512th even a valid value for alpha? Shouldn't it be 128?
Yes! Fixing on my previous post.
tentus wrote:Keep in mind this is being used in my Raycasting engine and I'd have to apply this effect to every single quad and sprite being drawn on screen
Then my solution clearly doesn't work for you. My assumption was that you would be able to precalculate the colorized versions in advance.
When I write def I mean function.

Post Reply

Who is online

Users browsing this forum: Kev, MrFariator and 7 guests