Values used in maths are inaccurate; causes disconnect on GUI effect

[TheEpicPlasmeticGuy]

before i start, please let me know if this is should be moved into Code Review instead, as i technically do have code that “works”, however has seemingly unexpected and incorrect results in specific scenarios.

I was currently attempting to make a nice selection effect wherein a “moving node” hovers over the position of a NPC, and by using rotation, another stationary node on the screen can rotate to aim at this moving node and then a long rectangle parented will be rotated along to face this moving node and stretch to span the distance between the circles, creating the illusion of a connection between the two.

you can hopefully see how this effect looks when seemingly working correctly, but how the bug can appear in specific angles.

this effect seemingly functions properly at a normal viewpoint, however apparently the maths I was using to rotate and stretch the “connection” began to faulter once i started looking at the NPC from more arbitrary angles

not sure how that clip embed will look until i actually post this, hopefully it works well lol

the code for how i actually accomplished this effect can be seen here:

	-- this is how i found where to actually place the "moving node" so it sits on the NPC's position
	local Vector : Vector3, IsOnScreen = Camera:WorldToScreenPoint(HoveringBot.HumanoidRootPart.Position)
	
	-- this places the "moving node" right onto the position of the NPC
	MovingNode.Position = UDim2.new(0.5, Vector.X - MovingNodeAbsolutePos.X, 0, (Vector.Y - MovingNodeAbsolutePos.Y) + 10)
	local MNAbsolutePosition = MovingNode.AbsolutePosition
	
	-- this gives me the difference between the X and Y
	local X, Y = StationaryNodeAbsoPos.X - MNAbsolutePosition.X, StationaryNodeAbsoPos.Y - MNAbsolutePosition.Y
	
	-- this stretches the rectangle across the distance
	NodeToNodeConnection.Size = UDim2.new(0, 10, 0, math.sqrt((X^2) + (Y^2)))
	
	-- this rotates the circle that the rectangle is parented to,
	-- so that it will actually aim at the "moving circle"
	NodeToNodeConnection.Parent.Rotation = Y < 0 and 
		-180 + -math.deg(math.atan(X/Y)) or -math.deg(math.atan(X/Y))

the main problem i have is that the rotation of the stationary node and stretching of the rectangle isnt actually precise enough to land onto the moving node, and in turn it creates an obvious disconnect. my guess the inaccuracy stems from the fact that WorldToScreenPoint returns a whole number of pixels, and that this whole number doesnt give enough precision to then accurately be used in the maths and properly complete the effect.

please let me know if there is either a problem with my own code that causes this shear, a different way to get the position of the NPC on the players screen that will give me enough precision if my guess is correct, or just another way i could do this effect that wouldnt have any problems

(edit 1: added some pictures to see the problem faster/for ppl who may not want to click on the clips’ link)

[TheEpicPlasmeticGuy]

one thing i should also add is that the moving node that is placed onto the NPC’s position is clearly working as intended, however the problem may actually be at the X and Y variables as these are the ones actually being used for the maths…?

[VegetationBush (FartedWayTooHard)]

There’s a special function in the math library called atan2 that’s perfect for your scenario:

local rotation = math.deg(math.atan2(Y, X))

It may just be some inaccuracy within the math, so this should fix the issue.
However, I do not see any code where you position NodeToNodeConnection as that may be part of the problem.

[TheEpicPlasmeticGuy]

fire username

@VegetationBush

There’s a special function in the math library called atan2 that’s perfect for your scenario:

local rotation = math.deg(math.atan2(Y, X))

sadly i do not believe this solution works…? i implemented it like this:

  NodeToNodeConnection.Parent.Rotation = math.deg(math.atan2(Y, X))

and this was the result:

@VegetationBush

However, I do not see any code where you position NodeToNodeConnection as that may be part of the problem.

The reasoning behind rotating the stationary node is that since the NodeToNodeConnection rectangle is parented to it, it will be like the barrel of a tank where it will move to aim in the direction of the stationary node, and this in turn would position the rectangle instead of needing to do the math myself. this does raise a good point though; i may try just manually setting the position myself and see if i atleast get better results

[VegetationBush (FartedWayTooHard)]

It looks like it’s perpendicular to the correct rotation.

Try using:

UDim2.new(0, math.sqrt((X^2) + (Y^2)), 0, 10)

Instead of:

UDim2.new(0, 10, 0, math.sqrt((X^2) + (Y^2)))

[TheEpicPlasmeticGuy]

@TheEpicPlasmeticGuy

i may try just manually setting the position myself and see if i atleast get better results

i stuck to this, did a bunch of tiny value tweaking so that it would center perfectly but i finally got it to work by doing this method instead!

(hopefully thats enough evidence to show theres no more disconnecting lol, just trust my word that i see no more disconnecting issues at all )

as for your latest reply @VegetationBush,

@VegetationBush

It looks like it’s perpendicular to the correct rotation.

this may have accidentally appeared as if the case however i am pretty sure it was just a really inconsistent variety of returned angles

@VegetationBush

Try using:

UDim2.new(0, math.sqrt((X^2) + (Y^2)), 0, 10)

Instead of:

UDim2.new(0, 10, 0, math.sqrt((X^2) + (Y^2)))

i dont think this would have worked as this would have literally rotated the rectangle around its own centre like this:

thank you for your previous help though and suggestion on manually correcting the positioning of the rectangle!