Make a spinning wheel on GUI

Help and Feedback Scripting Support
, ,
#1

So recently I tried making a spinning wheel script that generates wheels based on percentages, like a sector that ocuppies 60% of the circle and another one that occupies 40% etc, I made a simple circle with ui a frame with a ui corner set to 1 and for the sectors the only thing I could come up with was to use a lot of semicircles and ovelap them.
image

The issue with this solution (or my math probably) is that for some reason it sometimes breaks, im not sure why
image
In this image 3 out of 6 are glitched, and the second problem I have is that when I tried to make a spin effect, I cannot know which sector wins since the sectors aren’t always the same.

This is the source code of the wheel, and also the .rbx file if you want to test anything

local TweenService = game:GetService("TweenService")

local wheel = script.Parent.Wheel
local sectorframes = {}
local sectors = {0.25, 0.25,0.5}

local function getsector(clipside, z, colour)
	local mysector = if clipside == 1 then script.ClipRightSector:Clone() elseif clipside == 2 then script.ClipLeftSector:Clone() else script.Sector:Clone()
	mysector.Parent = if clipside == 1 then script.Parent.Wheel.RightClip elseif clipside == 2 then script.Parent.Wheel.LeftClip else script.Parent.Wheel
	mysector.ZIndex = z or 1
	mysector.BackgroundColor3 = colour
	table.insert(sectorframes, mysector)
	return mysector
end

local function placetext(mytext, angle, z)
	local text = script.TextLabel:Clone()
	text.Position = UDim2.new(0.5 + (math.sin(angle) / 3), 0, 0.5 - (math.cos(angle) / 3), 0)
	text.Parent = script.Parent.Wheel
	text.ZIndex = z
	text.Text = mytext
	table.insert(sectorframes, text)
	return text
end

local function updateWheel(sectors)
	for i, v in ipairs(sectorframes) do
		v:Destroy()
	end
	local totalangle = 0
	local totalsectors = #sectors
	for i, percentage in ipairs(sectors) do
		local mycolour = Color3.fromRGB(math.random(0, 255), math.random(0, 255), math.random(0, 255))
		local angle = totalangle + percentage * 360
		local zindex = totalsectors - i + 5
		placetext(100 * percentage .. "%", math.rad(totalangle + percentage * 180), zindex + 1)
		if percentage > .5 then
			getsector(nil, zindex, mycolour).UIGradient.Rotation = totalangle
			getsector(nil, zindex, mycolour).UIGradient.Rotation = angle - 180
		else
			if angle <= 180 then
				getsector(1, zindex, mycolour).UIGradient.Rotation = angle - 180
			elseif angle < 360 then
				getsector(nil, zindex, mycolour).UIGradient.Rotation = angle - 180
			else
				getsector(2, zindex, mycolour).UIGradient.Rotation = angle - 360
			end
		end
		totalangle += percentage * 360
	end
end

updateWheel(sectors)

customwheel.rbxm (8.7 KB)
As always, thank you so much for helping out :sparkling_heart: