Course notes 23
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Using the Javascript Math Object Part 2

Pi

Math.PI returns the value of Pi. This will be the most used property, as any reference to circular depictions will likely involve some computation of Pi, especially when working in radians. Remember that 360 degrees = 2*Pi radians.


Trigonometry

Javascript provides a whole series of functions to facilitate the calculation of trigonometric relationships and oscillations. While the more you understand about the math applications the more direct you can approach a problem, it is incredibly easy to begin experimenting with the functions and achieve wonderful results. The basic functions include:

  • Math.sin() - the relationship between opposite and hypotenuse sides of the right triangle formed by the passed angle.

  • Math.cos() - the relationship between adjacent and hypotenuse sides of the right triangle formed by the passed angle.

  • Math.tan() - the relationship between opposite and adjacent sides of the right triangle formed by the passed angle.

  • The reverse functions Math.asin(), Math.acos(), and Math.atan() also exist

NOTE - Angle values passed to the above functions are in RADIANS, not degrees.

One useful application of trigonometry is in determining Polar Coordinates. The polar coordinate system, as opposed to the Cartesian plane system, describes position based on an angle and radius from the origin. This allows for easy positioning upon a circular or curved path.

The following example creates a spiral pattern by determining x and y coordinates from a radius and the sin/cos of an angle. The While Loop increments both the angle and radius, creating the spiraling path as the points are calculated. The loop's conditional statement checks that the angle is less than 8pi, which, in radians, is equivalent to 4 full rotations.

    <script>
        function init(){
           	var canvas = document.getElementById('ex03');
            var ctx = canvas.getContext('2d');
            var width = canvas.width;
            var height = canvas.height;
            
            var angle = 0;
            var r = 0;
            ctx.beginPath();
            ctx.moveTo(width/2,height/2);
            while(angle < Math.PI*8){
                var x = r * Math.cos(angle);
                var y = r * Math.sin(angle);
                ctx.lineTo(x+width/2,y+height/2);
                angle+=.01;
                r+=.1;
            }
            ctx.lineWidth = 16;
            ctx.lineCap = 'round';
            
            ctx.stroke();
        }
    </script>
    
    <body onload='init()'>
    <canvas id="ex03" width='400px' height='300px'></canvas>
    
    

Trigonometry also factors greatly into the generation of waves and oscillating phenomena. When mapping the output of a sin or cosine wave the resulting line creates a smooth curve which alternates between -1 and 1. The following example demonstrates the properties of waves as drawn with a sin function.

    <script>
        function init(){
            var canvas = document.getElementById('ex04');
            var ctx = canvas.getContext('2d');
            var width = canvas.width;
            var height = canvas.height;
            
            var points = width;
            var frequency = 5;
            var amplitude = 5; 
            var y = height/2;
            
            ctx.beginPath();
            ctx.moveTo(0,y);
            
            for(var i=1; i <= points; i++){
            	ctx.lineTo(width/points*i,y+Math.sin(i/frequency)*amplitude);
            }
            ctx.stroke();
        }
    </script>
    
    <body onload='init()'>
    <canvas id="ex04" width='400px' height='300px'></canvas>