Color Selector

Code Sharing
1

Here is my code for a color selector (alpha not included yet)
Touch and slide on a color to change it, and tap on the top or bottom of a color to increment it by one.


--# Main
-- RGBSlider

-- Use this function to perform your initial setup
function setup()
    watch("slider.col")
    slider = RGBSlider(WIDTH / 2, HEIGHT / 2)
end

-- This function gets called once every frame
function draw()
    background(slider.col)
    slider:draw()
end

function touched(touch)
    slider:touched(touch)
end
--# RGBSlider
RGBSlider = class()

function RGBSlider:init(x, y, col)
    self.tapped = false
    self.x, self.y = x, y
    self.col = col or color(127, 127, 127, 255)
    self.m = mesh()
    self.m.vertices = {
        vec2(-50, -127), vec2(-25, -127), vec2(-25, 127),
        vec2(-50, -127), vec2(-50, 127), vec2(-25, 127),
        vec2(-12.5, -127), vec2(12.5, -127), vec2(12.5, 127),
        vec2(-12.5, -127), vec2(-12.5, 127), vec2(12.5, 127),
        vec2(25, -127), vec2(50, -127), vec2(50, 127),
        vec2(25, -127), vec2(25, 127), vec2(50, 127),
    }
    self.triangle = mesh()
    self.triangle.vertices = { vec2(0, 5), vec2(5, 0), vec2(0, -5), vec2(25, 5), vec2(20, 0), vec2(25, -5) }
    self.triangle:setColors(0,0,0)
    self:color()
    self.selected = "n"
end

function RGBSlider:draw()
    pushMatrix()
        pushStyle()
            rectMode(CENTER)
            translate(self.x, self.y)
            fill(0, 0, 0, 255)
            rect(0, 0, 125, 270)
            self.m:draw()
            for i = 0, 2 do
                x, y = -50 + 37.5 * i, -127 + self.col[i + 1]
                pushMatrix()
                    translate(x, y)
                    self.triangle:draw()
                popMatrix()
            end
        popStyle()
    popMatrix()
end

function RGBSlider:color()
    local r, g, b = self.col.r, self.col.g, self.col.b
    local rt, rb = color(255, g, b), color(0, g, b)
    local gt, gb = color(r, 255, b), color(r, 0, b)
    local bt, bb = color(r, g, 255), color(r, g, 0)
    self.m.colors = {
        rb, rb, rt, rb, rt, rt,
        gb, gb, gt, gb, gt, gt,
        bb, bb, bt, bb, bt, bt
    }
end

function RGBSlider:touched(touch)
    local t = vec2(touch.x - self.x, touch.y - self.y)
    if touch.state == BEGAN and math.abs(t.x) < 65 and math.abs(t.y) <= 127 then
        self.tapped = true
        if t.x < -20 then
            self.selected = "r"
            return
        elseif t.x < 20 then
            self.selected = "g"
            return
        else
            self.selected = "b"
            return
        end
    end
    if touch.state == MOVING and self.selected ~= "n" then
        self.tapped = false
        self.col[self.selected] = math.min(math.max(self.col[self.selected] + touch.deltaY, 0), 255)
        self:color()
    end
    if touch.state == ENDED then
        if self.tapped then
            self.col[self.selected] = self.col[self.selected] + t.y/math.abs(t.y)
            self.tapped = false
        end
        self.selected = "n"
    end
end
2

.@Jordan, That is so cool… Thanks.

3

.@Ric_Esrey, thanks for your comment, I really apreciate it.

4

Hello @Jordan : 1/ your sliders are beautiful 2/ your approch of rgb selection is very unsual and disturbing… but that’s quite interesting. Thanks for sharing.

5

Thanks so much @Jmv38, I appreciate that :smiley: (should I be worried or elated… I will be elated for now)

6

Hello Jordan, Very beautiful and short interface koodos :slight_smile:
I have been modifying the code and I need some help adding comments to the
Its the coordinates of the vertices I am not sure how to label what everything is.

I would like to set the
SIZE height and width of each slider and
POS of each of the sliders
I have been attempting to pull out the values from the hard coded text, if you could explain what each represent it would me amazing!!!

RGBSlider:init()

local a  = 127
local h = 50
local x = 25
local m = 12.5

-- a[b] = bottom
-- a[t] = top
local ab = -a
local at = a
local hb = -h
local ht = h
local xb = -x
local xt = x
local mb = -m
local mt = m

--Draw Sliders
self.m.vertices = {
    vec2(hb, ab), vec2(xb, ab), vec2(xb, at),
    vec2(hb, ab), vec2(hb, at), vec2(xb, at),
    vec2(mb, ab), vec2(mt, ab), vec2(mt, at),
    vec2(mb, ab), vec2(mb, at), vec2(mt, at),
    vec2(xt, ab), vec2(ht, ab), vec2(ht, at),
    vec2(xt, ab), vec2(xt, at), vec2(ht, at),
}

-- Draw triangles ---------------------------
self.triangle = mesh()
self.triangle.vertices = { vec2(0, 05), vec2(5, 0), vec2(0, -5), vec2(25, 5), vec2(20, 0), vec2(25, -5) }
self.triangle:setColors(0,0,0)

Fill code: -------------------------------------

http://pastebin.com/EwGS6tGP

7

@Ruttyj Read…the…last…post…date…

8

@Ruttyj - when the last post is more than a month old, you will have better luck writing directly to the code author.

Reviving an old post is not popular with forum regulars unless there is a good reason.

(But we’re still nice people, as you will find if you get stuck and need help).

9

Hey @Ruttyj, thanks for noticing my code, I don’t mind at all!

Here is the commented code for the vertices:

self.m.vertices = {
        -- Each selector has a width of 25 amd a height of 254
        
        -- Red Selector Vertices
        vec2(-50, -127), vec2(-25, -127), vec2(-25, 127), -- bottom left, bottom right, top right
        vec2(-50, -127), vec2(-50, 127), vec2(-25, 127), -- bottom left, top left, top right
        
        -- Green Selector Vertices
        vec2(-12.5, -127), vec2(12.5, -127), vec2(12.5, 127), -- bottom left, bottom right, top right
        vec2(-12.5, -127), vec2(-12.5, 127), vec2(12.5, 127), -- bottom left, top left, top right
        
        -- Blue Selector Vertices
        vec2(25, -127), vec2(50, -127), vec2(50, 127), -- bottom left, bottom right, top right
        vec2(25, -127), vec2(25, 127), vec2(50, 127), -- bottom left, top left, top right
        
    }

I just want to add that I used a height of 254 so I wouldn’t have to convert between the height of the object and the color produced (255 possible combinations of each color value), so converting the height of each selector to the color would be easier. Changing the height would require a rewrite of the touched function. A little tip I like to use when trying to understand some big bad mesh code is messing with one vertex until I understand which vertex it is by noticing how it moved and which triangle it affected.