Square Color Picker

[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]

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?

[Mprz]

May you please provide a .love?

[Xugro]

Yeah, sure. The code is not the prettiest nor the fastest, but it is working.

[pgimeno]

I'd suggest using ImageData (and its mapPixel method) for this purpose instead of a canvas.

[Mprz]

May you please send an example?

[Jeeper]

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]

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]

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 5606 times

[pgimeno]

May you please send an example?

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.