Angle configuration

File: angle_configuration.html (click for a live demo)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>math.js | angle configuration</title>
  <style>
    body, input, select {
      font: 11pt sans-serif;
    }
    input, select, th, #result {
      padding: 5px 10px;
    }
    th {
      text-align: left;
    }
  </style>

  <script src="https://unpkg.com/mathjs@12.4.1/lib/browser/math.js"></script>
</head>
<body>

<p>
  This code example extends the trigonometric functions of math.js with configurable angles: degrees, radians, or gradians.
</p>

<table>
  <tr>
    <th>Angles</th>
    <td>
      <select id="angles">
        <option value="deg">deg</option>
        <option value="grad">grad</option>
        <option value="rad">rad</option>
      </select>
    </td>
  </tr>
  <tr>
    <th>Expression</th>
    <td>
      <input id="expression" type="text" value="sin(45)" />
      <input id="evaluate" type="button" value="Evaluate">
    </td>
  </tr>
  <tr>
    <th>Result</th>
    <td id="result"></td>
  </tr>
</table>

<script>
  let replacements = {}

  // our extended configuration options
  const config = {
    angles: 'deg' // 'rad', 'deg', 'grad'
  }

  // create trigonometric functions replacing the input depending on angle config
  const fns1 = ['sin', 'cos', 'tan', 'sec', 'cot', 'csc']
  fns1.forEach(function(name) {
    const fn = math[name] // the original function

    const fnNumber = function (x) {
      // convert from configured type of angles to radians
      switch (config.angles) {
        case 'deg':
          return fn(x / 360 * 2 * Math.PI)
        case 'grad':
          return fn(x / 400 * 2 * Math.PI)
        default:
          return fn(x)
      }
    }

    // create a typed-function which check the input types
    replacements[name] = math.typed(name, {
      'number': fnNumber,
      'Array | Matrix': function (x) {
        return math.map(x, fnNumber)
      }
    })
  })

  // create trigonometric functions replacing the output depending on angle config
  const fns2 = ['asin', 'acos', 'atan', 'atan2', 'acot', 'acsc', 'asec']
  fns2.forEach(function(name) {
    const fn = math[name] // the original function

    const fnNumber = function (x) {
      const result = fn(x)

      if (typeof result === 'number') {
        // convert to radians to configured type of angles
        switch(config.angles) {
          case 'deg':  return result / 2 / Math.PI * 360
          case 'grad': return result / 2 / Math.PI * 400
          default: return result
        }
      }

      return result
    }

    // create a typed-function which check the input types
    replacements[name] = math.typed(name, {
      'number': fnNumber,
      'Array | Matrix': function (x) {
        return math.map(x, fnNumber)
      }
    })
  })

  // import all replacements into math.js, override existing trigonometric functions
  math.import(replacements, {override: true})

  // pointers to the input elements
  const expression = document.getElementById('expression')
  const evaluate   = document.getElementById('evaluate')
  const result     = document.getElementById('result')
  const angles     = document.getElementById('angles')

  // attach event handlers for select box and button
  angles.onchange = function () {
    config.angles = this.value
    config.angles = this.value
  }
  evaluate.onclick = function () {
    result.innerHTML = math.evaluate(expression.value)
  }
</script>


</body>
</html>