Discovering Trigonometry
I was looking up some information for SQL Server the other day with the books online and found a keyword called COS. I had no idea what it was so I looked it up on the net. It turns out that it is a trigonometric function for the cosign of an angle. It gives you the horizontal distance between the center of the circle, and where the angle ends at the circumference. It’s partner, SIN, gives you the vertical distance.
Well, with me being me, I put a little demo together to make myself amazed. This little script makes an animated red block go around in a circle. Then, two green blocks encircle it in the opposite direction. Fun stuff. It’s not SQL, but javascript and HTML show it off much better then a database.
1 <html>
2 <head>
3 <title>Trig</title>
4 <script>
5 var d = 0;
6 var span;
7 var spang1;
8 var spang2;
9 var dx = 0;
10 var dy = 0;
11 var g = 0;
12
13 function window_load()
14 {
15 span = document.createElement(’span’);
16 span.style.width = “10px”;
17 span.style.height = “10px”;
18 span.style.overflow = “hidden”;
19 span.style.backgroundColor = “red”;
20 span.style.position = “absolute”;
21 document.body.appendChild(span);
22
23 spang1 = document.createElement(’span’);
24 spang1.style.width = “10px”;
25 spang1.style.height = “10px”;
26 spang1.style.overflow = “hidden”;
27 spang1.style.backgroundColor = “green”;
28 spang1.style.position = “absolute”;
29 document.body.appendChild(spang1);
30
31 spang2 = document.createElement(’span’);
32 spang2.style.width = “10px”;
33 spang2.style.height = “10px”;
34 spang2.style.overflow = “hidden”;
35 spang2.style.backgroundColor = “green”;
36 spang2.style.position = “absolute”;
37 document.body.appendChild(spang2);
38
39 move();
40 }
41 function move()
42 {
43 d = d + ((Math.PI * 2) / 360);
44 if(d >= (Math.PI * 2)) d = 0;
45 dy = (400 + (Math.sin(d) * 200)) + 5;
46 dx = (400 + (Math.cos(d) * 200)) + 5;
47 span.style.top = (dy - 5) + “px”;
48 span.style.left = (dx - 5) + “px”;
49 submove();
50 window.setTimeout(“move()”, 5);
51 }
52 function submove()
53 {
54 g -= ((Math.PI) / 90);
55 if(g <= 0) g = Math.PI;
56
57 var gy1 = (dy + (Math.sin(g) * 50)) + 5;
58 var gx1 = (dx + (Math.cos(g) * 50)) + 5;
59 var gy2 = (dy + (Math.sin(g + Math.PI) * 50)) + 5;
60 var gx2 = (dx + (Math.cos(g + Math.PI) * 50)) + 5;
61
62 spang1.style.top = (gy1 - 5) + “px”;
63 spang1.style.left = (gx1 - 5) + “px”;
64 spang2.style.top = (gy2 - 5) + “px”;
65 spang2.style.left = (gx2 - 5) + “px”;
66 }
67 window.onload = window_load;
68 </script>
69 </head>
70 <body>
71 A simple example of trigonometry…
72 </body>
73 </html>
2 <head>
3 <title>Trig</title>
4 <script>
5 var d = 0;
6 var span;
7 var spang1;
8 var spang2;
9 var dx = 0;
10 var dy = 0;
11 var g = 0;
12
13 function window_load()
14 {
15 span = document.createElement(’span’);
16 span.style.width = “10px”;
17 span.style.height = “10px”;
18 span.style.overflow = “hidden”;
19 span.style.backgroundColor = “red”;
20 span.style.position = “absolute”;
21 document.body.appendChild(span);
22
23 spang1 = document.createElement(’span’);
24 spang1.style.width = “10px”;
25 spang1.style.height = “10px”;
26 spang1.style.overflow = “hidden”;
27 spang1.style.backgroundColor = “green”;
28 spang1.style.position = “absolute”;
29 document.body.appendChild(spang1);
30
31 spang2 = document.createElement(’span’);
32 spang2.style.width = “10px”;
33 spang2.style.height = “10px”;
34 spang2.style.overflow = “hidden”;
35 spang2.style.backgroundColor = “green”;
36 spang2.style.position = “absolute”;
37 document.body.appendChild(spang2);
38
39 move();
40 }
41 function move()
42 {
43 d = d + ((Math.PI * 2) / 360);
44 if(d >= (Math.PI * 2)) d = 0;
45 dy = (400 + (Math.sin(d) * 200)) + 5;
46 dx = (400 + (Math.cos(d) * 200)) + 5;
47 span.style.top = (dy - 5) + “px”;
48 span.style.left = (dx - 5) + “px”;
49 submove();
50 window.setTimeout(“move()”, 5);
51 }
52 function submove()
53 {
54 g -= ((Math.PI) / 90);
55 if(g <= 0) g = Math.PI;
56
57 var gy1 = (dy + (Math.sin(g) * 50)) + 5;
58 var gx1 = (dx + (Math.cos(g) * 50)) + 5;
59 var gy2 = (dy + (Math.sin(g + Math.PI) * 50)) + 5;
60 var gx2 = (dx + (Math.cos(g + Math.PI) * 50)) + 5;
61
62 spang1.style.top = (gy1 - 5) + “px”;
63 spang1.style.left = (gx1 - 5) + “px”;
64 spang2.style.top = (gy2 - 5) + “px”;
65 spang2.style.left = (gx2 - 5) + “px”;
66 }
67 window.onload = window_load;
68 </script>
69 </head>
70 <body>
71 A simple example of trigonometry…
72 </body>
73 </html>
March 13th, 2006 at 11:15 pm
[…] So I found out how to do all the grunt work of comming up with measurements for my triangles. I figured there must be an easier way at this. I found a triangle calculator that did just the trick. It is so easy to find things on the internet to assist you in math (or any subject for that matter). Last year I learned some trigonometry on my own and made a simulation of our solar system with JavaScript. I don’t know how todays schools are working, but I do hope that they have some classes instructing students how to use the internet to find the knowledge that they need. […]