Drawing system has "rough" and "jaggered" sides

Help and Feedback Scripting Support
#1

I am creating a drawing system using triangulation and I am currently getting rough edges, I have tried making them with UI corner with the radius of 1,0 so they are circle but that didn’t seem to do anything, border pixel is off.

Without UI corner(Normal):
https://gyazo.com/784e0fff56d4e55d5c4b418056c67634

UI Corner with radius of 1,0:

https://gyazo.com/4d002a4a95da944233a7987025e3917e

My drawing function:


function drawLine(pos1, pos2, studSize)
	local frame = Instance.new("Frame")
	local UICorner = Instance.new("UICorner")
	local distanceInPixel = (pos2 - pos1).Magnitude
	local deltaX = pos2.X - pos1.X
	local deltaY = pos2.Y - pos1.Y
	local angleBetween = math.atan2(deltaY, deltaX)
	frame.BackgroundColor3 = selectedColor
	UICorner.CornerRadius = UDim.new(1, 0)
	UICorner.Parent = frame
	frame.BorderSizePixel = 0
	frame.Name = "DrawingPiece"
	frame.AnchorPoint = Vector2.new(0.5, 0.5)
	frame.Position = UDim2.new(0, (pos1.X + pos2.X)/2 - Canvas.AbsolutePosition.X, 0, (pos1.Y + pos2.Y)/2 - Canvas.AbsolutePosition.Y)
	frame.Size = UDim2.new(0, distanceInPixel + 1,0, 5)
	frame.Rotation = math.deg(angleBetween)
	frame.Parent = Canvas
end

Any help will be amazing, thanks in advance.

#2

The reason you get rough edges is because of this:

Screenshot_4
Screenshot_41085×605 9.97 KB

As you can see, when you connect two lines at an angle there is a gap on one of the sides unless they are perfectly parallel. There are a couple ways to combat this problem, but by far the easiest is to add an additional circular frame with the UICorner of <1,0> at this point, with the radius of the width/2. This would look something like this:

Screenshot_5
Screenshot_51048×593 8.2 KB

Note that the red line is the point the lines connect at, and the blue circle is the new circle you add with radius width/2.

#3

How can I calculate the the exact spot and size I need to put it?

#4

The position is pos1, the size (in your case) would be UDim2<0,5,0,5>.

#5

Is there an function I can do to make sure that there is another UI touching, I don’t want to be adding a circle if there isn’t another frame to connect

#6

You’re currently drawing lines around your screen, if you already drew one and are now inserting another line, then add it. Otherwise, don’t. Put it in the code block that calls drawLine(), and run checks accordingly.