Is there a more optimal way to choose lines than the Bresenham algorithm?

Question

Is there a more optimal way to choose lines than the Bresenham algorithm?

In my HTML canvas project, I am currently drawing lines using a 2d-array that represents blocks of 10x10 pixels. I use Bresenham's algorithm to store line-ids in this array so that I can determine which line is selected.

While this method works, I find that it lacks precision. When I overlay a representation of the array on my canvas, I notice that many of the 10x10 blocks are not completely filled even though the line crosses them:

Is there a more accurate solution to ensure that all grid blocks the actual line passes through are captured?

javascript canvas bresenham

Answer 1

Answer №1

It seems like there may have been a mistake in the rounding process when populating the lookup table using the Bresenham algorithm, or perhaps the coordinates were scaled incorrectly before executing the algorithm.

You can view my solution and see that the squares are perfectly aligned in this jsFiddle.

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas {
    width: 250px;
    height: 250px;
}

JavaScript

var $canvas = $("#myCanvas"),
    ctx = $canvas[0].getContext("2d");

// Remaining JavaScript code for grid creation, line rendering, and event handling...

Answer 2

It seems like there may have been a mistake in the rounding process when populating the lookup table using the Bresenham algorithm, or perhaps the coordinates were scaled incorrectly before executing the algorithm.

You can view my solution and see that the squares are perfectly aligned in this jsFiddle.

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas {
    width: 250px;
    height: 250px;
}

JavaScript

var $canvas = $("#myCanvas"),
    ctx = $canvas[0].getContext("2d");

// Remaining JavaScript code for grid creation, line rendering, and event handling...

Answer 3

Answer №2

Consider the mouse cursor position as a miniature circle, such as one with a 5px radius, and determine if it intersects with the line.

Refer to this Q&A for the mathematical explanation.

JavaScript

A basic function to identify intersection:

function lineCircleIntersects(x1, y1, x2, y2, cx, cy, cr) {
    var dx = x2 - x1,
        dy = y2 - y1,
        a = dx * dx + dy * dy,
        b = 2 * (dx * (x1 - cx) + dy * (y1 - cy)),
        c = cx * cx + cy * cy,
        bb4ac;

    c += x1 * x1 + y1 * y1;
    c -= 2 * (cx * x1 + cy * y1);
    c -= cr * cr;
    bb4ac = b * b - 4 * a * c;

    return bb4ac >= 0;  // true: collision, false: no collision
}

View it in action on this jsFiddle, but be aware that this function may also indicate a collision if the cursor lies on the line's slope outside [x1, y1], [x2, y2]. This decision is yours to make :)

You can explore the line-circle-collision library on GitHub for further assistance.

Answer 4

Consider the mouse cursor position as a miniature circle, such as one with a 5px radius, and determine if it intersects with the line.

Refer to this Q&A for the mathematical explanation.

JavaScript

A basic function to identify intersection:

function lineCircleIntersects(x1, y1, x2, y2, cx, cy, cr) {
    var dx = x2 - x1,
        dy = y2 - y1,
        a = dx * dx + dy * dy,
        b = 2 * (dx * (x1 - cx) + dy * (y1 - cy)),
        c = cx * cx + cy * cy,
        bb4ac;

    c += x1 * x1 + y1 * y1;
    c -= 2 * (cx * x1 + cy * y1);
    c -= cr * cr;
    bb4ac = b * b - 4 * a * c;

    return bb4ac >= 0;  // true: collision, false: no collision
}

View it in action on this jsFiddle, but be aware that this function may also indicate a collision if the cursor lies on the line's slope outside [x1, y1], [x2, y2]. This decision is yours to make :)

You can explore the line-circle-collision library on GitHub for further assistance.

Is there a more optimal way to choose lines than the Bresenham algorithm?

Answer №1

Answer №2

Similar questions

What is the best way to invoke a controller method using jQuery within a cshtml file?

Using AJAX to pass post variables

jQuery scrollTop animates to the start of the webpage

The image located at 'http://localhost:8080/favicon.ico' was unable to load due to a violation of its content

How can you style a two-item list in Material-UI React to display the items side by side?

Having trouble choosing multiple options from autocomplete drop-down with Selenium web-driver in Python

Assigning a changing label to a radio button

CSS classes designed to mimic JavaScript object attribute-value pairs

Comparing prevProps and this.props in React Native Redux: What is the most effective method?

Repeat a command in Discord.js indefinitely

What is the best way to accomplish this using typescript/adonis?

Assigning a new classification to the primary object in the evolving array of objects

Dynamic Binding of ng-model to DOM Element in AngularJS

Passing a string array from View to Controller using Url.Action in MVC framework

What is the best way to invoke an HTML file using a jQuery function in a JavaScript file?

directive ng-click not responding

Vue 3's "<Component :is="">" feature magically transforms camelCase into lowercase

Utilizing Backward and Forward Navigation with AJAX, JavaScript, and Window.History

The complexity surrounding various versions of jQuery, the .noConflict method, and the jQuery migrate feature

What is the best way to ensure that the operations are not completed until they finish their work using RX