How was this background made?

Help and Feedback Art Design Support
#1

You can write your topic however you want, but you need to answer these questions:

  1. What do you want to achieve? Keep it simple and clear!
    The following “geometry triangle effect” background (the moving lines) similar to the one at Zombie Blitz’s main menu background effect

  2. What is the issue? Include screenshots / videos if possible!
    I don’t even know what is this effect exactly called, so I don’t know how should I try to make this

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

1 Like
How can I optimize this code?
RGLR - A module for rendering geometry lines background effect
#2

i think it is just a video to do it you need to make a viadeo in another program and then public it on roblox insert the id in a videoframe

#3

Looks like there are random dots which spawn outside of the screen and move around randomly.
Then, whenever a dot gets within x range of another dot, a line is created. The larger the distance is the harder it is to see, the smaller the distance is it’s easier to see.

So, I guess you’d need a function to create new dots and give them random paths, and make it so that it detects how close other dots are to it.

Also, the dots just move in a straight line, so you would just need to give a random speed and inital direction to them

1 Like
#4

How can I get the magnitude between 2 UDim2’s?

EDIT: Using the AbsolutePosition of 2 dots for magnitude

#5

Found solution here

Well now I’m hit with another issue, how would I position and resize a frame to make a line from a dot to another nearby dot?

local serv = {
	RunService = game:GetService("RunService");
	Debris = game:GetService("Debris");
}
local RootRender = script.Parent
local Dots: {Frame} = {}
local Lines: {[Frame]: {[Frame]: Frame}} = {}

local function CreateDot()
	local dot = Instance.new("Frame")
	dot.Name = "Dot"
	dot.Size = UDim2.new(0, 5, 0, 5)
	dot.BorderSizePixel = 0
	dot.Parent = RootRender
	table.insert(Dots, dot)
	return dot
end

serv.RunService.Heartbeat:Connect(function()
	for _, dot: Frame in next, Dots do
		for _, seconddot: Frame in next, Dots do
			if seconddot ~= dot and (dot.AbsolutePosition - seconddot.AbsolutePosition).Magnitude <= 150 then
				if not Lines[dot] then Lines[dot] = {} end
				if not Lines[dot][seconddot] then
					local line = Instance.new("Frame")
					line.Name = "Line"
					line.BorderSizePixel = 0
					line.Size = UDim2.new(0, 0, 0, 0)
					line.Parent = RootRender
					Lines[dot][seconddot] = line
				end
				print("in range")
				local SizeFromDots = (dot.AbsolutePosition - seconddot.AbsolutePosition)
				Lines[dot][seconddot].Size = UDim2.new(0, SizeFromDots.X, 0, SizeFromDots.Y)
				Lines[dot][seconddot].Position = seconddot.Position:Lerp(dot.Position, 0)
			else
				if not Lines[dot] then Lines[dot] = {} end
				if Lines[dot][seconddot] then serv.Debris:AddItem(Lines[dot][seconddot], 0) end
			end
		end
	end
end)

CreateDot()
CreateDot()

I know that I haven’t made it move randomly, but I would like to finish the part that renders the lines first