Top community members
All Wiki Articles Create Wiki Article

Have you ever heard about encyclopedia for code?

What about: Wiki for Code project?

* because I've tried to share code and my solutions on different services and it was removed or I was unwelcomed
   - maybe it wasn't good place, but this one is.

if you think you have solution that can help someone, you are welcome to share this solution - Click here

JavaScript - Math.tan() method example

0 contributions
2 points

Math.tan() is static method that takes only one parameter and returns approximated value of tangent mathematical function. 

// ONLINE-RUNNER:browser;

console.log( Math.tan( 0                  ) ); //     0 <-    0 degrees
console.log( Math.tan( 0.7853981633974483 ) ); //    ~1 <-  ~45 degrees ==  PI / 4
console.log( Math.tan( 1.5707963267948966 ) ); // ~+Inf <-  ~90 degrees ==  PI / 2

console.log( Math.tan(-0.7853981633974483 ) ); //   ~-1 <- ~-45 degrees == -PI / 4
console.log( Math.tan(-1.5707963267948966 ) ); // ~-Inf <- ~-90 degrees == -PI / 2

Note: 0.9999999999999999, 16331239353195370, -0.9999999999999999 and -16331239353195370 should be equal to 1, +Inf, -1 and -Inf but they are not because of compuptation precision error.


1. Documentation

SyntaxMath.tan(number)
Parametersnumber - integer or float number value in radians (primitive value).
Resultnumber value calculated as tan(x) mathematical function (primitive value).
DescriptionMath.tan() is static method that takes only one parameter and returns approximated value of tangent mathematical function.

2. Working with radians

// ONLINE-RUNNER:browser;

var x1 = 0.0;          // begining of calculation in radians
var x2 = Math.PI / 2;  // ending of calculation radians

var dx = Math.PI / 36; // calculation step in degrees

for (var rad = x1; rad <= x2; rad += dx) {
  	var y = Math.tan(rad);
  
	console.log('tan(' + rad + ' rad) = ' + y);
}

3. Working with degrees

// ONLINE-RUNNER:browser;

function calculateTan(deg) {
	var radians = (Math.PI / 180) * deg;
  
  	return Math.tan(radians);
}

// Example:

var x1 = 0.0;  // begining of calculation in degrees
var x2 = 90.0; // ending of calculation degrees

var dx = 5.0;  // calculation step in degrees

for (var deg = x1; deg  <= x2; deg  += dx) {
	var y = calculateTan(deg );
  
  	console.log('tan(' + deg + ' deg) = ' + y);
}

4. Reversed console plot example

// ONLINE-RUNNER:browser;

var x1 = -3.14 * 2; // begining of sine chart
var x2 = +3.14 * 2; // end of sine chart

var y1 = -4.0;
var y2 = +4.0;

var xSteps = 60;
var ySteps = 60;

var dx = (x2 - x1) / xSteps; // x axis step
var dy = (y2 - y1) / ySteps; // y axis step

function printLine(y1, y2, character) {
	var line = '';
  
  	for(var y = y1; y < y2; y += dy) {
    	line += ' ';
    }
  
    console.log(line + character);
}

for (var rad = x1; rad < x2; rad += dx) {
  	var y = Math.tan(rad);
  
  	if (y <= y1 || y >= y2) {
        console.log(' ');
    } else {
    	printLine(y1, y, '+');
    }
}

5. Canvas plot example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style> #canvas { border: 1px solid black; } </style>
</head>
<body>
  <canvas id="canvas" width="150" height="400"></canvas>
  <script>
    
    var canvas = document.querySelector('#canvas');
    var context = canvas.getContext('2d');

    // tangent chart range
    var x1 = -Math.PI / 2; // -90 degress
    var x2 = +Math.PI / 2; // +90 degress
    var y1 = -10.0;
    var y2 = +10.0;

    var dx = 0.05;

    var xRange = x2 - x1;
    var yRange = y2 - y1;
    
    var yScale = 1.0;

    function calculatePoint(x) {
      var y = Math.tan(x) * yScale;

      // chart will be reversed horizontaly because of reversed canvas pixels

      var nx = (x - x1) / xRange;       // normalized x
      var ny = 1.0 - (y - y1) / yRange; // normalized y
      
      var point = {
        x: nx * canvas.width,
        y: ny * canvas.height
      };

      return point;
    }

    console.log('x range: <' + x1 + '; ' + x2 + '> // angles in radians');
    console.log('y range: <' + y1 + '; ' + y2 + '>');

    var point = calculatePoint(x1);
    
    context.beginPath();
    context.moveTo(point.x, point.y);

    for (var x = x1 + dx; x < x2; x += dx) {
      point = calculatePoint(x);
      context.lineTo(point.x, point.y);
    }

    point = calculatePoint(x2);
    context.lineTo(point.x, point.y);
    context.stroke();

  </script>
</body>
</html>

See also

  1. JavaScript - Math.atan() method example
  2. JavaScript - Math.atan2() method example

References

  1. Trigonometric functions - Wikipedia

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more