I'm trying to implement the scanline algorithm in Javascript. It looks like my calculation of x is wrong as the lines are to short or to long.

These edges should be filled:

This is how my scanline code fills it:

My edge table has these fields:

``et.push({Ymin: Ymin, // minimum Y of the edgeYmax: Ymax, // maximum Yx: Xmin, // X value of Ymin point; updated for every scanlinedx: Xmax - Xmin, // Delta Xdy: Ymax - Ymin // Delta Y});``

The new X after every scanline is calculated this way:

``// aet is active edge tableif (aet[i].dx != 0 && aet[i].dy != 0) {// this is not a vertical edgevar incr = aet[i].dy / aet[i].dx; // =1/(dx/dy) ... dx/dy=mif (aet[i].dy > 0) {incr = incr;} else {incr = -incr;}aet[i].x += incr;}``

What is wrong in this calculation?

You don't show the scanline algorithm proper, but is looks as if you wanted to treat all scanlines from `Ymin` to `Ymax`. `y` starts a `Ymin` and increases by one for each scanline.

Therefore, the `x` for each scanline should increase by `dx/dy`.

You probably don't need to adjust the sign. Instead, the sign of `dy` is either positive or negative:

``````m = dx / dy                               # slope of the line
x[y + 1] = x[y] + m * dy = x[y] + m       # dy == (y + 1) - y == 1
x[y - 1] = x[y] + m * dy = x[y] - m       # dy == (y - 1) - y == -1
``````

You scan in `x` direction and hence rule out horizontal lines for which `dy == 0`. That also shows in your maths: You cannot divide by `dy` when `dy == 0`.

Top