Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Algorithm for drawing line with thickness / width

I'm looking for a fast algorithm that draws lines with a certain thickness. The lines don't have to be antialiased, speed is priority. Something fairly simple like this would suffice:

The use case is a Javascript game where worms leave trails. (HTML5 Canvas obviously draws lines, but getImageData() is very slow and so is collision detection)

I couldn't find anything that does this for the last 2.5 hours. And yes, I'm aware that there are almost identical questions on SO, quite a lot of them in fact, but not a single one has a working solution. The only solution I currently have is to draw circles along a Bresenham line, which is not very efficient.

Some code (pseudo-code, JS or at least a link to an article) would be great.

like image 419
blade Avatar asked Nov 16 '13 18:11

blade


People also ask

What is the best algorithm for drawing thick lines?

Drawing Thick Lines The Bresenham algorithm is a very nice one for drawing 1-pixel lines. It uses only addition and comparison and so runs very fast. However, it can't handle thicker lines.

What is the Bresenham line-drawing algorithm?

Here are some links regarding the Bresenham line drawing algorithm: Program to draw a line using Bresenham's Line Algorithm (BLA) The Bresenham Line-Drawing Algorithm Bresenham-based supercover line algorithm- paints all the points the line touches.

How to calculate the vertical thickness of a line?

You calculate that the vertical thickness of the line should be five pixels. You run Bresenham, but for each pixel (x,y), you actually draw (x,y), (x,y+1), ... (x,y+4).

What is Lineline drawing on the computer?

Line drawing on the computer means the computer screen is dividing into two parts rows and columns. Those rows and columns are also known as Pixels. In case we have to draw a line on the computer, first of all, we need to know which pixels should be on.


1 Answers

http://members.chello.at/~easyfilter/bresenham.html

check at the bottom. It is an anti-aliased line, but should be easy enough to mod to non-anti-aliasing.

like image 192
PlugTrade Avatar answered Nov 11 '22 00:11

PlugTrade