Square Color Picker

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
Mprz
Prole
Posts: 4
Joined: Sat Oct 03, 2020 5:33 pm

Square Color Picker

Post by Mprz »

I am working on a unity esk toolbar and I don't know how to make a square color picker. If anyone could please help please do.
Xugro
Party member
Posts: 110
Joined: Wed Sep 29, 2010 8:14 pm

Re: Square Color Picker

Post by Xugro »

Create a square canvas. For a certain hue draw all saturation (x-axis) and brightness (y-axis) levels with two for-loops. Create another canvas and draw all possible hues (e.g. y-axis). Draw those two canvases to the screen. When the user clicks on the saturation-brightness-square: Choose the color on that pixel. When the user clicks on the hue-slider: Again choose the color on that pixel and redraw the saturation-brightness-square.

To draw with hue, saturation and brightness you need to convert those to RGB. All the important formulas can be found on Wikipedia: https://en.wikipedia.org/wiki/HSL_and_H ... n_formulae

Or do you have another problem?
Last edited by Xugro on Sat Oct 03, 2020 8:47 pm, edited 1 time in total.
Mprz
Prole
Posts: 4
Joined: Sat Oct 03, 2020 5:33 pm

Re: Square Color Picker

Post by Mprz »

May you please provide a .love?
Xugro
Party member
Posts: 110
Joined: Wed Sep 29, 2010 8:14 pm

Re: Square Color Picker

Post by Xugro »

Yeah, sure. The code is not the prettiest nor the fastest, but it is working.
Attachments
color_picker.love
(1.03 KiB) Downloaded 167 times
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Square Color Picker

Post by pgimeno »

I'd suggest using ImageData (and its mapPixel method) for this purpose instead of a canvas.
Mprz
Prole
Posts: 4
Joined: Sat Oct 03, 2020 5:33 pm

Re: Square Color Picker

Post by Mprz »

May you please send an example?
User avatar
Jeeper
Party member
Posts: 611
Joined: Tue Mar 12, 2013 7:11 pm
Contact:

Re: Square Color Picker

Post by Jeeper »

Mprz wrote: Sat Oct 03, 2020 11:54 pm May you please send an example?
May I suggest looking it up and trying yourself. You replied about 20 minutes after pgimeno gave you directions. It just ends up looking like you want someone else to it for you.

Attempt to do it, then if you run into issues: ask for help on those issues.
Xugro
Party member
Posts: 110
Joined: Wed Sep 29, 2010 8:14 pm

Re: Square Color Picker

Post by Xugro »

pgimeno wrote: Sat Oct 03, 2020 11:31 pm I'd suggest using ImageData (and its mapPixel method) for this purpose instead of a canvas.
That's a really good idea. I did not know that this method existed.

After a small test: The code is much cleaner and about 300x faster.
RNavega
Party member
Posts: 239
Joined: Sun Aug 16, 2020 1:28 pm

Re: Square Color Picker

Post by RNavega »

I'd favor a geometrical approach, mapping the cursor coordinates to (normalized) coordinates inside the picker rectangle, so you can plug them as the parameters of whatever color space that you're using (HSL, RGB, LCH etc.).
The (normalized & clamped) cursor x and y will be numbers in the range [0.0, 1.0] within the picker rectangle.

You will also have to implement a small finite-state-machine so you can have different 'states' on the color picker: hovering the mouse (doesn't change the picked color), hovering + pressing the mouse (does change the color) etc.

I've done something like this with CPP and the Qt toolkit, you can look at it for reference:
qtColorPickers.png
qtColorPickers.png (25.12 KiB) Viewed 5076 times
Attachments
ColourPropertyWheel.cpp
(15.97 KiB) Downloaded 131 times
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Square Color Picker

Post by pgimeno »

Mprz wrote: Sat Oct 03, 2020 11:54 pm May you please send an example?
Jeeper wrote: Sun Oct 04, 2020 6:11 am Attempt to do it, then if you run into issues: ask for help on those issues.
That. ^

I'll just outline the procedure:

Code: Select all

function love.load()
  create the ImageData object here with format rgba8
  ImageDataObject:mapPixel(function (x, y)
    do here what Xugro suggested, return r,g,b,1
  end)
  ImageObject = love.graphics.newImage(ImageDataObject)
end

function love.draw()
  draw the ImageObject here
end
Note that it's important to distinguish the Image object from the ImageData object.
Post Reply

Who is online

Users browsing this forum: No registered users and 54 guests