Blend mode: Color

totebo

I'd like to reproduce this effect in Gideros:



This is from Sketch 3 on Mac, but works identically in Photoshop. I've been playing around with the blend modes Gideros offers, but it's hit and miss since I don't understand them.

totebo

I think I've tried all combos of blend modes now, giving up!

HubertRonald

Hi @totebo
I attach a little code (with its respective graphic resources) but still I don't know like put images in the position I want, but I've got effect than you want.. although the letters do not completely take the color of the respective color layer

Maybe you have to play with the colors a little until the contrast to be nice.

Very important you look that the alpha is 1 for the colors layers... No trap of course

HubertRonald

Here screenshot!

totebo

Thanks a lot @HubertDonald! This is cool, but not quite what I was after. I'm looking for something that behaves like a Photoshop "Color" blend mode. It takes the blend layer and tints all layers underneath to match the colour.

Check out the modified project (with a multicoloured target) and screenshot.

HubertRonald

Hi @totebo (now if I wrote well your name)
I was check your post and I imagined something like you posted but I believe that it will take me some more time understand...

I checked two Render functions:

(buffer) = RenderTarget:getPixels(x, y, w, h) (numberColor), (numberAlpha) = RenderTarget:getPixel(x, y)

The first value (Buffer) than I got it was strange when I tried print(type(buffer), buffer) my output was string, ....... a lots blacks diamonds with a "?" on its center

The second was a little more interesting

numberColor is a decimal so I need convert it to hex
http://lua-users.org/lists/lua-l/2004-09/msg00054.html

-- If in the future the previous link is broken function DEC_HEX(IN) local B,K,OUT,I,D=16,"0123456789ABCDEF","",0 while IN>0 do I=I+1 IN,D=math.floor(IN/B),math.mod(IN,B)+1 OUT=string.sub(K,D,D)..OUT end return OUT end

It's really nice because it takes right color on the exact position than you indicated.. The problem I see it is that I would have to map point by point and paint or draw each one of them and I think it is not very practical in a game about execution with this technique... There must be something that is escaping me

antix

What about...

local function toHex(number) local strf = string.format return strf('%X, number) end

Maybe the effect is possible with a shader? I agree though that it is sub optimal reading, processing, and writing every pixel

HubertRonald

Hi, there! @antix

RenderTarget:getPixel(x, y) give you a decimal number, for example the color rgb(172,213,96)

RenderTarget:getPixel(x, y) give you numberColor=11326816 as it's a decimal number so you need convert it to hex so you've got ACD560

Well "Shader option" sincerely still I don't try it although we can see this little code and take some ideas:
https://www.npmjs.com/package/glsl-blend-overlay

DEMO BLEND OVERLAY
http://jam3.github.io/glsl-blend-overlay/

antix

@HubertRonald, okay I get you now

So why does it need converting? If you have a function that wants you to supply an RGB color you can just pass it a decimal number anyway.

Is there some other processing you need to do?

In any case you could use the following...

require("bit")   function colorToHEX(color) local strf = string.format local r = strf('%X', ((color >> 16) & 255)) local g = strf('%X', ((color >> 8) & 255)) local b = strf('%X', (color & 255)) return r, g, b, r .. g .. b end   local r, g, b, rgb = colorToHEX(16746564) -- decimal equivelent of 0xff8844 print(r, g, b, rgb)

HubertRonald

Hi @antix as I work my arts in adobe illustrator I take colors in hex from there to Gideros because it's very lazy take colors in r,g,b and paste these on Gideros one per one... Nothing esoteric is just my current workflow

hgy29

I checked two Render functions:

(buffer) = RenderTarget:getPixels(x, y, w, h) (numberColor), (numberAlpha) = RenderTarget:getPixel(x, y)

The first value (Buffer) than I got it was strange when I tried print(type(buffer), buffer) my output was string, ....... a lots blacks diamonds with a "?" on its center

@HubertRonald if you intend to do CPU based image blending then the first function is better: it fetches all pixels in one call, the returned string contains all R,G,B,A values of the pixels in each byte of the string.
Once modified you can send that buffer back to Texture.new() to create a texture from your modified pixels.

But of course a shader is far more efficient!

totebo

Thanks for this guys. It always seems comes back to the magical land of shaders!