Color Blending

General
1

Does anyone know how to seamlessly transition colors for the color of the screen so it looks like you’re blending the colors together? I’ve tried this with small rectangles to produce the effect, but I’m wondering if there is a better way to endlessly blend colors.

2

You could try creating a square mesh, and then setting the mesh.colors so they blend.

Edit: here’s an example.

-- Color Blending

function setup()
    m = mesh()
    m:addRect(WIDTH / 2, HEIGHT / 2, WIDTH, HEIGHT)
    m.colors = {color(255), color(255), color(255, 0, 0), color(255), color(255, 0, 0), color(255, 0, 0)}
end

function draw()
    background(0)
    
    strokeWidth(5)
    
    m:draw()
end
3

@SkyTheCoder. Thank you! However, I was thinking about an animated version of that where the colors would move across the screen.

4

@YoloSwag Something like this?

-- Color Blending

function setup()
    m = mesh()
    m:addRect(WIDTH / 2, HEIGHT / 2, WIDTH, HEIGHT)
    m.colors = {color(0, 255, 0), color(0, 255, 0), color(255, 0, 0), color(0, 255, 0), color(255, 0, 0), color(255, 0, 0)}
    m2 = mesh()
    m2:addRect(WIDTH / 2, HEIGHT / 2, WIDTH, HEIGHT)
    m2.colors = {color(255, 0, 0), color(255, 0, 0), color(0, 255, 0), color(255, 0, 0), color(0, 255, 0), color(0, 255, 0)}
    
    bg = 0
    
    offset = 0
end

function draw()
    background(0)
    
    strokeWidth(5)
    
    offset = offset + DeltaTime * 256
    
    if math.abs(offset % WIDTH - (offset - DeltaTime * 200) % WIDTH) > DeltaTime * 200 then
        bg = (bg + 1) % 2
        if bg == 0 then
            m.colors = {color(0, 255, 0), color(0, 255, 0), color(255, 0, 0), color(0, 255, 0), color(255, 0, 0), color(255, 0, 0)}
            m2.colors = {color(255, 0, 0), color(255, 0, 0), color(0, 255, 0), color(255, 0, 0), color(0, 255, 0), color(0, 255, 0)}
        elseif bg == 1 then
            m.colors = {color(255, 0, 0), color(255, 0, 0), color(0, 255, 0), color(255, 0, 0), color(0, 255, 0), color(0, 255, 0)}
            m2.colors = {color(0, 255, 0), color(0, 255, 0), color(255, 0, 0), color(0, 255, 0), color(255, 0, 0), color(255, 0, 0)}
        end
    end
    
    translate(-(offset % WIDTH), 0)
    
    m:draw()
    
    translate(WIDTH, 0)
    
    m2:draw()
end
5

here you may learn some about color blending http://codea.io/talk/discussion/4989/blendmodes