Bifalgorithm post

If screens are made up of tiny squares, how do computers make curved lines look smooth? Let's zoom in to anti-aliasing and rasterization. Last time we saw that vector graphics store instructions for drawing shapes and curves, but your screen still has to display those shapes using a fixed grid of pixels. Turning a vector shape into pixels is called rasterization. But there's usually a problem. Curves and diagonal lines don't fit perfectly into a square grid. Imagine trying to draw a circle on a grid. Without any smoothing, the computer has to make a hard choice for every pixel. So either a pixel is part of the circle or it isn't. And because the curve crosses the grid unevenly, its edge turns into a tiny staircase and those jagged steps are called aliasing. Anti-aliasing is a rendering technique that makes that staircase less noticeable. So instead of treating every edge pixel as fully inside or fully outside the shape, the computer estimates how much of it the shape covers. A pixel that's mostly covered gets most of the circle's color and a pixel that's barely touched gets just a little and blends with the background. So the edge gets a thin layer in between colors. When we zoom in, we can see that everything looks a bit blurry, but zoomed back out, your eyes reap those blended pixels as a smooth curve. Pixels are always and will always be squares, but the computer is making approximations of where the curve passes through them. And this is the same basic idea that helps smooth the edges of text, icons, illustrations, and 3D graphics. Follow for more episodes, or zoom in to how technology around us works. Bye.

If screens are made up of tiny squares, how do computers make curved lines look smooth? Let's zoom in to anti-aliasing and rasterization. Last time we saw that…