How to draw a circle
This past weeks I started to wonder how much work we rely on from great minds. A simple and trivial question that this thought lead to was “how can I draw a circle if there was no arc method”?
I’m grateful that most of these things are already handled for me by minds much smarter than me, but it got me intrigued how I could go back to my math classes and apply the several concepts of math to actually draw such a simple shape.
What describes a circle?
A circle have a few properties that needs to exist in order for us to create it. The two items we need to draw a circle
are the radius and the center of the circle in the plane.
An illustration describing how a circle can be drawn, which then highlights the radius and center of the circle.
What the computer sees
Your computer doesn’t draw a shape. It doesn’t have a concept of what “a shape” means. A computer only sets points.
The screen is a grid made of tiny squares called pixels. Each pixel has a position, like (x, y), and a color.
Drawing means choosing which pixels to turn on and which to leave off.
When you ask a computer to draw a circle, nothing round happens internally. The machine calculates many positions that should belong to a circle, then marks those positions on the grid. What your eyes see as a smooth curve is just a dense collection of points placed close together.
Attention!
Attention!
The Bresenham’s line algorithm has been used for decades to draw shapes on n-dimensional rasters, although in recent times it is often supplemented or replaced by floating-point algorithms, anti-aliased techniques, and GPU-accelerated rendering methods.
If I would like to draw a circle I would need to have dots and these dots be connected by lines. The more dots you have, the more lines you will have, the more smooth your circle will look.
An illustration describing that the more points you add to your shape, the smoother it becomes.
Well, all I need are points and connect these points by lines to form a circle but how can I define such points that when connected will make a circle? There are quite a few methods to draw a circle:
- Parametric (trigonometric) method
- Midpoint circle algorithm
- Bresenham’s circle algorithm
- Polar coordinates iteration
On this article we will be focusing on the trigonometric one since I was curious on what exactly we can do with
sin and cos trigonometric functions.
What is cos and sin functions
For us, cos and sin are ways to provide an angle, and it spits out a value between 0 and 1. We can then use this
value to calculate where the point should be painted in the screen.
Attention!
Attention!
There is a more formal definition of cos and sin which can be seen in sine and cosine in Wikipedia.
For our purpose we only care about that the value return by cos and sin are values between 0 and 1.
Now that we have a value between 0 and 1 we can use this value to multiply it by the x and y value to get a point
in the path of the circle.
An illustration which allows you to choose an angle and it will show where the point will live in the circle definition
x = cx + r * cos(180) = 10.00 y = cy + r * sin(180) = 45.00Attention!
Attention!
The value passed to cos and sin in the example are angles passed in degrees, but Math.cos and Math.sin in Javascript accepts the degrees in radians. To fix that, under the hood we are converting the degrees to radians by doing (angleDegrees * Math.PI) / 180. The “why” is beyond the scope of this blog post.
Now that we have a way to calculate many points that describes a point it’s just a matter of creating a function to create x number of points and draw them in the canvas:
See the Pen Untitled by whatupnewyork (@whatupnewyork) on CodePen.
There you, now you know how to draw a circle from scratch in case you don’t have access to a function that does that for you.