Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Codea Gradient Creator (with editor)

edited August 2013 in General Posts: 2,820

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!

Comments

  • Posts: 2,820

    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
  • Posts: 257

    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

  • Posts: 257

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

  • Posts: 2,820

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

  • Posts: 23

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

  • Posts: 2,820

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

Sign In or Register to comment.