Gradient ... effect ... shader?

[Gunroar:Cannon()]

I honestly don't know quack about shaders (okay, to be fair I understand their basics), but is there a shader that can achieve this effect with, let's say, color "red" or just this effect in general.

[BrotSagtMist]

Can you explain that with a before>after picture?
I dont get where that orange is supposed to come from.

[Gunroar:Cannon()]

Okay, like let's say this was in the before image


A simple orange color.

Then after it has this gradient effect from darker to lighter that makes the orange stand out.

[darkfrei]

Are you need the blur shader?

[marclurr]

This might give you somewhere to start. When i was testing locally img.png was a circle in that orange colour you posted. Everything else in the image was blank (i.e., rgba(0,0,0,0)).

This shader will blend any colour in the image with the value in 'c1' (red in my example), based on that pixel's distance to 'tl' (which I've just set to the mouse's normalised position in the window). The clamping is just there for demonstration, there are much better ways to do it. Comment it out and you get a perfectly smooth gradient.

Code: Select all

function love.load()
    img = love.graphics.newImage("img.png")
    effect = love.graphics.newShader [[
        extern vec2 tl = vec2(0,0);
        extern vec4 c1;
        vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
        {
            float a = distance(tl, texture_coords);

            // bad clamping example, but just for demonstration
            if (a < 0.25) {
                a = 0;
            } else if (a < 0.5) {
                a = 0.25;
            } else if (a < 0.75) {
                a = 0.5;

            } else if (a < 1) {
                a = 0.75;
            }
            vec4 s = Texel(texture, texture_coords);
            vec3 c = mix(c1.rgb, s.rgb, 1- a);
            return vec4(c.rgb, s.a);
        }
    ]]

    love.graphics.setShader(effect)
    effect:send("c1", {1,0,0,1})
end

function love.update()
    local x, y = love.mouse.getPosition()  
    effect:send("tl", {x/love.graphics.getWidth(),y/love.graphics.getHeight()})
end

function love.draw()
    love.graphics.draw(img, 0, 0)
end

[marclurr]

Your example actually might work and look better with something called an emission map. This video shows an example of how to do this in Unity, but the principle is the same in Love. You might then be able to use a gaussian blur or something similar on top of that to get the look you're after, or you can use shades of grey in your emission map to blend between your two colours (i.e., 0 would give red, 1 would give orange and any value in between would be a mix.

[darkfrei]

You can make nice gradients with meshes: https://github.com/darkfrei/love2d-lua- ... sh-01.love

[Gunroar:Cannon()]

Okay, okay. I see. So now I would need to blur the gradients. Hmmm. I'll check the meshes though not really sure how those might work.

[Gunroar:Cannon()]

You can make nice gradients with meshes: https://github.com/darkfrei/love2d-lua- ... sh-01.love

It's just blank for me.

[darkfrei]

You can make nice gradients with meshes: https://github.com/darkfrei/love2d-lua- ... sh-01.love

It's just blank for me.

https://github.com/darkfrei/love2d-lua- ... esh-01.png

https://github.com/darkfrei/love2d-lua- ... h/main.lua