Custom background

Questions
1

Hey, I was wondering if I can create a custom background. (i.e a picture from my camera roll, or a sprite)
Something that is not a plain color. Also, can the background be moving?

Thanks in advance.

2

They way I understand it, this functionality will be available in version 1.4 due shortly

3

There is no built in functions for this stuff, but you can use a sprite and tile it or use meshes to make a gradient or something.I have a tile image class that I haven’t shared yet. You have interest in that?

4

Sure, how would I do a gradient? I hope 1.4 had that.

5

You can draw a gradient yourself using an image object.

size = 256
grad = image(size, size)
for y=1,size do
    f = 255.0 * y / size
    for x=1,size do 
        grad:set(x,y,color(f, f, f, 255))
    end
end

Meanwhile in the start of draw…

sprite(grad, 0, 0, WIDTH, HEIGHT)

I haven’t run this code specifically but I think it should work. You can adjust the set code to get different gradients.

6

I’d suggest not using an image of WIDTH and HEIGHT dimensions — you only need an image 256x256 and then can stretch it to the dimensions you need. For a gradient it will look identical and it will perform better and use less memory.

7

Updated the code to reflect what @simeon said

8

If you are stretching the image, you can also just make the width 1, and cut out a for loop.

Here is a slightly more advanced example, which takes 2 colors or hex values and creates a gradient with an optional height, which defaults to 256:

-- Utils

function createGradient(topColor, bottomColor, height)
    -- If height is not specified, default to 256
    height = height or 256

    -- Get the start and end color values
    local r1, g1, b1, a1 = parseRGBA(bottomColor)
    local r2, g2, b2, a2 = parseRGBA(topColor)
    
    -- If both alpha values are 0, default to full alpha
    if a1 == 0 and a2 == 0 then
        a1, a2 = 255, 255
    end

    -- Calculate the gradient increments
    local ai = (a2 - a1) / height
    local ri = (r2 - r1) / height
    local gi = (g2 - g1) / height
    local bi = (b2 - b1) / height
    
    -- Build the gradient
    local grad = image(1, height)
    for y = 1, height do
        local a = math.floor(a1 + (y * ai))
        local r = math.floor(r1 + (y * ri))
        local g = math.floor(g1 + (y * gi))
        local b = math.floor(b1 + (y * bi))
        grad:set(1, y, color(r, g, b, a))
    end
    return grad
end

function parseRGBA(value)
    if type(value) == type(0) then
        -- Parse values such as 0xffff0000, which is red with full alpha
        local a = math.floor(value / (256 ^ 3)) % 256
        local r = math.floor(value / (256 ^ 2)) % 256
        local g = math.floor(value / (256 ^ 1)) % 256
        local b = math.floor(value / (256 ^ 0)) % 256
        return r, g, b, a
    elseif value ~= nil then
        -- If a color was passed in, return the values
        return value.r or 0, value.g or 0, value.b or 0, value.a or 255
    end
    -- Default to black
    return 0, 0, 0, 255
end

To create a gradient from blue to red you can do either:

gradient = createGradient(0xff0000, 0x0000ff)

Or:

gradient = createGradient(color(255, 0, 0), color(0, 0, 255))

Then draw with this:

sprite(gradient, WIDTH/2, HEIGHT/2, WIDTH, HEIGHT)

Here is a full example with a little extra animation: :wink:

-- TestGradient

function setup()
    -- Create the background gradient
    gradient = createGradient(0x1f3f4f, 0x0f8f7f)
    
    -- Set up variables for logo animation
    logoTime = 1.5
    logoTheta = 0
    logoScale = 0.05
    incScale = 2 / logoTime
    incTheta = 1100 / logoTime
end

function draw()
    -- Calculate the center of the screen
    center = vec2(WIDTH/2, HEIGHT/2)
    
    -- Draw the gradient
    sprite(gradient, center.x, center.y, WIDTH, HEIGHT)
    
    -- Animate the logo
    tickLogo(DeltaTime)
end

function tickLogo(deltaSeconds)
    if logoTime > 0 then
        logoTime = logoTime - deltaSeconds
        logoTheta = logoTheta + (incTheta * deltaSeconds)
        logoScale = logoScale + (incScale * deltaSeconds)
    end
    pushMatrix()
    translate(center.x, center.y)
    rotate(logoTheta)
    scale(logoScale)
    sprite("Cargo Bot:Codea Icon")
    popMatrix()
end
9

@Striblezz - you may not have noticed, but this discussion is 2 years old. In this situation, it’s better to start a new post! :wink:

10

Fair enough, but this is the post I found when I searched for how to make a gradient.
So adding to the conversation seemed appropriate, since I started with the example above.

11

@Stribblezz - the folks here prefer you to start a new topic in this situation, please

But your input is very welcome, thank you