EN
JavaScript - Math.tan() method example
2 points
Math.tan() is static method that takes only one parameter and returns approximated value of tangent mathematical function.
xxxxxxxxxx1
console.log( Math.tan( 0 ) ); // 0 <- 0 degrees2
console.log( Math.tan( 0.7853981633974483 ) ); // ~1 <- ~45 degrees == PI / 43
console.log( Math.tan( 1.5707963267948966 ) ); // ~+Inf <- ~90 degrees == PI / 24
5
console.log( Math.tan(-0.7853981633974483 ) ); // ~-1 <- ~-45 degrees == -PI / 46
console.log( Math.tan(-1.5707963267948966 ) ); // ~-Inf <- ~-90 degrees == -PI / 2Note:
0.9999999999999999,16331239353195370,-0.9999999999999999and-16331239353195370should be equal to1,+Inf,-1and-Infbut they are not because of compuptation precision error.
| Syntax | Math.tan(number) |
| Parameters | number - integer or float number value in radians (primitive value). |
| Result | number value calculated as tan(x) mathematical function (primitive value). |
| Description | Math.tan() is static method that takes only one parameter and returns approximated value of tangent mathematical function. |
xxxxxxxxxx1
var x1 = 0.0; // beginning of calculation in radians2
var x2 = Math.PI / 2; // ending of calculation radians3
4
var dx = Math.PI / 36; // calculation step in degrees5
6
for (var rad = x1; rad <= x2; rad += dx) {7
var y = Math.tan(rad);8
9
console.log('tan(' + rad + ' rad) = ' + y);10
}xxxxxxxxxx1
function calculateTan(deg) {2
var radians = (Math.PI / 180) * deg;3
4
return Math.tan(radians);5
}6
7
// Example:8
9
var x1 = 0.0; // beginning of calculation in degrees10
var x2 = 90.0; // ending of calculation degrees11
12
var dx = 5.0; // calculation step in degrees13
14
for (var deg = x1; deg <= x2; deg += dx) {15
var y = calculateTan(deg );16
17
console.log('tan(' + deg + ' deg) = ' + y);18
}xxxxxxxxxx1
var x1 = -3.14 * 2; // beginning of sine chart2
var x2 = +3.14 * 2; // end of sine chart3
4
var y1 = -4.0;5
var y2 = +4.0;6
7
var xSteps = 60;8
var ySteps = 60;9
10
var dx = (x2 - x1) / xSteps; // x axis step11
var dy = (y2 - y1) / ySteps; // y axis step12
13
function printLine(y1, y2, character) {14
var line = '';15
16
for(var y = y1; y < y2; y += dy) {17
line += ' ';18
}19
20
console.log(line + character);21
}22
23
for (var rad = x1; rad < x2; rad += dx) {24
var y = Math.tan(rad);25
26
if (y <= y1 || y >= y2) {27
console.log(' ');28
} else {29
printLine(y1, y, '+');30
}31
}xxxxxxxxxx1
2
<html>3
<head>4
<style> #canvas { border: 1px solid black; } </style>5
</head>6
<body>7
<canvas id="canvas" width="150" height="400"></canvas>8
<script>9
10
var canvas = document.querySelector('#canvas');11
var context = canvas.getContext('2d');12
13
// tangent chart range14
var x1 = -Math.PI / 2; // -90 degress15
var x2 = +Math.PI / 2; // +90 degress16
var y1 = -10.0;17
var y2 = +10.0;18
19
var dx = 0.05;20
21
var xRange = x2 - x1;22
var yRange = y2 - y1;23
24
var yScale = 1.0;25
26
function calculatePoint(x) {27
var y = Math.tan(x) * yScale;28
29
// chart will be reversed horizontaly because of reversed canvas pixels30
31
var nx = (x - x1) / xRange; // normalized x32
var ny = 1.0 - (y - y1) / yRange; // normalized y33
34
var point = {35
x: nx * canvas.width,36
y: ny * canvas.height37
};38
39
return point;40
}41
42
console.log('x range: <' + x1 + '; ' + x2 + '> // angles in radians');43
console.log('y range: <' + y1 + '; ' + y2 + '>');44
45
var point = calculatePoint(x1);46
47
context.beginPath();48
context.moveTo(point.x, point.y);49
50
for (var x = x1 + dx; x < x2; x += dx) {51
point = calculatePoint(x);52
context.lineTo(point.x, point.y);53
}54
55
point = calculatePoint(x2);56
context.lineTo(point.x, point.y);57
context.stroke();58
59
</script>60
</body>61
</html>