Would this be scriptable?

Help and Feedback Scripting Support
,
#1

Basically, I’m currently working on a UI design and I wanted to know if this is something that can be programmed this way before I go any further and find out it’s not. (I’m not a programmer by any means the UI would be sent to one). So basically how I want it to work is the person clicks Color 1, and picks a color which can be previewed in the box on the left of the gradients. Then when they click Color 2 it’ll save the color that the person had the color on. Then the player can click save, and have their gradient. The gradient would be previewed somewhere below in a name. I know that a color wheel with a lightness slider is programmable but for what I’m doing a color wheel will not fit properly into it, and was wondering if 3 sliders would work instead. 1 for hue, 1 for saturation and 1 for lightness (value essentially). Or should I go a different route with this?

image
image730×242 14 KB

1 Like
#2

of course it would work because you can use the sliders to make them correspond to the correct colors

1 Like
#3

This would definitely be programmable. The best way would probably be using linear interpolation.

So, first you would want to calculate the left and right side of the bar itself:

local left = Bar.AbsolutePosition.X - (Bar.AbsoluteSize.X / 2)
local right = Bar.AbsolutePosition.X + (Bar.AbsoluteSize.X / 2)

then, let’s imagine you have some kind of system to keep the slider inside the bar already.
now get 3 of those, one for hue, one for saturation, and one for value.

now, you want to get the hue, saturation and value from the bars.

You first want to get the slider position of each.

local hPos = HueSlider.AbsolutePosition.X
local sPos = SatSlider.AbsolutePosition.X
local vPos = ValSlider.AbsolutePosition.X

Since the bars are the same size, we can use the same left and right values for all of them.

--reverse linear interpolation.
local function reverseLerp(a: number, b: number, v: number): number
	return (v - a) / (b - a)
end

local function getColour(): Color3
    --calculating the hue
    local hue = reverseLerp(left, right, hPos) * 360

    --since saturation and value are values between 0 and 1, they don't need multiplying
    local sat = reverseLerp(left, right, sPos)
    local val = reverseLerp(left, right, vPos)

    return Color3.fromHSV(hue, sat, val)
end

basically, how this works:

  • get how far each slider is along its bar as a value between 0 and 1
  • apply these values to work out hue, sat and val
  • return a new Color3 from these values, which can later be applied to things like BackgroundTransparency

this code is untested, so there may be issues.
I know you said you’re not a programmer, so I tried to explain this simply with a few code snippets. Also, might be a starting point for your programmer should they want to use it :wink:

Hope this helps!

2 Likes
#4

I appreciate your explanation, I’ll definitely show this to my programmer to work off of. Thank you :).