Gradients

gradient

Synopsis

gradient {color1, color2, color3, ..., direction = 'horizontal' or 'vertical'}

Creates a gradient object (really just an image) from a table of colors to be evenly spaced throughout the gradient, in the direction specified by the "direction" key of the parameter table.

Source

function gradient(colors)
    local direction = colors.direction or "horizontal"
    if direction == "horizontal" then
        direction = true
    elseif direction == "vertical" then
        direction = false
    else
        error("Invalid direction '" .. tostring(direction) "' for gradient.  Horizontal or vertical expected.")
    end
    local result = love.image.newImageData(direction and 1 or #colors, direction and #colors or 1)
    for i, color in ipairs(colors) do
        local x, y
        if direction then
            x, y = 0, i - 1
        else
            x, y = i - 1, 0
        end
        result:setPixel(x, y, color[1], color[2], color[3], color[4] or 255)
    end
    result = love.graphics.newImage(result)
    result:setFilter('linear', 'linear')
    return result
end

drawinrect

Synopsis

drawinrect(img, x, y, w, h, r, ox, oy, kx, ky)

A convenience function to draw scaled images in a rectangle of absolute size (rather than with a size relative to the size of the image, which is what love.graphics.draw() does). Useful for gradients, because you will almost always want to draw them scaled, and you don't want their bounds to change if the number of colors does.

Source

function drawinrect(img, x, y, w, h, r, ox, oy, kx, ky)
    return -- tail call for a little extra bit of efficiency
    love.graphics.draw(img, x, y, r, w / img:getWidth(), h / img:getHeight(), ox, oy, kx, ky)
end

Examples

draw a 100x100 horizontal rainbow (that is, red on top, purple on bottom) in the center of the screen

require "gradient"

local rainbow = gradient {
    direction = 'horizontal';
    {255, 0, 0};
    {255, 255, 0};
    {0, 255, 0};
    {0, 255, 255};
    {0, 0, 255};
    {255, 0, 0};
}

function love.draw()
    drawinrect(rainbow, love.graphics.getWidth() / 2 - 50, love.graphics.getHeight() / 2 - 50, 100)
end

draw a vertical greyscale spectrum (that is, black on left, white on right) filling the whole screen

require "gradient"

local greyscale = gradient {
    direction = 'vertical';
    {0, 0, 0};
    {255, 255, 255};
}

function love.draw()
    drawinrect(greyscale, 0, 0, love.graphics.getWidth(), love.graphics.getHeight())
end