Unity – Draw A Debug Circle – Part 1

While developing a game, drawing a debug circle can be immensely helpful. Inspired by DrawDebugHelpers class of Unreal Engine, I have decided to extend (override) Unity’s Debug class to make that possible.

This tutorial is a part of tutorial series Unity – Draw Custom Debug Shapes

How to Draw a Circle

Drawing a sphere can be done using some basic trigonometry operations. Instead of a “perfect” circle we will draw a polygon with an adjustable number of edges/segments which gives us “good enough” approximation of the said circle. This approach is also useful since the same method can be used to draw any regular polygon (triangle, quad, pentagon, hexagon, etc.).

Main Ingredients: SIne and Cosine

Sine and cosine functions are cornerstones of this tutorial. As a basic example, let’s start with a circle defined in a XY coordinate space, with a radius 1.0 and with four points (A, B, C, D) marked on it. Additionally, we can check an angle of vectors connecting circle’s origin with each of the points, as well as a right-angle triangle formed by circle’s origin (O), A and A’ (projection of the point A on the X-axis).

Given the triangle (O, A, A’) it is possible to determine that the segment (A, A’) can be considered as “opposite” to the angle of the vector (O, A) and segment (O, A’) can be considered as “adjacent”.
Also, length of the hypothenuse of this triangle (O,A) is equal to the radius of the circle, which is in this case 1.0.

To calculate the length of “opposite” segment, we can use the equation:

sin(\alpha)=opposite/hypothenuse

Since hypothenuse of the triangle is equal to 1.0, we can simply rearrange the equation as:

opposite = sin(\alpha)

Same applies for “adjacent”, where the following equation is true:

cos(\alpha)=adjacent/hypothenuse

and by using the same analogy, we get:

adjacent=cos(\alpha)

Length of the “adjacent” side can be viewed as X coordinate of the point A, and length of the “opposite” side can be viewed as Y coordinate of the point A.

Using this relationship, each of the given points can be defined in (X, Y) format as follows:

A = (cos(45\degree), sin(45\degree))

B = (cos(135\degree), sin(135\degree))

C = (cos(225\degree), sin(225\degree))

D = (cos(315\degree), sin(315\degree))

This property gives us a possibility to find coordinates of any point on the circle, as long as we know the angle of the vector between the origin of the circle and the said point. Based on that, it is possible to define, for example, eight points on the circle, and by connecting them receive an inscribed octagon which is an approximation of the said circle:

As you can assume, these points could also be defined inside of the Unity project, and connected using the Debug.DrawLine function. Next part of this tutorial explains how to do that.