logo graphic


A unit circle has radius of 1.0 unit, and a diameter of 2.0 units. At the center of a unit circle is a Cartesian X,Y origin. As the radius is rotated around the center it is a hypotenuse of right angles on a X,Y Cartesian System.
Circumference=2*Pi*radius.(Because X is such an important algebra variable many computer languages use an asterisk as the multiplication symbol). The unit circle has a radius of 1.0. The circumference of unit circle is 2*Pi*1.0.

The radian system of angle measure is essentially a fraction (or percentage) of the circumference of a unit circle.
360 degrees=2*Pi*radian=100%
270 degrees=3*Pi*radian/2=75%
180 degrees=Pi*radian=50%
90 degrees=Pi*radian/2=25%
Because the radius of a unit circle is 1.0, 1.0 can be substituted for radian in the above formulas and other radian based trigonometric functions.
360 degrees=2*Pi*1=100%
270 degrees=3*Pi*1/2=75%
180 degrees=Pi*1=50%
90 degrees=Pi*1/2=25%

An angle can be considered the percentage of the circumference of the inscribed arc. X and Y values are required to locate points on a surface.

The Degree System and the Radian System define circles that are abstract because they have no size. A unit could be a centimeter or a mile. Trigonometry on a computer screen requires a radius with real units.

The red squares on the above unit circle could be connected to create a pentagon or a pentagram. To make a pentagon or a pentagram (five point star), divide 1.0 by 5 (if you want to make a hexagon divide by 6); the result is 0.20. Add that value to a value that starts at 0.00, the loop ends at 1.00. The five values are, 0.20, 0.40, 0.60, 0.80, and 1.00.
The above graphic was created with a JavaScript loop. The JavaScript loop counts from 0.00 to 1.00 by .20 increments. The Y value is the sine is the of the loop counter, the X value is the cosine of the loop counter. The trigonometry is done in radians so the loop values are multiplied by 2*Pi (r=1 on a unit circle). The values are scaled and transposed to the screen coordinate system.

On my tablet I can make the above circle appear larger or smaller by sliding my fingers across the screen. There still are the same number of units on X and Y axes they are just closer or farther apart. The reality of creating a unit circle on a HTML canvas is that it must be based upon screen graphic units, in this case it is pixels. The radius of the above unit circles is 250 pixels (250px). All programming languages that I am aware of have loop structures where you repeat a procedure a number of times. The above circle has a radius of 250px. The X value is the cosine of increment (the loop counter) value times 2*Pi times 250. The Y value is sine of increment (the loop counter) value times 2*Pi times 250. Additionally those locations need be transposed to the screen coordinate system.

I find using 0.00 to 1.00 rather than radians as a middle step simplifies creating polygons and stars on a screen. Trigonometric functions require radian values so the decimal point values are multiplied 2Pi, and then multiplied by the radius to get the real X an Y values.

To define and rotate the corners of a polygons or stars, it is much simpler to divide and add decimal point values to decimal point values rather than radian values to radian values.

In conclusion, I realize that degrees and radians are independent of size scale, they represent circles as an abstraction and must be scaled to size to be turned into a physical reality, however, I consider percent of circumference first, then scale to size, a much simpler way to deal with angles!

My concern here is computer graphics not math or physics.
Below is a jpg of a percent based unit circle. Feel free to down load and print!

percent based unit circle

home unit circle