Colorizing an image?

[Jasoco]

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.

[MarekkPie]

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]

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.

[bartbes]

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]

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

[kikito]

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.

[coffee]

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
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?

[Jasoco]

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.

[tentus]

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.

[kikito]

Is 1/512th even a valid value for alpha? Shouldn't it be 128?

Yes! Fixing on my previous post.

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.