Codea Gradient Creator (with editor)

General
1

Hello,
Anyone could write this code in a few minutes (like I did), but I thought I might as well share it for the new coders. Here it is:

function setup()
    parameter.watch("1/DeltaTime")
    m = getMesh(vec2(WIDTH,HEIGHT),
    color(255, 0, 0, 255),
    color(0, 52, 255, 255)
    )
end

function draw()
    background(0, 0, 0, 255)
    
    m.setSize(
        vec2(
            math.random()*WIDTH,
            math.random()*HEIGHT
        )
    )
    
    m.setGradient(
        color(math.random()*255,math.random()*255,math.random()*255),
        color(math.random()*255,math.random()*255,math.random()*255)
    )
    
    pushMatrix()
    translate(WIDTH/2,HEIGHT/2)
    m:draw()
    popMatrix()
end

function getMesh(size,color1,color2)
    local m = mesh()
    
    m.setSize = function(size)
        m.vertices = {
            vec2(-size.x/2,-size.y/2),
            vec2(-size.x/2,size.y/2),
            vec2(size.x/2,-size.y/2),
            
            vec2(size.x/2,size.y/2),
            vec2(-size.x/2,size.y/2),
            vec2(size.x/2,-size.y/2)
        }
    end
    
    m.setGradient = function(color1,color2)
        m.colors = {
            color2,
            color1,
            color2,
            
            color1,
            color1,
            color2
        
        }
    end
    
    m.setSize(size)
    m.setGradient(color1,color2)
    
    return m
end

I might add angles and multiple stops at some point, but I don’t have a need for that, so I’ll stick with 2 colors.
Thanks!

2

Quick update: I made a simple editor that allows you to choose the background, start color, end color, size, and blending mode and can export the code. Here it is:


function setup()
    parameter.watch("1/DeltaTime")
    
    parameter.color("bgColor",color(255,255,255))
    parameter.color("startColor",color(255,255,255))
    parameter.color("endColor",color(0,0,0))
    parameter.number("gradientWidth",1,WIDTH,WIDTH)
    parameter.number("gradientHeight",1,HEIGHT,HEIGHT)
    parameter.integer("blendingMode",0,2,0)
    parameter.action("Generate code",function()
                                print("getMesh(vec2("..tostring(gradientWidth)..","..tostring(gradientHeight).."),color"..tostring(startColor)..",color"..tostring(endColor)..")")
                            end)
    
    
    m = getMesh(vec2(gradientWidth,gradientHeight),
    color(255, 0, 0, 255),
    color(0, 52, 255, 255)
    )
end

function draw()
    background(bgColor)
    
    
    m.setSize(vec2(gradientWidth,gradientHeight))
    m.setGradient(startColor,endColor)
    
    pushStyle()
    pushMatrix()
    translate(WIDTH/2,HEIGHT/2)
    blendMode(blendingMode)
    m:draw()
    popStyle()
    popMatrix()
end

function getMesh(size,color1,color2)
    local m = mesh()
    
    m.setSize = function(size)
        m.vertices = {
            vec2(-size.x/2,-size.y/2),
            vec2(-size.x/2,size.y/2),
            vec2(size.x/2,-size.y/2),
            
            vec2(size.x/2,size.y/2),
            vec2(-size.x/2,size.y/2),
            vec2(size.x/2,-size.y/2)
        }
    end
    
    m.setGradient = function(color1,color2)
        m.colors = {
            color2,
            color1,
            color2,
            
            color1,
            color1,
            color2
        
        }
    end
    
    m.setSize(size)
    m.setGradient(color1,color2)
    
    return m
end
3

Very useful the gradient function for buttons and the editor.
I’ve seen rounded button and gloss button it was interesting to add.
I will use for my project of interactive menu or spherical menu.
thanks a lot

4

it’s an vertical gradient, and an horizontal gradient would be interesting.

5

@hpsoft - To get horizontal gradients (for now), just use the “rotate” function.

6

Is it possible to get radial gradients??? the gradient emanating out from a single point… so may uses for that :open_mouth: anyone got any ideas?

7

@Ruttyj - It should be pretty easy, I just don’t have time for it. I might look into it a bit, though.