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% of circumference
270 degrees=3*Pi*radian/2=75% of circumference
180 degrees=Pi*radian=50% of circumference
90 degrees=Pi*radian/2=25% of circumference

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 of the JavaScript Math object.

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.

JavaScript is the computer language of the browser. JavaScript loop structures are often useful for creating graphics on the screen. 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. The result is 0.20.
Add that value repeatedly to a variable that starts at 0.0. Stop the procedure when the variable is 1.0 or greater. That is the basic algorithm.

The five values are, 0.20, 0.40, 0.60, 0.80, and 1.00.

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