Listen to this article:

*voice is AI-generated

If you’ve stumbled across this article it means one of two things: you are asking this same question or you’re curious to learn more. Well, in either case, I’ll help answer it. See, we all use computers, and with computers…well…comes a screen so that we can see what we are doing on the computer (quite self-explanatory). However, we tend to forget how these displays (called monitors) actually work. These monitors function off of the use of pixels, which come in the shape of a square.

Now, this may make sense to you already, however, I’m willing to bet that you’re curious to find out how circles can be displayed with square pixels because “by nature” circles are…well…round, not square. This is not quite self-explanatory and can become quite complicated, however, my goal with this article is to give you a simple, concise, and clear answer to this question that will make your understanding of pixels (and circles) that much better.

The Pixel

Before we can delve into circles, we must get a quick brief on pixels. A pixel is nothing but an LED that can emit red, green, or blue colors (this is known as RGB). Moreover, this LED can do more than emit red, green, or blue, it can actually emit a combination of the three. This is what gives the LED the ability to display any color it wants because when you break colors down; they are actually a combination of red, green, and blue. And, because pixels are made of LEDs, they too can display whatever color they want.

Alright, now that you know what a pixel is I’ll give you a little more background on how they work. Having one pixel that shows the color white, for example, isn’t very helpful; however, if we take 10,000 pixels and make each pixel show a different color in the rainbow we can produce the following image:

Remember, this image is nothing but many super-tiny independent squares showing their own color. The only reason why this image looks the way it does is because we took all those hundreds of pixels and put them together in order to create an image. 

Finally, what we can do is take all those pixels and stick them onto something that will hold them together, a monitor. Now all we have to do is tell the monitor what each pixel should be colored as and then we have our image! (The process of talking to the monitor is done by your computer’s GPU, which does all the image processing in the computer).

Drawing Shapes

Now that you know how pixels work/function, we can look into how shapes are displayed. It’s actually a lot more simpler than you’d think. Just like with the rainbow image shown previously, a shape on a screen is nothing but certain pixels colored in a certain order to make an image that resembles a shape!

For example, let’s say that we want to draw a rectangle. The first thing we’d have to do before even showing anything on the screen is figuring out the dimensions of the rectangle. All we would do is tell the computer that we want to draw a rectangle with a width of 100 pixels and a height of 70 pixels. Wait one second and ponder upon the last sentence. I didn’t tell the computer the dimensions of the rectangle in inches, centimeters, feet, or anything else; instead, I told the computer the dimensions of the rectangle in pixels. This is because after all calculations and processes are done…the computer will have to display the shape on a series of pixels! Therefore, giving pixel information to the computer makes its job that much easier.

Now that the computer has the rectangle’s dimensions, it needs to figure out what pixels need to be colored and (of course) what color they should be. It does this by coloring each pixel in the shape’s width and length in a specific order on a specific starting point on the screen (the starting point tends to also be specified by the user). (Remember: the length of each side of the shape was told to the computer by us when we said 100 pixels by 70 pixels.) Once that’s done, then the computer sends the pixel data to the monitor for it to display. The following is an example of the completed output:

I know you may be wondering, “Why isn’t it filled in…,” that’s a good question and the answer to that question is quite simple. The computer didn’t fill it in… Alright, what I mean by that is if the computer wanted to fill in the rectangle, then it would have to perform some extra calculations in order to figure out the pixels inside the rectangular  region to color. And, this calculation isn’t complicated at all, it’s just that for simplicity’s sake I haven’t shown a filled-in rectangle, however, it’s 100% possible.

Now that you know how pixels work and shapes can be drawn we’re done…right? Well…not exactly because the whole purpose of this article was to talk about how circles are drawn and that’s what’s next!

The Finale: Circles!

You may be wondering, “Why do circles need their own section…”, and to that I’ll tell you that “Drawing circles not only need their own section but their own article!” You see, drawing “flat sided” shapes like rectangles, triangles, rhombuses (or rhombi…they’re the same thing!), or any other polygon takes the same steps as described in the previous section. However, circles are the outliers because they are “perfectly round, with no corners or edges”. This is a major problem because the literal thing we use to display shapes have CORNERS AND EDGES. So this raises the question (the whole premise of this article), “How can circles be displayed with square pixels? Or, how can something perfectly rounded be displayed with something perfectly flat?”. The answer to this question is simpler…and more complicated that you thought.

Let’s start with the simpler part. The simple part is that all we need to do is tell the computer our circle’s dimensions, which in this case is its radius. Then, the computer will perform a calculation to figure out where the “edge” or circumference of the circle is and send that pixel data to the monitor. The complicated part of this whole thing is…well…the calculation. 

The whole dilemma with circle drawing is that the circumference of the circle doesn’t perfectly line up with the pixels on the screen. This can be seen in the following image:

As you can see, the blue circle is the circle that we want to draw to the screen and the black pixels are the pixels representing the circle. Hopefully, now you can see what I mean by the circumference of the circle not perfectly fitting over the pixels. Some parts of the circle only need one pixel whereas others need up to 7 pixels!

Why is this? Well, when the computer sees that it needs to draw a circle to the screen, the first thing it does is figure out the radius of the circle (the length from the center of the circle to the circumference) in pixels. Then, it will find the first point on the circle’s circumference and find its designated pixel. Next, it will begin to approximate; in other words, it will have to bargain. If the circle’s circumference slices through that pixel, then it’ll be colored; otherwise, the pixel won’t be colored. (This can be seen with the single colored pixels in the top right/left and bottom right/left of the prior image.) However, an issue arises: what if the circle’s circumference intersects multiple pixels (this is where the “real” bargaining occurs). If the computer sees that circumference slices a pixel instead of grazing/touching it, then it will be colored; otherwise, if the pixel is just grazed/touched, then it won’t be colored because it doesn’t carry any weight/isn’t as visible to the circle’s circumference.

The result from this bargaining is a somewhat jagged circle that doesn’t really look like a circle but that’s the best that the computer can do. But, you may be asking yourself, “Well why don’t the circles on my computer look jagged?” This is actually because of something quite simple (I promise), it’s because of how tiny pixels are. Recall back to the “rainbow pixel” example previously where I showed how pixels worked, remember how I said that because we have so many pixels together on the monitor the image looks like a rainbow? The same situation is going on here. For example, if we take seven pixels and assign each pixel a color of the rainbow, the image would have zero blending between each color, right? Now let’s apply that to circles. If we are given very few pixels to show a circle, then our drawing will look very “jagged with no blending between the pixels”. However, if we are given thousands of pixels on a monitor and then we draw our circle it will look something like this:

If you zoom in to the circle, you’ll still see jagged lines because…well…the computer is still approximating the circumference of the circle and also because…well…you’re looking at the circle on a device that also uses pixels! Also, this whole time I’ve been referring to the “computer” as the “thing” that does this approximation, however, an algorithm or calculation actually does this.

Alright, that pretty much sums up this article. Hopefully, this article helped answer the question “How can circles be displayed with square pixels?” In summary, circles can be displayed with square pixels because we can check to see whether or not a pixel is intersected by the circle’s circumference or not, which tells the computer whether to tell the monitor to light/color those pixels or not. 

I hope this article was helpful and made understanding the world of computers a little bit easier!

Thank you.