Some kind of Gradient, help me with optimize , please

Questions
1

Hello guys, i made some kind of gradient/dynamic background.
But then it goes above the screen, it slows down each row, what can i do to optimize that ?
Here is two variants of code

First


--# Main
-- Gradient
displayMode(FULLSCREEN)
-- Use this function to perform your initial setup
function setup()
    colors = {}
    for x = 1,10 do
        colors[x] = {}
        for y = 1,8 do
     --   colors[x][y] = color(255,x*25,0)
        colors[x][y] = vec3(255,0,0)
        end
    end
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    rectMode(CENTER)
    local time = 0.5
    background(40, 40, 50)
    for k,v in pairs(colors) do
        for a,b in pairs(v) do
        pushStyle()
        fill(b.x,b.y,0)
        b.x = b.x + DeltaTime
        b.y = b.y + time
        if b.y > 255 or b.y < 0 then
            b.y = 0
            time = -time
            
            end
        rect(-50+k*100,-50+a*100,150,150)
        popStyle()
        
        end
    end
    -- This sets the line thickness
    

    -- Do your drawing here
    
end

Second


--# Main
-- Gradient
displayMode(FULLSCREEN)
-- Use this function to perform your initial setup
function setup()
    colors = {}
    for x = 1,10 do
        colors[x] = vec3(255,0,0)
        end
    
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    rectMode(CENTER)
    local time = 0.5
    background(40, 40, 50)
    for k,b in pairs(colors) do
        for a = 1,10 do
        pushStyle()
        fill(b.x,b.y,0)
        b.x = b.x + DeltaTime
        b.y = b.y + time
        if b.y > 255  then
            b.y = 0
            time = -time
            
            end
        rect(-50+k*100,-50+a*100,150,150)
        popStyle()
        
        end
    end
    -- This sets the line thickness
    

    -- Do your drawing here
    
end
2

Here’s a version based on the mesh example that ships with codea. Not sure if it is what you are after but might get you thinking in an alternative direction.
Shaders may also be a way forward but haven’t looked at them much.


function setup()
    displayMode(FULLSCREEN)
    -- Create a new empty mesh
    triMesh = mesh()
    col1=color(255,0,0)
    timer=0
    coladjust=1
    col2=color(0,timer,timer)
    -- This is an array of colours we'll assign to the triMesh vertices
    triCol = { col1,col2,col2,col1,col2,col2}
    -- Assign colors to the mesh, there must be the same number of colours as vertices
    triMesh.colors = triCol
end

-- This function gets called once every frame
function draw()
    -- Dark background color
    background(20, 20, 40)
    
    local topleft = vec2(0,HEIGHT)
    local bottomleft = vec2(0,0)
    local bottomright = vec2(WIDTH,0)
    local topright=vec2(WIDTH,HEIGHT)
    -- Set points on mesh
    triMesh.vertices = { topleft,
    bottomleft,
    bottomright,bottomright,topleft,topright }
    --cycle the colors
    timer = timer + coladjust
    if timer>255 or timer<0 then
        coladjust = coladjust * -1
    end
    col2=color(0,timer,timer)
    triMesh.colors={col1,col2,col2,col2,col1,col1}
    -- Draw the mesh that we setup
    triMesh:draw()
    
end
3

I did post some gradient code in the examples / code sharing section.
The best way I found was to create an image either 1 pixel wide and as long as you want or 1 pixel high and as wide as you want. Use the image:set() function to create your gradient and then you simply scale the image to the size you want when you draw it. It should be more than fast enough for your needs.

4

@West thank you, but im not familiar with meshes. So ill discover it soon

5

@TechDojo thank you

6

see codea wiki for books by Ignatz on meshes and shaders