How can I make this more CPU efficient

[JJSax]

Hey I am making a color picker program. I have 3 bars to indicate RGB and I have each bar show what the color would be if I moved the slider to whatever position. My method works, but kills the CPU.

As of right now it basically goes through RGB like this

Code: Select all

for i = 0, 255 do
  love.graphics.setColor(i, g, b)
  love.graphics.line(5, i, 15, i)
end

It does this for every color every time it draws... not ideal, but functional. How do I make it more efficient?

Thanks in advance!

[rmcode]

Render the gradients to a canvas when you load up your program. Then you can just draw the canvas afterwards, which is super fast.

[CaptainMaelstrom]

rmcode's suggestion is good. Alternatively, you could use a shader:
https://love2d.org/wiki/Tutorial:Introd ... to_Shaders

[rmcode]

Here is a quick example of how you could use a canvas to do it:

Code: Select all

local canvas;
function love.load()
    canvas = love.graphics.newCanvas();
    canvas:renderTo(function()
        for i = 0, 255 do
            love.graphics.setColor(i, 0, 0);
            love.graphics.line(10, 10 + i, 30, 10 + i);
            love.graphics.setColor(255, 255, 255);
        end

        for i = 0, 255 do
            love.graphics.setColor(0, i, 0);
            love.graphics.line(40, 10 + i, 60, 10 + i);
            love.graphics.setColor(255, 255, 255);
        end

        for i = 0, 255 do
            love.graphics.setColor(0, 0, i);
            love.graphics.line(70, 10 + i, 90, 10 + i);
            love.graphics.setColor(255, 255, 255);
        end
    end)
end

function love.draw()
    love.graphics.draw(canvas);
end

rmcode's suggestion is good. Alternatively, you could use a shader:
https://love2d.org/wiki/Tutorial:Introd ... to_Shaders

I didn't even think about using shaders! Nice

[Muris]

I saw a very cheat & genius methog in Quickie. vrld uses canvas of 4 pixels, where he sets each corner for the value of color, then scales the canvas to the size and using correct filter, it creates gradient. Now to change the color you only need to change 4 values in the canvas. A side note tho, I doubt its easy to get non-linear interpolation from corners with this method, but I doubt that is really neccessary either.

Here is the style file from Quickie:
https://github.com/vrld/Quickie/blob/ma ... efault.lua

[bartbes]

I'm fairly sure that was written before Meshes, because they provide a clean way to do this.

Code: Select all

local gradient = love.graphics.newMesh{
    {0, 0, 0, 0, r1, g1, b1},
    {w, 0, 0, 0, r2, g2, b2},
    {w, h, 0, 0, r3, g3, b3},
    {0, h, 0, 0, r4, g4, b4},
}

Similar to the previous method, with w/h set to 1, you can just scale it to right size, or you can pass the actual size if it's constant. Also like above, by changing the rgb values for the corner you can create different gradients. Additionally, though, you could insert extra vertices to create more gradients.