Scripting Helpers is winding down operations and is now read-only. More info→

Can't figure out the math to make GUI frames appear in a circle?

Asked by

5 years ago

I am trying to make a GUI mini game where there is a circle with frames at random points on it. At the moment I am just trying to get the frames to make a full circle first so I can have something to start working off of to make if function properly

Here is the code I have put it a Script in a GUI as this portion is only the set up and has nothing to do with any mechanics apart from making a circle.

The commented out code was my first attempt in which is cause randomized frames off the GUI

01local frame = script.Parent["Frame Spot"]
02local messedup = false
03local place = Instance.new("Frame")
04place.Size = UDim2.new(0.046, 0,0.083, 0)
05place.Position = UDim2.new(0.475, 0,0.042, 0)
06place.Parent = frame
07place.Name= "Place"
08place.BackgroundColor3 = Color3.fromRGB(0,0,255)
09place.BackgroundTransparency = 0.5
10local count = 360
11 
12for i=1, count do
13    local dec =  math.random(1,100)/100
14    local angle =dec*math.pi*2
15    local radius = frame.AbsolutePosition.X/3.4
16    local x0 = frame.AbsolutePosition.X/2
17    local y0 = frame.AbsolutePosition.Y/2.1
18--  local x = (math.cos(angle)*radius)/frame.AbsolutePosition.X+0.4
19--  local y = (math.sin(angle)*radius)/frame.AbsolutePosition.Y+0.4
20    local x = x0+radius*math.cos(2*math.pi*i/count)-50
21    local y = y0+radius*math.sin(2*math.pi*i/count)-17
22    local marker = Instance.new("Frame")
23          marker.Size = UDim2.new(0.046, 0,0.083, 0)
24          marker.Position = UDim2.new(0, x,0, y)
25          marker.Rotation = angle 
26          marker.Name = "Test"
27          marker.BackgroundColor3 = Color3.fromRGB(0,0,255)
28          marker.BackgroundTransparency = 0.5
29          marker.Parent = frame
30end
 View all 30 lines...

At the moment what this code currently does is generate a rough circle but the frames make like an oval shape and just barely miss making a full circle and I am unsure of how I can make them actually turn it into a proper circle as all my attempts have made it much worse

I am using a image to have the frames line up on which is this https://www.roblox.com/library/3452386899/Images-Repair-minigame

If you need any more information feel free to ask for it and I will supply it to the best of my ability.

Pythagorean identity: https://mathbitsnotebook.com/Algebra2/TrigConcepts/TCPythIden.html theking48989987 2147 — 5y

Thank you I will take a look at it deth836231 142 — 5y

Can you try setting `marker.Size` to have absolute pixel values instead of scaled values? If your `frame` isn't a square, then this may explain why they aren't forming a perfectly circle: they are being stretched. gskw 1046 — 5y

Ahh that makes sense I will try that deth836231 142 — 5y

1 answer

Answered by

whenallthepigsfly 541

5 years ago

Not bad! However, this isn't the best way to do it: Instead of brute forcing the circle, you could is make it so that the circle is made up of rotated rectangles that meet on their ends, not unrotated squares. This is more efficient, and looks better overall. Here is your code modified to do that:

01--Set Variables
02local parentFrame = script.Parent["Frame Spot"]
03local resolution = 50 --How many segments will make up the circle
04local circleThickness = 500 --Thickness (in px)
05 
06--Calculated Variables
07local diameter = math.min(parentFrame.AbsoluteSize.X, parentFrame.AbsoluteSize.Y) --Make the diameter the smallest frame dimention
08local radius = diameter/2
09local centerPos = (parentFrame.AbsoluteSize/2) --Center position of the frame
10local markerWidth = math.asin((math.pi/resolution)) * radius * 2 --Width of the marker to make a seamless circle
11circleThickness = math.clamp(circleThickness, 0, radius) --Clamp the thickness to a solid circle
12 
13for i=0, resolution do
14    local radians = (2 * math.pi * i) / resolution --Convert our index to radians (A measure of rotation like degrees)
15    local degrees = 360 * i / resolution --Also convert index to degrees
16    --Marker pos is +/- center pos, so is added on. Offset B/C we want to align outside, so subtract off half of thickness
17    local markerPos = centerPos + Vector2.new(math.cos(radians)*(radius - circleThickness/2), math.sin(radians)*(radius - circleThickness/2))   
18    local markerAngle = degrees
19    local marker = Instance.new("Frame")
20          marker.Size = UDim2.new(0, circleThickness, 0, markerWidth + 1)
21          marker.Position = UDim2.new(0,markerPos.X,0,markerPos.Y) 
22          marker.Rotation = markerAngle 
23          marker.Name = "Test"
24          marker.AnchorPoint = Vector2.new(0.5, 0.5) --IMPORTANT: Set anchor point to center of frame
25          marker.BackgroundColor3 = Color3.new(math.random(), math.random(), math.random())
26          --marker.BackgroundTransparency = 0.5
27          marker.BorderSizePixel = 0
28          marker.Parent = parentFrame
 View all 28 lines...

Can't figure out the math to make GUI frames appear in a circle?

1 answer

Answer this question