Drawing a line between two points

Help and Feedback Scripting Support
,
#1

hello I am trying to make a 2D rendering engine in roblox (not very important) and I need a function to make a table filled with coordinates for the rendering to draw to make a line. example:

-- these are the two points I will be feeding into the "draw line" function
point 1 = 5,6 
point 2 = 9,10
-- the function will create a table filled with coordinates this is just an example of what it should output/create
line = {
   {6,7}, {7,8},{8,9}
}

to summarize I need a function that will create a table filled with coordinates for every pixel between two points as shown above. And yes I have heard of the slope equation but Im not sure how to use that. Also I am aware this is alot more advanced than the stuff usually posted here.

also this is what I have so far in my 2D renderer:


The rendering and the transformation math works too just, It looks bad without lines drawn between the points

3 Likes
How would you script UI Beams?
#2

Given two points you can find the slope of a line by the following equation:

Where m represents the slope and (x_1,y_1) represents the x and y component of the first point and (x_2,y_2) represents the x and y component of the second point.

Once we obtain the slope we can then use the point-slope equation to find the equation of a line:

For example, if we have the points (1,6) and (3,2) and want to find the slope we can calculate it as shown below:

Now we can use either the point (1,6) or the point (3,2) and our slope m = -2 to find the equation of a line using the point slope formula:

Simplifying further we obtain:

Now, why did we go through all of this hard work? Well, we only need two points to describe a line. However, there are an infinite amount of points that exist on our line.Therefore we can use the equation of a line that we found above to determine whether a point exists on our line.

So for example, if we wanna determine whether the point (2,4) exists on our line we can plug in x = 2 and y = 4 into our equation above and we find the following:

Simplifying we obtain:

Therefore we know that the point (2,4) exists on our line!

However, this idea works for finding points between two points. The math used above is the same math used in a very efficient algorithm mentioned below which finds what we are looking for.

I would encourage that you take a look at an algorithm called Bresenham’s line algorithm as this is a fast algorithm for calculating exactly what you desire. The algorithm avoids messy calculations such as avoiding floating-point arithmetic and unnecessary steps.

In the algorithm, we are essentially moving along the x-axis and looking to determine whether we should draw our pixel’s y-unit above or draw our pixel’s y-unit below and we’re repeating this process until we reach our desired endpoint.

Some key differences are that the slope must be positive and must have an absolute value of less than one. The algorithm also assumes that the change of x (meaning the difference between our endpoint’s x value and our initial point’s x value) can never be zero to avoid a 0 in the denominator.

You could try to implement this algorithm and create a table where you will then insert the coordinates of the pixels from your initial point to the endpoint.

I hope this could be of some use! I’m interested in reading the other replies to this thread, to see if there is an easier way to perform this task.

8 Likes
#3

I tried to see if I could implement the pseudocode from the wikipedia article but I just cant seem to figure it out. Maybe I need to expand a bit more of my scripting knowledge. Anyways it would be very nice if anyone could help out a bit more. :smiley:

2 Likes
#4

I resolved my issue using the algorithm from Bitmap/Bresenham's line algorithm - Rosetta Code
which somehow works! :smiley:

3 Likes
#5

Just for curiosity, how it now look?? (If possible a screenshot, else nothing but a reply would nice).

#6

WASD to move and Q,E to rotate
:smiley:

2 Likes