JSFiddle - React, Tailwind, and code Playground
JavaScript
function lineArray(startPoint, endPoint) {
function useVisionLine(start, end) {
var y1 = start.x,
x1 = start.y,
y2 = end.x,
x2 = end.y
var i; // loop counter
var i; // loop counter
var ystep, xstep; // the step on y and x axis
var error; // the error accumulated during the increment
var errorprev; // *vision the previous value of the error variable
var y = y1,
x = x1; // the line povars
var ddy, ddx; // compulsory variables: the double values of dy and dx
var dx = x2 - x1;
var dy = y2 - y1;
POINT(y1, x1); // first point
// NB the last point can't be here, because of its previous point (which has to be verified)
if (dy < 0) {
ystep = -1;
dy = -dy;
} else ystep = 1;
if (dx < 0) {
xstep = -1;
dx = -dx;
} else xstep = 1;
ddy = 2 * dy; // work with double values for full precision
ddx = 2 * dx;
if (ddx >= ddy) { // first octant (0 <= slope <= 1)
// compulsory initialization (even for errorprev, needed when dx==dy)
errorprev = error = dx; // start in the middle of the square
for (i = 0; i < dx; i++) { // do not use the first point (already done)
x += xstep;
error += ddy;
if (error > ddx) { // increment y if AFTER the middle ( > )
y += ystep;
error -= ddx;
// three cases (octant == right->right-top for directions below):
if (error + errorprev < ddx) // bottom square also
POINT(y - ystep, x);
else if (error + errorprev > ddx) // left square also
POINT(y, x - xstep);
else { // corner: bottom and left squares also
POINT(y - ystep, x);
...