Applied Trigonometry

☆☆☆

One of the most common uses of trigonometry is computer graphics. It is used for graphic placement and animation. The most widely used computer technology that displays graphics is the one you are staring at right now, a browser. Browsers use HTML, CSS and Javascript. With a text editor, your browser and some knowledge (available for free at W3Schools.com ), you can apply trigonomtry and have fun with pi.

The following section of this page contains some tips for using trigonometry in your browser.

1) You can veiw all the HTML, CSS and Javascript on any public website. If your browser does not have a Veiw Source option you can try preceding the web address with "view-source:" (view-source:http://pi-r-fun.com/pi2.html) or get an app that will enable you to do so. If the Javascript is not included on the page, the address for the .js files can be found in the HTML head section.

2) It is useful to deal with an angle as a decimal fraction of a revolution, from 0 to 1.00.

2*PI/8=45°=.125*revolution

2*PI/4=90°=.25*revolution

2*PI/2=180°=.50*revolution

3*PI/2=270°=.75*revolution

2*PI=360°=1.00*revolution

assuming r=1

Notice that these angles increase in a counter clockwise rotation on the unit circle. Some engineering occupations use a clockwise rotation. Their term for a clockwise revolution is rev.

To convert rotation (revolution) to radians, multiply rotation by 2PI (or roughly 6.28).

radians=rotation*6.28;

To convert between counter clockwise and clockwise rotation multiply the rotation by -1.

Clockwise_Revolution=Counter_Clockwise_Revolution*-1;

Please note that the astrix symbol * is JavaScript for multiply.

In an educational world dominated by chalk board and paper, SOH CAH TOA is a common mnemonic. It is an abbreviation of Sine=Opposite/Hypotenuse, Cosine=Adjacent/Hypotenuse, Tangent=Opposite/Adjacent. SOH CAH TOA defines ratios but not location.

The digital world is viewed thru the computer screen. The computer screen is a two dimensional array of x and y points. Rene Descartes' cartesian coordinate system, with its Xs and Ys is a technology that helps bridge the worlds of chalk board and computer screen. Perhaps you noticed that the cartesian coordinate system defines the very origin, the very center of the unit circle.

Cartesian coordinates are X and Y pairs. Often a useful way of dealing with coordinates is with polar coordinates. Polar coordinates are distance and angle pairs. I consider the unit circle to be the center ring of a screen friendly polar coordinate system.

Trig functions are ratios of sides of a right triangle. There are different ways of expressing ratios; 1 cup of rice to 2 cups of water has the same ratio of rice to water as 2 cups of rice to 4 cups of water.

A unit circle cartesian coordinate system transforms opposite/hypotenuse to y/hypotenuse, adjacent/hypotenuse to x/hypotenuse, and tangent to y/x.

The unit circle has a hypotenuse of one. The trig ratios remain the same. The sine value is the opposite/hypotenuse ratio at any given angle. Sine(angle)=y/1. To change the hypotenuse to 25 and keep the ratio same, multiply the ratio by 25/25 so y/1*25/25=25y/25.

The cosine value is the x/1 ratio for any given angle on a cartesian coordinate unit circle system. Changing the hypotenuse (in this case to 25) and calculating the x value is the same as the above but substituting x for y, that is Cosine(angle)=x/1=25x/25.

For example at 90° on the unit circle y=1 and x=0. In other words sin(90°)=1 and cos(90°)=0, if a hypotenuse of 25 is used to position an object in cartesian coordinate system the location would be 0x,25y. Multiplying the hypotenuse by the cosine and sine ratios at a chosen angle will give you the x and y values. Those values need to be transformed from cartesian to canvas coordinates (explained below) in order to use the JavaScript and HTML graphics functions.

The following section of this page contains some tips for using trigonometry in your browser.

1) You can veiw all the HTML, CSS and Javascript on any public website. If your browser does not have a Veiw Source option you can try preceding the web address with "view-source:" (view-source:http://pi-r-fun.com/pi2.html) or get an app that will enable you to do so. If the Javascript is not included on the page, the address for the .js files can be found in the HTML head section.

2) It is useful to deal with an angle as a decimal fraction of a revolution, from 0 to 1.00.

2*PI/8=45°=.125*revolution

2*PI/4=90°=.25*revolution

2*PI/2=180°=.50*revolution

3*PI/2=270°=.75*revolution

2*PI=360°=1.00*revolution

assuming r=1

Notice that these angles increase in a counter clockwise rotation on the unit circle. Some engineering occupations use a clockwise rotation. Their term for a clockwise revolution is rev.

To convert rotation (revolution) to radians, multiply rotation by 2PI (or roughly 6.28).

radians=rotation*6.28;

To convert between counter clockwise and clockwise rotation multiply the rotation by -1.

Clockwise_Revolution=Counter_Clockwise_Revolution*-1;

Please note that the astrix symbol * is JavaScript for multiply.

In an educational world dominated by chalk board and paper, SOH CAH TOA is a common mnemonic. It is an abbreviation of Sine=Opposite/Hypotenuse, Cosine=Adjacent/Hypotenuse, Tangent=Opposite/Adjacent. SOH CAH TOA defines ratios but not location.

The digital world is viewed thru the computer screen. The computer screen is a two dimensional array of x and y points. Rene Descartes' cartesian coordinate system, with its Xs and Ys is a technology that helps bridge the worlds of chalk board and computer screen. Perhaps you noticed that the cartesian coordinate system defines the very origin, the very center of the unit circle.

Cartesian coordinates are X and Y pairs. Often a useful way of dealing with coordinates is with polar coordinates. Polar coordinates are distance and angle pairs. I consider the unit circle to be the center ring of a screen friendly polar coordinate system.

Trig functions are ratios of sides of a right triangle. There are different ways of expressing ratios; 1 cup of rice to 2 cups of water has the same ratio of rice to water as 2 cups of rice to 4 cups of water.

A unit circle cartesian coordinate system transforms opposite/hypotenuse to y/hypotenuse, adjacent/hypotenuse to x/hypotenuse, and tangent to y/x.

The unit circle has a hypotenuse of one. The trig ratios remain the same. The sine value is the opposite/hypotenuse ratio at any given angle. Sine(angle)=y/1. To change the hypotenuse to 25 and keep the ratio same, multiply the ratio by 25/25 so y/1*25/25=25y/25.

The cosine value is the x/1 ratio for any given angle on a cartesian coordinate unit circle system. Changing the hypotenuse (in this case to 25) and calculating the x value is the same as the above but substituting x for y, that is Cosine(angle)=x/1=25x/25.

For example at 90° on the unit circle y=1 and x=0. In other words sin(90°)=1 and cos(90°)=0, if a hypotenuse of 25 is used to position an object in cartesian coordinate system the location would be 0x,25y. Multiplying the hypotenuse by the cosine and sine ratios at a chosen angle will give you the x and y values. Those values need to be transformed from cartesian to canvas coordinates (explained below) in order to use the JavaScript and HTML graphics functions.

A square is just a diamond in the rough!

An HTML canvas area must be included in your HTML before you can work with JavaScript and graphics in your browser....

<canvas id="canvas1" width="100" height="100";>

The canvas coordinate system is different than a cartesian coordinate system but it is easy to create vitual cartesian coordinate systems on a canvas. On the canvas coordinate system 0,0 is located in the top left corner. The Y values increase as you move down the canvas. The cartesian system has 0,0 at the center. The Y values increase as you move up from the origin. You can place a virtual cartesian system anywhere on the canvas. The HTML code above has height and width of 100. For demonstration purposes we will place a virtual cartesian coordinate origin at the center of the HTML canvas at 50x,50y. To do this we need six variables and two functions.

var canvasX0=50;

var canvasY0=50;

var crtsnX,crtsnY,cnvsX,cnvsY;

crtsn is an abbreviation for cartesian and cnvs is an abbreviation for canvas.

The following function takes a cartesian y value and returns the canvas y value.

The function subtracts the cartesian y value from the virtual y origin and returns the canvas y value.

function canY(y){ return canvasY0-y; }

The following function takes a cartesian x value and returns a canvas x value.

The function adds the cartesian x value to the virtual x origin and returns the canvas x value.

function canX(x){ return canvasX0+x; }

A note of caution, be careful not type the letter O when you mean number 0.

The next function accepts a rotational value and returns a radian value;

var rotation,rad;

function radVal(rotation){ return rotation*6.28;}

The following code fragment will place the corners of a diamond on a canvas, each corner being 25 pixels from the cartesian origin.

rotation=0;

for(var count=1;count<=4;count+=1){

x1=canX(Math.cos(radVal(rotation))*25);

y1=canY(Math.sin(radVal(rotation))*25);

cntxt.beginPath();

cntxt.arc(x1,y1,2,0,Math.PI*2,true);

cntxt.closePath();

cntxt.fill();

rotation+=.25;

}

If you want to make a square, start with rotation=.125;

<canvas id="canvas1" width="100" height="100";>

The canvas coordinate system is different than a cartesian coordinate system but it is easy to create vitual cartesian coordinate systems on a canvas. On the canvas coordinate system 0,0 is located in the top left corner. The Y values increase as you move down the canvas. The cartesian system has 0,0 at the center. The Y values increase as you move up from the origin. You can place a virtual cartesian system anywhere on the canvas. The HTML code above has height and width of 100. For demonstration purposes we will place a virtual cartesian coordinate origin at the center of the HTML canvas at 50x,50y. To do this we need six variables and two functions.

var canvasX0=50;

var canvasY0=50;

var crtsnX,crtsnY,cnvsX,cnvsY;

crtsn is an abbreviation for cartesian and cnvs is an abbreviation for canvas.

The following function takes a cartesian y value and returns the canvas y value.

The function subtracts the cartesian y value from the virtual y origin and returns the canvas y value.

function canY(y){ return canvasY0-y; }

The following function takes a cartesian x value and returns a canvas x value.

The function adds the cartesian x value to the virtual x origin and returns the canvas x value.

function canX(x){ return canvasX0+x; }

A note of caution, be careful not type the letter O when you mean number 0.

The next function accepts a rotational value and returns a radian value;

var rotation,rad;

function radVal(rotation){ return rotation*6.28;}

The following code fragment will place the corners of a diamond on a canvas, each corner being 25 pixels from the cartesian origin.

rotation=0;

for(var count=1;count<=4;count+=1){

x1=canX(Math.cos(radVal(rotation))*25);

y1=canY(Math.sin(radVal(rotation))*25);

cntxt.beginPath();

cntxt.arc(x1,y1,2,0,Math.PI*2,true);

cntxt.closePath();

cntxt.fill();

rotation+=.25;

}

If you want to make a square, start with rotation=.125;