How can I make a colour wheel return the correct colour?

Hi,

So I’ve made a colour wheel and I want to make the wheel return the correct wheel depending on what angle the mouse is from the centre of the circle. So far I have this:

mouse.Move:Connect(function()
	local x, y = mouse.X, mouse.Y
	local cursorVector = Vector2.new(x, y) - script.Parent.AbsolutePosition - (script.Parent.AbsoluteSize * script.Parent.AnchorPoint)
	local unit = cursorVector.Unit * script.Parent.AbsoluteSize.Y
	local anchorPointFactor = script.Parent.AbsoluteSize * script.Parent.AnchorPoint
	script.Parent.Frame.Position = UDim2.fromScale(unit.X / script.Parent.AbsoluteSize.X + script.Parent.AnchorPoint.X, unit.Y / script.Parent.AbsoluteSize.Y + script.Parent.AnchorPoint.Y)
	local angle = math.deg(math.atan2(cursorVector.Y, cursorVector.X))
	local hueAngle = (angle) / 360
	local hue = hueAngle
	script.Parent.Frame.BackgroundColor3 = Color3.fromHSV(hue,1,1)
end)

However, when it reaches hueAngle = angle / 360, that’s where the issue stems from.

It works fine for the bottom half of the circle,
image

But the top half returns black
image

I’ve tried:
math.abs, subtracting 1 then math.abs, adding 0.5, adding 1, etc but they all seem to result in the colour either being inverted from top to bottom, or inverted from left to right. Any help?

math.sin and math.cos returns a value between -1 to 1. Because of this, using print(math.deg(math.atan2(x, y))) results in numbers between -180 to 180. Just add + 180 to move the range to 0-360.

1 Like

Going to accept this as the answer but there was also something weird happening where the colours were flipped on either the X or Y axis. To remedy that, you need to perform - on the axis whose colours were flipped when passing it to math.atan2.

1 Like