On Day 6, we enhance the BiVariantGrapher class with an important new feature: anti-aliasing.
What is Anti-Aliasing?
Anti-aliasing is a technique used in computer graphics to smooth out the jagged edges ("aliasing") that can appear when rendering images at low resolutions. By blending colors at the boundaries, anti-aliasing creates a more visually appealing and realistic image.
How is it implemented here?
In this grapher, anti-aliasing is achieved by dividing each virtual pixel into a grid of smaller sub-pixels. For each sub-pixel, the color-mapping function is evaluated, and the results are averaged to determine the final color of the pixel. This process smooths out abrupt color transitions and reduces visual artifacts.
Trade-offs:
While anti-aliasing greatly improves image quality, it comes at a computational cost. The number of calculations increases by a factor of n² (for example, a factor of 4 means 16 times as many color calculations per pixel). This can make rendering slower, especially for high anti-aliasing settings.
Try toggling anti-aliasing on and off, and experiment with different factors to see the effect on both image quality and performance.
svgutils.js, svg-grid-grapher.js and
a revised bivargrapher.js that now
applies anti-aliasing to smooth out jaggedness.
SVG should be produced here on script load.