Screen, Cartesian, and Polar

Coordinate Systems

The screen coordinate system is not a cartesian coordinate system. The Y values increase as you move up the Y axis of a cartesian coordinate system and increase as you move down the Y axis of a screen coordinate system.
The cartesian coordinte system lends itself to mathimatics. Algebra trigonometry and calculus all work with the cartesian coordinate system. The cartesian coordinate system is at the center of the unit circle.

The percent (more accurately the decimal value of 0 to 1) of counter clockwise rotation around the center of a circle is the angle theta, in a counter clockwise rotational system of trigonometry. Some engineering fields use clockwise rotational trigonometry, JavaScript trigonometric functions use the counter clockwise radian system. The approximate radian value of the angle theta is the percent of rotation times 6.28 (2Pi).

I think of the unit circle as a bull's-eye of a target that can be mapped to a screen. The first ring of the target has a hypotenuse of 1, the second ring has a hypotenuse of 2, the third ring has a hypotenuse of three and so on. Hypotenuse length and angle is the system of distance and angle pairs that is the polar coordinate system.

It takes only a few lines of code to create a 0,0 cartesian origin and transpose a polar coordinate design to the screen coordinate system.

It is very complicated to scale, rotate, and reposition polygons that are based on a screen coordinate system. It is much simpler to create and modify polygons using the polar coordinate system.

This website includes four downloadable JavaScript polygon functions based on the polar coordinate system. They can create regular and irregular polygons on HTML canvasses and SVG canvasses.

The graphic at the top of this page is a jpg of a HTML canvas with a design created with one of those functions.

The percent (more accurately the decimal value of 0 to 1) of counter clockwise rotation around the center of a circle is the angle theta, in a counter clockwise rotational system of trigonometry. Some engineering fields use clockwise rotational trigonometry, JavaScript trigonometric functions use the counter clockwise radian system. The approximate radian value of the angle theta is the percent of rotation times 6.28 (2Pi).

I think of the unit circle as a bull's-eye of a target that can be mapped to a screen. The first ring of the target has a hypotenuse of 1, the second ring has a hypotenuse of 2, the third ring has a hypotenuse of three and so on. Hypotenuse length and angle is the system of distance and angle pairs that is the polar coordinate system.

It takes only a few lines of code to create a 0,0 cartesian origin and transpose a polar coordinate design to the screen coordinate system.

It is very complicated to scale, rotate, and reposition polygons that are based on a screen coordinate system. It is much simpler to create and modify polygons using the polar coordinate system.

This website includes four downloadable JavaScript polygon functions based on the polar coordinate system. They can create regular and irregular polygons on HTML canvasses and SVG canvasses.

The graphic at the top of this page is a jpg of a HTML canvas with a design created with one of those functions.