Color RGB control with on-screen slider help

Questions
1

I’m trying to control the background color values with on-screen sliders.

Starting with red amount first, I have it working partially. Adjusting the color wheel in parameters changes the on-screen slider(amount of red) value but not the other way around. I want to be able to change the red amount value with the on-screen slider.

displayMode(OVERLAY)

function setup()
    background(0)
    backingMode(RETAINED)   
    parameter.color("col", color(255,0,0,128), colorChanged)    
end

function draw()
    background(col) 
    slider:draw()
end

function colorChanged(c)
    tab = {}
    table.insert(tab,c)
    print(tab[1].x) --amount of red
    print(tab[1].y) --amount of blue
    print(tab[1].z) --amount of green
    print(tab[1].w) --amount of alpha
    slider = Slider(tab[1].x, 1, 250, 1, WIDTH/2, HEIGHT/2+200)
    parameter.integer(tab[1].x, 1, 250, 1)    
end

function touched(touch)
    slider:touched(touch)
end

Slider = class()

function Slider:init(variable, min, max, init, x, y, callback)
    self.variable = variable
    self.x, self.y = x, y
    self.min, self.max = min, max
    self.prevValue, self.curValue = init, init
    self.callback = callback
    self.length = 250
    self.sliderX = (self.x - self.length/2) + (self.length / (self.max - 1)) * (self.curValue - 1)
end

function Slider:draw()
    pushStyle()
    strokeWidth(2) stroke(127)
    line(self.x - self.length/2, self.y, self.x + self.length/2, self.y)
    strokeWidth(5) stroke(255)
    line(self.x - self.length/2, self.y, self.sliderX, self.y)
    strokeWidth(2) stroke(255) if self.touching then fill(255) else fill(0) end
    ellipse(self.sliderX, self.y, 20)
    fill(255, 151, 0, 255)
    local w,h = textSize(self.curValue)
    text(self.curValue, self.x + self.length/2 + 5 - w/2, self.y + 10 + h/2)
    local w,h = textSize(self.variable)
    text(self.variable, self.x - self.length/2 - 5 + w/2, self.y + 10 + h/2)
    popStyle()

    if self.touching then
        self.sliderX = math.max(math.min(CurrentTouch.x, self.x + self.length/2), self.x - self.length/2)
        self.curValue = math.floor((((self.sliderX - (self.x - self.length/2)) / self.length) 
            * (self.max - 1) + 1) + 0.49)
        if self.callback ~= nil and self.curValue ~= self.prevValue then
            _G[self.variable] = self.curValue
            self.callback()
            self.prevValue = self.curValue
        end
    end
end

function Slider:touched(touch)
    if touch.x > self.sliderX - 10 and touch.x < self.sliderX + 10
    and touch.y > self.y - 10 and touch.y < self.y + 10 then
        self.touching = true
    end

    if touch.state == ENDED then
        self.touching = false
        self.sliderX = (self.x - self.length/2) + 
            (self.length / (self.max - 1)) * (self.curValue - 1)
    end
end
2

Add this line in Slider:draw() after the first text line where you text self.curValue.

col=color(self.curValue,0,0)
3 
displayMode(FULLSCREEN)

function setup()
    red=slider(vec4(100,600,500,600),vec2(100,600),color(255,0,0))    
    green=slider(vec4(100,500,500,500),vec2(100,500),color(0,255,0))    
    blue=slider(vec4(100,400,500,400),vec2(100,400),color(0,0,255))    
    frac=255/(red.line.z-red.line.x)  
end

function draw()
    background(red.pos,green.pos,blue.pos)
    red:draw()
    green:draw()
    blue:draw()
end

function touched(t)
    red:touched(t)
    green:touched(t)
    blue:touched(t)
end

slider=class()

function slider:init(s,c,col)
    self.line=s
    self.circ=c
    self.col=col 
    self.pos=0  
end

function slider:draw()
    stroke(255)
    strokeWidth(2)
    line(self.line.x,self.line.y,self.line.z,self.line.w)
    fill(self.col)
    ellipse(self.circ.x,self.circ.y,50)  
    fill(255)
    text(string.format("%.f",self.pos),self.circ.x,self.circ.y)
end

function slider:touched(t)
    if t.state==BEGAN or t.state==CHANGED then
        if t.x>self.circ.x-25 and t.x<self.circ.x+25 and
                t.y>self.circ.y-50 and t.y<self.circ.y+25 then
            self.circ.x=t.x
            if self.circ.x<self.line.x then
                self.circ.x=self.line.x
            end
            if self.circ.x>self.line.z then
                self.circ.x=self.line.z
            end  
            self.pos=(self.circ.x-self.line.x)*frac    
        end
    end    
end
4

@dave1707 Thanks!

5

This is cool!