(This article is part of a series. You can jump to the previous section or the next section if you would like to.)
In the previous section we calculated a new initial value for the numerator. This is the code we added:
// get the fractional x coordinate where the edge intersects the horizontal line through the pixel center
const x_intersect = start_x_fractional - Math.round((start_y_fractional - FixedPointVector.HALF) * dx_dy);
// calculate the horizontal offset from the ideal starting point (the pixel center)
const x_offset = x_intersect - FixedPointVector.HALF;
// convert the offset into a numerator value, by multiplying by dy and rounding off
let numerator = (dy * x_offset + FixedPointVector.HALF) >> FixedPointVector.SHIFT;
It turns out the calculations can be simplified quite a bit. If we remove the rounding when calculating x_intersect, and keep in mind that dx_dy actually is dx / dy, we can merge and rewrite the expressions as:
let numerator = (dy * (start_x_fractional - FixedPointVector.HALF) -
dx * (start_y_fractional - FixedPointVector.HALF)) >> FixedPointVector.SHIFT;
This means that we only need two multiplications and three subtractions to add subpixel precision to the scan conversion process. Not bad! The improvement in visual quality certainly is worth the extra calculations.
Also note that the last expression here also is more exact than the first version - as we now no longer do any divisions or rounding.
The core part of the scan conversion code becomes:
let numerator = (dy * (start_x_fractional - FixedPointVector.HALF) -
dx * (start_y_fractional - FixedPointVector.HALF)) >> FixedPointVector.SHIFT;
// get the x coordinate of the first pixel
let x = start[0];
// truncate the fixed point start and end y coordinates since we operate on integer y coordinates
let y = start[1] >> FixedPointVector.SHIFT;
let end_y = end[1] >> FixedPointVector.SHIFT;
while (y < end_y) {
numerator += dx;
if (numerator > dy) {
x += pixel_step;
numerator -= dy;
}
buffer[y] = x;
y++;
}
Have a look at the final version of the demo app. And with that, we are done - for now, at least. In the next section we will sum up this article series and compare and contrast the two rasterizing methods we have been discussing.