# 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

Category:

- Snippets