I’m creating a node based editor. When I connect two nodes together, I want a thin line to appear to connect the input and outputs together. I thought this would be some simple trigonometry maths (treat the two points like a triangle) but I can’t get the line to A) be angled correctly and B) be positioned so that it starts at point A and ends at point B.
The two white circles are examples of node connections. I got the absolute position of them (as they are parented to the boxes so the positions are relative to that node) and tried using math.tanh(Blength / Alength) to calculate the angle (I figured because I had Y == Opposite and X == Adjacent, the use of tan would be appropriate) . I did math.sqrt(Alength^2 + Blength^2) to get the hypotenuse, which would end up being the length of the connection line.
Here was my test script:
local Content = script.Parent.WidgetBase.Content local SceneContent = workspace.SceneContent function TanH(A, B) return math.tanh(B / A) end function Length(A, B) return math.sqrt(A^2 + B^2) end local A, B = Content.BeginSequence.NodeOutput, Content.EndSequence.NodeInput local XLength = B.AbsolutePosition.X - A.AbsolutePosition.X local YLength = B.AbsolutePosition.Y - A.AbsolutePosition.Y local line = Instance.new("Frame") line.BorderSizePixel = 0 line.AnchorPoint = Vector2.new(0.5, 0) line.Size = UDim2.new(0, Length(XLength, YLength), 0, 1) local rotation = math.deg(TanH(YLength, XLength)) line.Rotation = rotation line.Position = UDim2.new(0, A.AbsolutePosition.X - (XLength / 2), 0, A.AbsolutePosition.Y - (YLength / 2)) line.Parent = Content.Parent -- Content does not fill the whole screen, but its parent does!
This gives off a very incorrect output as I’m clearly doing something wrong:
From the test it seems the length of the line is correct but the angle and position are completely wrong.
Does anyone know how I can correctly angle and position this line so that it starts at the green circle and ends at the red one?