Gradients (gradient as fill)

[dusoft]

Hi,

I have searched forums extensively as well as Stack Overflow to find out how to approach gradient drawing. I mostly need it for polygons at the moment, but I am sure it would be useful to have it for any shape.

I know there was a discussion regarding this and the best method so far is to use a 1x1px image.

Is there some internal plan to move gradients forward in addition to line and fill modes?

Maybe somebody from the LOVE developers can chip in?

Thanks.

[darkfrei]

Hi,

I have searched forums extensively as well as Stack Overflow to find out how to approach gradient drawing. I mostly need it for polygons at the moment, but I am sure it would be useful to have it for any shape.

I know there was a discussion regarding this and the best method so far is to use a 1x1px image.

Is there some internal plan to move gradients forward in addition to line and fill modes?

Maybe somebody from the LOVE developers can chip in?

Thanks.

Mesh! https://love2d.org/wiki/Mesh

How to make lights with shadows with gradient, but without shaders:
viewtopic.php?p=244845#p244845

Code: Select all

function love.load()
	vertices = {
		{100, 50, 0,0, 1,0,0},
		{700, 400, 0,0, 0,1,0},
		{50, 550, 0,0, 0,0,1},
	}
	mesh = love.graphics.newMesh( vertices, mode, usage )
end

function love.draw()
	love.graphics.draw (mesh)
end

[dusoft]

Meshes seem to be unnecessary complicated for my use - I am neither using images, nor canvas. I am working with 2D, not 3D.
I am drawing polygons directly and using physics functions. I can simulate gradients via repeated drawing of multiplied polygons, but I will have to benchmark performance here for larger numbers.

[pgimeno]

I make gradients with a 2x1 image and a quad.

Code: Select all

local gradientData = love.image.newImageData(2, 1, 'rgba8',
  '\255\000\000' .. '\255' ..
  '\000\255\000' .. '\255')
local gradient = love.graphics.newImage(gradientData)
gradient:setFilter('linear', 'linear')
local gradientQuad = love.graphics.newQuad(0.5, 0, 1, 1, 2, 1)

function love.draw()
    -- Draw a 160x180 vertical gradient centred at 400,300
    love.graphics.draw(gradient, gradientQuad, 400, 300, math.rad(90), 180, 160, 0.5, 0.5)
end

If you want polygons with a gradient, I'm afraid darkfrei is right, you need meshes and possibly love.math.triangulate() to get a triangle mesh from the polygon. Also you'll need to set the UVs yourself appropriately. Or you can use a stencil to mask the gradient, or a shader.

[darkfrei]

Meshes seem to be unnecessary complicated for my use - I am neither using images, nor canvas. I am working with 2D, not 3D.
I am drawing polygons directly and using physics functions. I can simulate gradients via repeated drawing of multiplied polygons, but I will have to benchmark performance here for larger numbers.

Than you can use the meshes with texture?
https://github.com/darkfrei/love2d-lua- ... th-texture

[dusoft]

Thanks for your suggestions, I will be staying with scaled up overlapping polygons for now.

[RNavega]

Thanks for your suggestions, I will be staying with scaled up overlapping polygons for now.

Hi. How does that overlap thing work, can you describe it?

[dusoft]

You can see it on the screenshot (blue ones, yellow is the original polygon that was used for scaling up). I create couple of scaled up polygons of the same shape just drawing over each other (starting from the outside - from large to small). This efficiently creates a gradient, I can control how many polygons (gradient steps) to have.

PS: ignore the gray lines, I just use those for debug purposes.

[dusoft]

Even better examples with full polygon visible.

Gradient starts around the original polygon (boat shaped), but I could make it start around centroid point, this is just matter of setting the scale and drawing...

[RNavega]

Nice, I see what you're after. Thank you for the images.