Howdy, Stranger!

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

Color RGB control with on-screen slider help

in Questions Posts: 127

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

Comments

  • dave1707dave1707 Mod
    Posts: 8,624

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

    col=color(self.curValue,0,0)
    
  • dave1707dave1707 Mod
    Posts: 8,624
    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
    
  • Posts: 127

    @dave1707 Thanks!

  • edited September 22 Posts: 9

    This is cool!

Sign In or Register to comment.