Page 1 of 2
Gradients (gradient as fill)
Posted: Tue Mar 12, 2024 5:37 am
by 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.
Re: Gradients (gradient as fill)
Posted: Tue Mar 12, 2024 6:26 am
by darkfrei
dusoft wrote: ↑Tue Mar 12, 2024 5:37 am
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
Re: Gradients (gradient as fill)
Posted: Tue Mar 12, 2024 9:39 am
by 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.
Re: Gradients (gradient as fill)
Posted: Tue Mar 12, 2024 2:03 pm
by 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.
Re: Gradients (gradient as fill)
Posted: Tue Mar 12, 2024 3:48 pm
by darkfrei
dusoft wrote: ↑Tue Mar 12, 2024 9:39 am
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
Re: Gradients (gradient as fill)
Posted: Tue Mar 12, 2024 4:33 pm
by dusoft
Thanks for your suggestions, I will be staying with scaled up overlapping polygons for now.
Re: Gradients (gradient as fill)
Posted: Fri Mar 15, 2024 10:57 am
by RNavega
dusoft wrote: ↑Tue Mar 12, 2024 4:33 pm
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?
Re: Gradients (gradient as fill)
Posted: Fri Mar 15, 2024 12:09 pm
by 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.
Re: Gradients (gradient as fill)
Posted: Sun Mar 17, 2024 5:20 am
by 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...
Re: Gradients (gradient as fill)
Posted: Sun Mar 17, 2024 12:32 pm
by RNavega
Nice, I see what you're after. Thank you for the images.