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 edge
Ymax: Ymax, // maximum Y
x: Xmin, // X value of Ymin point; updated for every scanline
dx: Xmax - Xmin, // Delta X
dy: Ymax - Ymin // Delta Y
});
The new X after every scanline is calculated this way:
// aet is active edge table
if (aet[i].dx != 0 && aet[i].dy != 0) {
// this is not a vertical edge
var incr = aet[i].dy / aet[i].dx; // =1/(dx/dy) ... dx/dy=m
if (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
.