Page 1 of 1
Square Color Picker
Posted: Sat Oct 03, 2020 5:36 pm
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.
Re: Square Color Picker
Posted: Sat Oct 03, 2020 7:32 pm
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?
Re: Square Color Picker
Posted: Sat Oct 03, 2020 7:36 pm
by Mprz
May you please provide a .love?
Re: Square Color Picker
Posted: Sat Oct 03, 2020 8:28 pm
by Xugro
Yeah, sure. The code is not the prettiest nor the fastest, but it is working.
Re: Square Color Picker
Posted: Sat Oct 03, 2020 11:31 pm
by pgimeno
I'd suggest using ImageData (and its mapPixel method) for this purpose instead of a canvas.
Re: Square Color Picker
Posted: Sat Oct 03, 2020 11:54 pm
by Mprz
May you please send an example?
Re: Square Color Picker
Posted: Sun Oct 04, 2020 6:11 am
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.
Re: Square Color Picker
Posted: Sun Oct 04, 2020 9:41 am
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.
Re: Square Color Picker
Posted: Sun Oct 04, 2020 1:35 pm
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 (25.12 KiB) Viewed 5799 times
Re: Square Color Picker
Posted: Sun Oct 04, 2020 2:03 pm
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.