Howdy, Stranger!

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

Background Graident

in Questions Posts: 83

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....

11.jpeg 52K

Comments

  • Posts: 35

    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()!

  • dave1707dave1707 Mod
    edited July 29 Posts: 6,392

    @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
    
  • Posts: 2,011

    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

  • dave1707dave1707 Mod
    Posts: 6,392

    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
    
  • dave1707dave1707 Mod
    edited July 31 Posts: 6,392

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

    @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! :)

Sign In or Register to comment.