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.
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.
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.
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).
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With