Languages
[Edit]
EN

JavaScript - Math.sin() method example

14 points
Created by:
AnnLen
9150

Math sin is static method that takes only one parameter and returns approximation of sine mathematical function.

// ONLINE-RUNNER:browser;

console.log( Math.sin( 0                  ) ); //   0 <-     0 degrees
console.log( Math.sin( 1.5707963267948966 ) ); //  ~1 <-  ~90 degrees ==  PI / 2
console.log( Math.sin( 3.1415926535897932 ) ); //  ~0 <- ~180 degrees ==  PI
console.log( Math.sin( 4.71238898038469   ) ); // ~-1 <- ~270 degrees == -PI * (3/2)
console.log( Math.sin( 6.2831853071795850 ) ); // ~-1 <- ~360 degrees ==  PI * 2

console.log( Math.sin(-1.5707963267948966 ) ); // ~-1 <- ~-90 degrees == -PI / 2

Note: 1.2246467991473532e-16 and -1.133107779529596e-15 should be equal to 0 but they are not because of compuptation precision error.


1. Documentation

SyntaxMath.sin(number)
Parametersnumber - integer or float number value that represents angle in radians (primitive value).
Result

number value calculated as sin(x) mathematical function in range -1 to +1 (primitive value).

If function can not be calculate it returns NaN.

Descriptionsin is static method that takes only one parameter and returns approximation of sin(x) 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.sin(rad);
  
	console.log('sin(' + rad + ' rad) = ' + y);
}

3. Working with degrees

// ONLINE-RUNNER:browser;

function calculateSin(deg) {
	var radians = (Math.PI / 180) * deg;
  
  	return Math.sin(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 = calculateSin(deg );
  
  	console.log('sin(' + deg + ' deg) = ' + y);
}

4. Reversed console plot example

// ONLINE-RUNNER:browser;

var x1 = 0.0;     // begining of sine chart
var x2 = 6 * 3.14 // end of sine chart

var dx = 3.14 / 4.0; // x axis step
var dy = 1.0  / 5.0; // y axis step

for (var rad = x1; rad < x2; rad += dx) {
  	var y1 = 0.0;
  	var y2 = Math.sin(rad) + 1;

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

5. Canvas plot example

// ONLINE-RUNNER:browser;

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

    // sine chart range
    var x1 =  0;           // 0 degress
    var x2 = +2 * Math.PI; // +360 degress
    var y1 = -1.0;
    var y2 = +1.0;

    var dx = 0.1;

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

    function calculatePoint(x) {
      var y = Math.sin(x);

      // 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>

References

  1. Sine - Wikipedia

JavaScript - Math (EN)

Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join