How do I position images around a circle

maybe if I wanted to have 45 degrees for every image around a circle how would I do it?.
Currently looks like this :

local plrgui = plr.PlayerGui
local CircleSGui = plrgui:FindFirstChild("Circle")
local Circle = CircleSGui:FindFirstChild("Circle")

local center = Vector2.new(Circle.AbsolutePosition.X + Circle.AbsoluteSize.X / 2, Circle.AbsolutePosition.Y + Circle.AbsoluteSize.Y / 2)

local radiusX = Circle.AbsoluteSize.X / 2
local radiusY = Circle.AbsoluteSize.Y / 2

local numImages = 8 -- The number of images
local angleIncrement = 2 * math.pi / numImages -- The angle between each image

for i = 1, numImages do
    local angle = i * angleIncrement

    -- Calculate the position of the image
    local x = center.X + radiusX * math.cos(angle) - Circle.AbsolutePosition.X
    local y = center.Y + radiusY * math.sin(angle) - Circle.AbsolutePosition.Y

    local imageLabel = repstorage:FindFirstChild("Gui"):FindFirstChild("Template"):Clone()
    imageLabel.AnchorPoint = Vector2.new(0.5, 0.5) -- Set the anchor point to the center of the image
    imageLabel.Position = UDim2.new(0, x, 0, y)
    imageLabel.Size = UDim2.new(0.158, 0,0.158, 0)
    imageLabel.Parent = Circle
end

I am not sure where I messed up

Well, if you want 45 degrees for each image, then you can only fit 8 total images in the circle. 8 * 45 = 360.
So then you need to change the numImages to 8.

Oh that is 8 already, sorry for the mistake in the post. This however wouldn’t really matter since my problem is with the position of the images, as you can see they are not on top of the imagelabel as they should

Is it not just easier to get the center of the circle by getting the .Position property and setting it as the circle display’s position?

I made a quick mock-up just to see which one would work, and this is what I came up with.

local Players = game:GetService("Players")

local player = Players.LocalPlayer
local GUI = player.PlayerGui

local Circle = GUI:WaitForChild("ScreenGui").Circle

local center = Circle.Position

local pinPoint = Instance.new("Frame")
pinPoint.Name = "CenterPoint"
pinPoint.Parent = Circle
pinPoint.AnchorPoint = Vector2.new(0.5, 0.5)
pinPoint.Size = UDim2.new(0, 50, 0, 50)
pinPoint.Position = center

For this result:

As for the radius, I wouldn’t know how to edit it since I am not as experienced. But following my script as mentioned should solve the centering issue. Then I suppose just playing and shifting with the variabled in the cos/sin mathematics.

This is the solution for anyone wondering :

local radius = 0.5

	local numImages = 8 -- The number of images
	local angleIncrement = math.rad(360 / numImages) -- The angle between each image in radians

	for i = 1, numImages do
		local angle = i * angleIncrement
		local imageX = radius * math.cos(angle) -- Use the same radius for X and Y
		local imageY = radius * math.sin(angle)

		local x = center.X + imageX
		local y = center.Y + imageY

		local imageLabel = repstorage:FindFirstChild("Gui"):FindFirstChild("Template"):Clone()
		imageLabel.AnchorPoint = Vector2.new(0.5, 0.5)
		imageLabel.Position = UDim2.new(x, 0, y, 0)
		imageLabel.Size = UDim2.new(0.158, 0,0.158, 0)
		imageLabel.Parent = Wheel
	end
1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.