Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

JavaScript - Math.asin() method example

0 contributions
13 points

The Math.asin function returns number in radians in the range -Math.PI/2 to +Math.PI/2. The function calculates inverted sine function value.

// ONLINE-RUNNER:browser;

function calculateAngle(a, h) {
	return Math.asin(a / h);
}

/*
  |\
  | \ h
a |  \
  |__*\ <- angle
    b
*/

var a, b, h;

// a, b and h build isosceles right triangle
a = 3; 
b = a;
h = Math.sqrt(a * a + b * b);
console.log( calculateAngle(a, h) ); // 0.7853981633974483 <- ~45 degrees

// a, b and h build half of equilateral triangle
a = 3; 
b = a * Math.sqrt(3); 
h = Math.sqrt(a * a + b * b);
console.log( calculateAngle(a, h) ); // 0.5235987755982989 <- ~30 degrees

// a, b and h are not able to build triangle
a = 3; 
b = a; 
h = 1;
console.log( calculateAngle(a, h) ); // NaN

1. Documentation

SyntaxMath.asin(number)
Parameters

number - integer or float number value that represents result of operation adjacent / hypotenuse on right triangle (primitive value).

number should be in the range -1 to +1.

Result

number value in radians in the range -Math.PI/2 to +Math.PI/2 (primitive value).

If value can not be calculated NaN is returned.

Description

asin is a static method that takes only one parameter and returns an approximation of the result of the mathematical function arcsine(x).


2. Working with degrees

// ONLINE-RUNNER:browser;

function calculateAngle(a, h) {
	var angle = Math.asin(a / h);

    return (180 / Math.PI) * angle; // rad to deg conversion
}

/*
  |\
  | \ h
a |  \
  |__*\ <- angle
    b
*/

var a, b, h;

// a, b and h build isosceles right triangle
a = 3; 
b = a;
h = Math.sqrt(a * a + b * b);
console.log( calculateAngle(a, h) ); // ~45 degrees

// a, b and h build half of equilateral triangle
a = 3; 
b = a * Math.sqrt(3); 
h = Math.sqrt(a * a + b * b);
console.log( calculateAngle(a, h) ); // ~30 degrees

// a, b and h are not able to build triangle
a = 3; 
b = a; 
h = 1;
console.log( calculateAngle(a, h) ); // NaN

3. Canvas plot example

// ONLINE-RUNNER:browser;

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

    // arcsine chart range
    var x1 = -1.0;
    var x2 = +1.0;
    var y1 = -Math.PI / 2;
    var y2 = +Math.PI / 2;

    var dx = 0.01;

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

    function calculatePoint(x) {
      var y = Math.asin(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 + '>');
    console.log('y range: <' + y1 + '; ' + y2 + '> // angles in radians');

    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. Inverse 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