Creating a line between one point and another

I’m basically trying to make an editable spline graph, but I’m having issues creating lines between the points.

This is the piece of code I made to create the lines, but it has a weird offset for some reason

for i = 1, #SplinePointsPositions - 1 do
		local PointA = SplinePointsPositions[i]
		local PointB = SplinePointsPositions[i + 1]

		local Distance = (Vector2.new(PointA[1], PointA[2]) - Vector2.new(PointB[1], PointB[2])).Magnitude
		
		local Position = Vector2.new(PointA[1] + PointB[1], PointA[2] + PointB[2]) / 2
		
		local Rotation = math.deg(math.atan2(PointA[2] - PointB[2], PointA[1] - PointB[1]))

		local Line = Instance.new("Frame")
		Line.Size = UDim2.new(Distance, 0, 0, 4)
		Line.Position = UDim2.fromScale(Position.X, Position.Y)
		Line.Rotation = Rotation
		Line.AnchorPoint = Vector2.new(0.5, 0.5)
		Line.ZIndex = 2
		Line.Parent = SplineFrame.Spline.Lines
	end

image imageimage

And the higher the difference in Y position the higher the offset from the actual point. I can’t really tell what could be causing this weird behaviour.

Thanks in advance.

Look at this vid:

Your solution looks close. You nailed the position.

Obviously something is wrong with your rotation, but I also notice your Distance variable is wrong, it’s a little bit too long even if the rotation is correct.

Your Rotation and Position calculations are correct. Maybe look into the points themselves? Maybe you aren’t representing or reconstructing them correctly.

I don’t think I can use this in this case because it’s 3d and it uses Cframes with lookat and stuff which is not usable in 2d I don’t think.

Ye, ur right I’ll check if the postitions of the points aren’t wrong

You could just represent the Udim2’s as Vector2s and make use of their .Unit function to get the rotation (the unit is in radians so just convert it using math.deg).

U were indeed right the positions were off because I used the scale of the positions and I did not take in consideration the difference between the x and y axis because the graph is in a rectangle. So if the graph were to be square it would work:
image

For which position would you have to do .Unit to get the rotation in this case?

You could do this:

local positionOne = Vector2.new(PointA[1], PointA[2])
local positionTwo = Vector2.new(PointB[1], PointB[2])

local unit = (positionOne - positionTwo).Unit
local degrees = math.deg(unit)
1 Like

So it’s like .Magnitude but giving you the angle instead of the distance?

Yes. Vector2s offer a lot of useful APIs for things like this, you can read more about it here.

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