Plotting a line between two points

Help and Feedback Scripting Support
#1

I’m trying to create a script that renders a pattern using UI elements based on a given number sequence. Basically, something like Android pattern lockscreen or Among Us wiring system (lol), but static.
I managed to render the lines and they seem to connect to the right points, however the pattern appears off-set from the grid where the 9 points are placed, as you can see in the pic. I have no idea why this keeps happening and I’m out of ideas on how to fix it.
The closest I came to fixing this was by parenting each line to the ScreenGui itself, rather than the frame (the book background you see in the pic), but it was still slightly offset and it didn’t scale properly with the book, since it wasn’t parented to it.

image

Here is the function that plots the lines:

local function plot(P1,P2)
    local Size = workspace.CurrentCamera.ViewportSize
    local startX, startY = P1.AbsolutePosition.X, P1.AbsolutePosition.Y
    local endX, endY = P2.AbsolutePosition.X, P2.AbsolutePosition.Y
    local startVector = Vector2.new(startX, startY)
    local endVector = Vector2.new(endX, endY)

    local Line = Instance.new("Frame")
    Line.Name = P1.Name.."-"..P2.Name
    Line.ZIndex = 5
    --Line.BorderSizePixel = 0
    Line.AnchorPoint = Vector2.new(0.5, 0.5)
    Line.Size = UDim2.new(0, ((endX - startX) ^ 2 + (endY - startY) ^ 2) ^ 0.5, 0, 2) -- Get the size using the distance formula
    Line.Position = UDim2.new(0, (startX + endX) / 2, 0, (startY + endY) / 2) -- Get the position using the midpoint formula
    Line.Rotation = math.atan2(endY - startY, endX - startX) * (180 / math.pi) -- Get the rotation using atan2, convert radians to degrees
    Line.Parent = script.Parent.BookBase--.PageL--.SigilPaths
end

Another problem I can’t figure out is that the size and position of the line is calculated using Offset. Is there any way I could convert it to Scale, so the size always matches the book’s?

For reference, I’m leaving the place file with the script and UI, perhaps the issue lies somewhere else.
linePlotter.rbxl (45.6 KB)

Before you guys start linking old posts from the DevForum about similar issues: I already checked them. The function you see is actually from the DevForum. No idea why it’s not working. I tried playing around a bit but with no success, due to my lack of math skills and, perhaps, incorrect UI setup.

1 Like
#2

From how I’m seeing it, it looks like you’re using the Offset parameter for the position, which could be the reason why it acts like this. Maybe try converting the offset into a scale?

#3

Try this:

local spellID = 1234567893579
local t = string.split(spellID,"")
local current = t[1]

local sigil = script.Parent.BookBase.PageL.Sigil
sigil:WaitForChild(current).BackgroundColor3 = Color3.fromRGB(255, 55, 58)

local function DrawLine(from, to, P1, P2)
	local distance = to - from

	local line = Instance.new("Frame")
	line.Name = P1.Name .."-".. P2.Name
	line.AnchorPoint = Vector2.new(0.5, 0.5)
	line.ZIndex = 5
	line.Rotation = math.atan2(distance.Y, distance.X) * (180 / math.pi)
	line.Position = UDim2.fromOffset((to + from).X / 2, (to + from).Y / 2) + UDim2.fromOffset(0, 36)
	line.Size = UDim2.fromOffset((distance.X ^ 2 + distance.Y ^ 2) ^ 0.5, 2)
	line.Parent = script.Parent
end

local function DrawLineUI(guiObject1, guiObject2)
	local from = guiObject1.AbsolutePosition + (guiObject1.AbsoluteSize * Vector2.new(0.5, 0.5))
	local to = guiObject2.AbsolutePosition + (guiObject2.AbsoluteSize * Vector2.new(0.5, 0.5))

	return DrawLine(from, to, guiObject1, guiObject2)
end

for i, v in pairs(t) do
	local index, value = next(t, i)
	DrawLineUI(sigil:WaitForChild(current), sigil:WaitForChild(value))
	
	current = value
end

Took the create line function from this:

Placefile:
linePlotter.rbxl (46.4 KB)