The computer is also time-efficient when performing integer multiplication by powers of 2. Therefore, it is an efficient method for scan-converting straight lines. To accomplish this, the algorithm always increments either x or y by one unit depending on the slope of line. The increment in the other variable is determined by examining the distance between the actual line location and the nearest pixel. This distance is called decision variable or the error.

Author:Voodoojas Zululmaran
Language:English (Spanish)
Published (Last):22 May 2006
PDF File Size:6.24 Mb
ePub File Size:18.96 Mb
Price:Free* [*Free Regsitration Required]

A new project always starts with a problem-solving question. How do you draw a line on a computer screen without canvas or libraries? As someone new to coding you often hear about algorithms. It uses the Cartesian Coordinate System — the one used as the basis in many popular algorithms.

You can implement it in JavaScript see the live demo here. Do you ever have a project you always lay off for later? Well, drawing a line in HTML without canvas was something on my mind for over a year.

And I finally decided to make this tutorial on the subject! By the way you can follow me on Twitter for more freemium tutorials.

Check out this line drawing demo live in action on a sample page I created. The above is the result of the algorithm explained in this tutorial. A line is drawn between two points on a typical raster display.

How would something like this work? I created this demo screenshot to show the basic idea in action. Given any two end points — we can render a line on a raster display. How Does It Work? Drawing a line in any direction requires thinking in quadrants. While the algorithm for Quadrant 1 is simple — implementation for all quadrants and octants is tricky. But only logistically. The rest of the cases are simple mirror images of the two octants in Quadrant 1.

This means that instead of reinventing the wheel all you have to do is swap some variables around or flip their sign here and there. The problem is — how do we code that in JavaScript? Many reasons! You can spawn as many as you like. I come from a game development background. And in games you often deal with drawing lines.

Of course, raw HTML rendering speed will be an issue. And yes, further optimizations will be required to achieve meaningful performance.

But the focus of this line drawing tutorial is primarily set on the line drawing algorithm explanation itself. You can always re-implement it in any other raster environment or graphics library. Implementing Line Drawing Algorithm in JS We take two deltas and calculate the slope of the line equation, based on two end points of the line. In this tutorial, of course, we will use JavaScript. Then we calculate the delta of the line as a whole here stored in variable D — you can think of it as the mathematical equation for drawing a line.

Or in other words the line slope equation. Here y0 refers to the Y coordinate of the first point on the line. Once the pixel is rendered, we can adjust the current pixel position using the delta steps we calculated. In addition, depending on axis-dominance, the for-loop must be modified to travel in that direction. To complete the algorithm, we must also adjust parameters based on what octant out of eight we are in. This is explained in detail in the following section.

But we need to cover all directions. After all, a random line can be plotted from any point on the raster screen to any other point. This means that in addition to the pseudo code above, we need to take care of two other things: Quadrant-Aware Algorithm. The algorithm must adjust iterator parameters, for each of the four quadrants. We can swap line endpoints to make sure that we always draw the line from left to right, and split the algorithm in two main parts line is pointing either up or down from the starting point.

Or we can branch out in four different cases, for each quadrant respectively, and just swap x-axis and y-axis iterators to accommodate for line direction. But even in each of the four quadrants, the line will either be x-axis or y-axis dominant. This means there are actually not four but eight different cases. One for each of the eight octants. Luckily, the algorithm stays exactly the same, all we need to do is switch the iterators and branch out a few times.

But the algorithm presented in the following example will take care of all possible cases. You can juggle around parameters and improvise on branching out. But the basic idea is there. The main if-statement branches out between two potential axis-dominance cases. The code is octant-aware — within the two if-statement scopes you will also see that the code basically mirrors itself between the X and Y axis tracked by variables px and py but the algorithm logic is pretty much identical otherwise.

This means the actual medium in which you choose to draw the data depends entirely on you. In this demo I used a basic DIV grid. This function pixel x, y is how you choose to implement the drawing of the line based on what type of raster display you will use.

Final Words Often, people ask me how to improve their coding skills. I usually suggest choosing a project slightly above the range of your current ability. If you make sure to finish it, this experience will help you advance your coding skills. For me, this was that type of project.

If you read this far, tweet to the author to show them you care. Tweet a thanks Learn to code for free. Get started freeCodeCamp is a donor-supported tax-exempt c 3 nonprofit organization United States Federal Tax Identification Number: Our mission: to help people learn to code for free.

We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

DIN 28182 PDF

Bresenham’s line algorithm in hindi



Bresenham's line and circle algorithm


Related Articles