Background Graident

Does anyone know the code to change the plain color backGround ( ) to a Graident background ? The plain background is so boring, it would be nice to bring that background to life…

I don’t think background() supports a gradient, but since you already have an image of a gradient, just import the image and draw it yourself as a sprite() instead of calling background()!

@kendog400 Here’s something I threw together for screen gradients. Mix the different parameters to get different colors. The top parameters show the colors at the top and get lighter as they go down. The bottom parameters show the colors at the bottom and get lighter as they go up. Tap the save parameter to save the screen to the Dropbox folder. The file name is made from the parameters that are set. You can use the Sprite command instead of background to get a gradient background.

displayMode(OVERLAY)

function setup()
    parameter.boolean("redTop",false)
    parameter.boolean("greenTop",false)
    parameter.boolean("blueTop",false)
    parameter.boolean("redBottom",false)
    parameter.boolean("greenBottom",false)
    parameter.boolean("blueBottom",false)
    parameter.action("save",savePic)
    img=image(WIDTH,HEIGHT)
end

function draw()
    background(0)
    d=256/HEIGHT
    r1,g1,b1,r2,g2,b2=0,0,0,0,0,0
    if redBottom then
        r2=255
    end
    if greenBottom then
        g2=255
    end
    if blueBottom then
        b2=255
    end
    
    setContext(img)
    for z=1,HEIGHT do
        str=""
        if redTop then
            str=str.."rt"
            r1=r1+d
        end
        if greenTop then
            str=str.."gt"
            g1=g1+d
        end
        if blueTop then
            str=str.."bt"
            b1=b1+d
        end
        if redBottom then
            str=str.."rb"
            r2=r2-d
        end
        if greenBottom then
            str=str.."gb"
            g2=g2-d
        end
        if blueBottom then
            str=str.."bb"
            b2=b2-d
        end
        stroke(r1+r2,g1+g2,b1+b2)
        strokeWidth(2)
        line(0,z,WIDTH,z)
    end
    setContext()
    
    sprite(img,WIDTH/2,HEIGHT/2)
end

function savePic()
    print(str," saved")
    saveImage("Documents:"..str,img)
end

If you type “gradient” into the search field there are some great resources on it. If you want a linear fade between 2 colours, the most efficient approach is to have a mesh with a rect with different colours set at its corners, similar to the approach here https://codea.io/talk/discussion/3497/codea-gradient-creator-with-editor
Though that’s quite old code, nowadays you could use the addRect method

If you want gradients between multiple colours, or ones that curve, a shader is the best way to go I think: https://codea.io/talk/discussion/6772/multiple-step-colour-gradient-shader

Check out this approach too (tho the videos don’t seem to work now) https://codea.io/talk/discussion/6917/color-gradients

Here’s something similar to what I have above, but uses a mesh.

displayMode(OVERLAY)

function setup()
    img=image(WIDTH,HEIGHT)
    parameter.integer("upperRed",0,255,255)
    parameter.integer("upperGreen",0,255,0)
    parameter.integer("upperBlue",0,255,255)
    parameter.integer("lowerRed",0,255,0)
    parameter.integer("lowerGreen",0,255,255)
    parameter.integer("lowerBlue",0,255,0)
    m=mesh()
    m:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end

function draw()
    m:color(1,upperRed,upperGreen,upperBlue)
    m:color(2,lowerRed,lowerGreen,lowerBlue)
    m:color(3,lowerRed,lowerGreen,lowerBlue)
    m:color(4,upperRed,upperGreen,upperBlue)
    m:color(5,lowerRed,lowerGreen,lowerBlue)
    m:color(6,upperRed,upperGreen,upperBlue)
    m:draw()
end

Here’s another version that uses a mesh. You can change the color of the 4 corners plus the center. It uses a lot of parameters, so you’ll have to scroll the parameters to see then all. It uses an overlay, so you can tap the upper left < icon to show the full screen. llr is lower left red. lrr is lower right red. cr is center red. ulr is upper left red. urr is upper right red.

displayMode(OVERLAY)

function setup()
    parameter.integer("llr",0,255,255)
    parameter.integer("llg",0,255,0)
    parameter.integer("llb",0,255,0)
    parameter.integer("lrr",0,255,0)
    parameter.integer("lrg",0,255,255)
    parameter.integer("lrb",0,255,0)
    parameter.integer("cr",0,255,255)
    parameter.integer("cg",0,255,255)
    parameter.integer("cb",0,255,255)
    parameter.integer("ulr",0,255,0)
    parameter.integer("ulg",0,255,0)
    parameter.integer("ulb",0,255,255)
    parameter.integer("urr",0,255,255)
    parameter.integer("urg",0,255,255)
    parameter.integer("urb",0,255,0)
    m=mesh()
    m.vertices={vec2(0,0),vec2(WIDTH,0),vec2(WIDTH/2,HEIGHT/2),
        vec2(0,HEIGHT),vec2(WIDTH,HEIGHT),vec2(WIDTH/2,HEIGHT/2),
        vec2(0,HEIGHT),vec2(0,0),vec2(WIDTH/2,HEIGHT/2),
        vec2(WIDTH,HEIGHT),vec2(WIDTH/2,HEIGHT/2),vec2(WIDTH,0)}
    m:setColors(0,0,0,255)    
end

function draw()
    background(40, 40, 50)
    m:color(1,llr,llg,llb)
    m:color(2,lrr,lrg,lrb)
    m:color(3,cr,cg,cb)
    
    m:color(4,ulr,ulg,ulb)
    m:color(5,urr,urg,urb)
    m:color(6,cr,cg,cb)
    
    m:color(7,ulr,ulg,ulb)
    m:color(8,llr,llg,llb)
    m:color(9,cr,cg,cb)
    
    m:color(10,urr,urg,urb)
    m:color(11,cr,cg,cb)
    m:color(12,lrr,lrg,lrb)
    m:draw()
end

@kendog400 how about this?

-- Sky Background Shader

displayMode(FULLSCREEN) -- This function sets it to Fullscreen
function setup()
    BG = mesh()
    BG.shader = shader([[
uniform mat4 modelViewProjection;

attribute vec4 position;
attribute vec4 color;
attribute vec2 texCoord;

varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
void main()
{
 vColor = color;
 vTexCoord = texCoord;
 
 gl_Position = modelViewProjection * position;
}]],[[
precision highp float;
uniform lowp sampler2D texture;
varying lowp vec4 vColor;
varying highp vec2 vTexCoord;
void main()
{
    lowp vec4 col;
    lowp vec4 highCol = vec4(0.352,0.745,1,1); //90,190,255
    lowp vec4 lowCol = vec4(0.705,0.862,1,1); //180, 220, 255
        //lowCol = vec4(0.1,0.1,0.1,1); highCol = vec4(0.95,0.95,0.95,1);
    highp float size = 1.9;
    highp float dis = distance(vTexCoord,vec2(0.5,size * -1.0 + 0.40));
    highp float blur = 0.3;
    if (dis < size + blur) {
        lowp float min = size;
        if (dis > min) {
            lowp float bri = (dis - min) / (blur);
            lowp vec4 final = lowCol * (1. - bri) + highCol * bri;
            final.a = 1.;
            col = final;
        }
        else col = lowCol;
    }
    else {col = highCol;}
    gl_FragColor = col;
}]])
    BG:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end

-- This function gets called once every frame
function draw()
    BG:draw()
end

all you have to do to use this sky background is this:

  1. copy-paste all the code in my example’s setup into your game’s setup function
  2. replace background(40,40,50) with BG:draw() in your games draw function

That’s it! :slight_smile: