Howdy, Stranger!

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

Color Selector

edited October 2012 in Code Sharing Posts: 371

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
Tagged:

Comments

  • Posts: 140

    .@Jordan, That is so cool... Thanks.

  • Posts: 371

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

  • Jmv38Jmv38 Mod
    Posts: 3,297

    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.

  • Posts: 371

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

  • Posts: 23

    Hello Jordan, Very beautiful and short interface koodos :)
    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

  • Posts: 1,976

    @Ruttyj Read...the...last...post...date...

  • IgnatzIgnatz Mod
    Posts: 5,396

    @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).

  • Posts: 371

    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.

Sign In or Register to comment.