Spacing UI Elements

[oskxzr (oskar)]

Greetings developers!
I am currently scripting a dynamic UI background, and I am having some troubles with spacing the cubes.

Here’s a great example of what I want this to look like:

You can see that the cubes are spaced out, but there arent really major clumps and empty spaces.

Here’s what can occasionally occur:

The squares are all bunched on one side of the screen, leaving a large space where there are no squares.

Here’s the code that creates the squares:

local Corner = "TL"
local function CreateSquare()
		local NewSquare

		if Big then
			Big = false
			NewSquare = Square:Clone()
			local Size = math.random(10,15)
			NewSquare.Size = UDim2.new(0, VPSize.X/Size, 0, VPSize.Y/Size)
			NewSquare.RotationSpeed.Value = math.random(-7,7)
			NewSquare.FloatSpeed.Value = math.random(4,10)

		else
			Big = true
			NewSquare = Square:Clone()
			local Size = math.random(15,20)
			NewSquare.Size = UDim2.new(0, VPSize.X/Size, 0, VPSize.Y/Size)
			NewSquare.RotationSpeed.Value = math.random(-5,5)
			NewSquare.FloatSpeed.Value = math.random(1,4)
		end

		if Corner == "TL" then
			NewSquare.Position = UDim2.new(0, math.random(1, (VPSize.X/2)-NewSquare.Size.X.Offset),0, math.random(1, (VPSize.Y/2)-NewSquare.Size.Y.Offset))
			Corner = "TR"
		elseif Corner == "TR" then
			NewSquare.Position = UDim2.new(0, VPSize.X-math.random(1, (VPSize.X)-NewSquare.Size.X.Offset),0, math.random(1, (VPSize.Y/2)-NewSquare.Size.Y.Offset))
			Corner = "BL"
		elseif Corner == "BL" then
			UDim2.new(0, math.random(1, (VPSize.X/2)-NewSquare.Size.X.Offset),0, (VPSize.Y)-math.random(1, (VPSize.Y/2)-NewSquare.Size.Y.Offset))
			Corner = "BR"
		elseif Corner == "BR" then
			UDim2.new(0, VPSize.X-math.random(1, (VPSize.X/2)-NewSquare.Size.X.Offset),0, (VPSize.Y)-math.random(1, (VPSize.Y/2)-NewSquare.Size.Y.Offset))
			Corner = "TL"

		end

		local Darkness = (NewSquare.Size.X.Offset/VPSize.X)/1.3
		local BaseColor = Color3.new(0.345098, 0.631373, 0.333333)

		NewSquare.BackgroundColor3 = Color3.new(
			BaseColor.R + Darkness,
			BaseColor.G + Darkness,
			BaseColor.B + Darkness
		)
		
		NewSquare.ZIndex = math.floor((NewSquare.Size.X.Offset/VPSize.X)*10)
		NewSquare.Rotation = math.random(1,360)
		NewSquare.Position = UDim2.new(0, math.random(1, VPSize.X-NewSquare.Size.X.Offset),0, math.random(1, VPSize.Y-NewSquare.Size.Y.Offset))
		NewSquare.Parent = Frame
		NewSquare.Visible = true
		return NewSquare
	end

As you can see in the code, I’ve attempted to alternate between different corners of the frame but evidently, that isn’t working as intended- or at all for that matter.

Can anyone help me out with this? Thanks!

[nicemike40]

Could you just place them in a regular grid + some randomness within its ‘cell’?

Something like

local function CreateRandomPoints(area: Rect, distanceBetween: number)
	local rows = area.Height / distanceBetween
	local cols = area.Width / distanceBetween

	for r = 1, rows do
		for c = 1, cols do
			local x = area.Min.X + (col - 1 + math.random()) * distanceBetween
			local y = area.Min.Y + (row - 1 + math.random()) * distanceBetween

			-- create a rect at coordinates (x, y)
		end
	end
end

I used a Rect for the first argument for simplicity but you could break it up if you wanted.

[CoderHusk]

Have the math random stuff be a offset of a floor function