Blending color rects

Questions
1

in my puzzle game i have colored rects i want to blend / mix. for instance mixing yellow and blue should turn those rects into Green rects. i also want this to happen over time as well, so the actual color change should take 1 second before its complete. im looking for ideas on how i can do this. my own thoughts seem super complex :slight_smile:

here is parts of the code

brush class

Brush = class()
 
function Brush:init(s, p, c, index)
    self.pos = p
    self.size = s
    self.col = c
    self.ind = index
    self.score = false
end
 
function Brush:draw()
    pushStyle()
    fill(self.col)
    rectMode(CENTER)
    rect(self.pos.x, self.pos.y, self.size, self.size)
    popStyle()
end

main class setup were the colors i use a defined and were i create the brush


-- Main
function setup()
    -- colors
    colors = {
        color(255, 0, 0),    -- red
        color(255, 163, 0), --orange
        color(255, 255, 0),    --yellow
        color(0, 255, 0),    -- green
        color(0, 0, 255),    --blue
        color(192, 0, 255),    --purple
        color(180, 180, 180)    --gray
    }
  
    -- create a palette to place brushes on
    palette = {}
    paletteWidth = math.min(WIDTH,HEIGHT) -- <<<<
    paletteHeiht = paletteWidth -- <<<<
    brushWidth = paletteWidth/6
    brushHeight = paletteWidth/6
    startX = brushWidth/2
    startY = brushHeight/2+brushHeight
    counter = 1
    for i=1, 12 do      
        palette[i] = {}
        for j=1, 6 do
            local brushColor = randomColor()  
            palette[i][j] = Brush(paletteWidth/6, vec2(startX,startY), brushColor, counter)
            startX = startX + brushWidth
            counter = counter + 1
        end
        startX = brushWidth/2
        startY = startY + brushHeight
    end
    
end
2

this is the touch function code

 
function Brush:touched(touch)
local selfBrush
if not self:hit(vec2(touch.x, touch.y)) then return end
    if touch.state == BEGAN then
        refBrush = self
        if refBrush.col == colors[7] then -- cannot use grey to mix
            message = "cannot use grey to mix"
        else
            message = nil
        end
    elseif touch.state == MOVING 
    and self~=refBrush
    and not touchedBrushes[self] then
        touchedBrushes[self] = true -- remember
        if brushAlreadyMixed == false then
            if Brush:checkValidMix(refBrush.col, self.col) == true then
                self.col = Brush:setMixColor(refBrush.col, self.col)
                refBrush.col = self.col
                tween.delay(1.0, function() checkMixedColors() end)
                --checkMixedColors()
            end
            brushAlreadyMixed = true
        end
  elseif touch.state == ENDED then
        touchedBrushes = {} -- reset
        brushAlreadyMixed = false
        --checkMixedColors()
    end
end

i guess what im really after is changing self.col into a new colors[] value over 1 sec.

3

have you tried some custom blendmode() when you draw?

4

Use a tween and the code someone posted here to allow tweening colors.

5

color.mix() and tween()?

6

looking into this tweening would probably work. just need to make it simpel enough :slight_smile: