2D Triangle pixel off

anhtuan159 · June 15, 2024, 12:58pm

Hi, im trying to draw 2D triangle with EgoMoose module

EgoMoose/Articles/blob/master/2d triangles/2d triangles.md

# 2D Triangles

On occasion you may find it necessary to draw triangles given three points in 2D space. This article aims to go over one method that can be used to create those triangles using knowledge of trigonometry and the 2D rotation matrix.

## Table of Contents

* [Triangle decomposition](#triangle-decomposition)
* [Positioning the UI](#positioning-the-ui)
* [Positioning the UI Anchor points](#positioning-the-ui-anchor-points)
* [Optimization](#optimization)

## Triangle decomposition

The first thing we need to be aware of is that Roblox does not have a singular default shape that can be used to create any 2D triangle. However, using image labels we are able to upload right-angle triangles. Thus, we can decompose any triangle into a maximum of two right-angle triangles and draw from there. We can easily draw this process by placing a perpendicular line on the longest edge and having it intersect with the opposite vertex.

![img1](https://github.com/EgoMoose/Articles/blob/master/3d%20triangles/imgs/img1.png)

Now that we understand the basics of our goal we have to ask ourselves how we can achieve this mathematically. We'll start this process off by finding some information about the triangle depending on what side is the longest.

![img2](https://github.com/EgoMoose/Articles/blob/master/3d%20triangles/imgs/img2.png)

This file has been truncated. show original

but idk why the middle is off pixel?

Code :

local HALF = Vector2.new(0.5, 0.5);

local IMG = Instance.new("ImageLabel");
IMG.BackgroundTransparency = 1;
IMG.AnchorPoint = HALF;
IMG.BorderSizePixel = 0;

local RIGHT = "rbxassetid://319692151";
local LEFT = "rbxassetid://319692171";

local function draw2dTriangle(a, b, c, parent, w1, w2)
	local ab, ac, bc = b - a, c - a, c - b;
	local abd, acd, bcd = ab:Dot(ab), ac:Dot(ac), bc:Dot(bc);

	if (abd > acd and abd > bcd) then
		c, a = a, c;
	elseif (acd > bcd and acd > abd) then
		a, b = b, a;
	end

	ab, ac, bc = b - a, c - a, c - b;

	local unit = bc.unit;
	local height = unit:Cross(ab);
	local flip = (height >= 0);
	local theta = math.deg(math.atan2(unit.y, unit.x)) + (flip and 0 or 180);

	local m1 = (a + b)/2;
	local m2 = (a + c)/2;

	w1 = w1 or IMG:Clone();
	w1.Image = flip and RIGHT or LEFT;
	w1.AnchorPoint = HALF;
	w1.Size = UDim2.new(0, math.abs(unit:Dot(ab)), 0, height);
	w1.Position = UDim2.new(0, m1.x, 0, m1.y);
	w1.Rotation = theta;
	w1.Parent = parent;

	w2 = w2 or IMG:Clone();
	w2.Image = flip and LEFT or RIGHT;
	w2.AnchorPoint = HALF;
	w2.Size = UDim2.new(0, math.abs(unit:Dot(ac)), 0, height);
	w2.Position = UDim2.new(0, m2.x, 0, m2.y);
	w2.Rotation = theta;
	w2.Parent = parent;

	return w1, w2;
end

local screengui = script.Parent

draw2dTriangle(
	screengui.a.AbsolutePosition,
	screengui.b.AbsolutePosition,
	screengui.c.AbsolutePosition,
	script.Parent
)

vipkute0057 · June 15, 2024, 1:06pm

This is a problem related UI in roblox, even how hard you try to correct it, it will have some gap between them, your(EgoMoose, the chad) math is probally correct, I did something like you but failed because it this. The best fix I can think of is adding some offset like 2,3 pixels to fill in the small gaps.