simple-squiggle

A restricted subset of Squiggle
Log | Files | Refs | README

angle_configuration.html (3399B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="utf-8">
      5   <title>math.js | angle configuration</title>
      6   <style>
      7     body, input, select {
      8       font: 11pt sans-serif;
      9     }
     10     input, select, th, #result {
     11       padding: 5px 10px;
     12     }
     13     th {
     14       text-align: left;
     15     }
     16   </style>
     17 
     18   <script src="../../lib/browser/math.js"></script>
     19 </head>
     20 <body>
     21 
     22 <p>
     23   This code example extends the trigonometric functions of math.js with configurable angles: degrees, radians, or gradians.
     24 </p>
     25 
     26 <table>
     27   <tr>
     28     <th>Angles</th>
     29     <td>
     30       <select id="angles">
     31         <option value="deg">deg</option>
     32         <option value="grad">grad</option>
     33         <option value="rad">rad</option>
     34       </select>
     35     </td>
     36   </tr>
     37   <tr>
     38     <th>Expression</th>
     39     <td>
     40       <input id="expression" type="text" value="sin(45)" />
     41       <input id="evaluate" type="button" value="Evaluate">
     42     </td>
     43   </tr>
     44   <tr>
     45     <th>Result</th>
     46     <td id="result"></td>
     47   </tr>
     48 </table>
     49 
     50 <script>
     51   let replacements = {}
     52 
     53   // our extended configuration options
     54   const config = {
     55     angles: 'deg' // 'rad', 'deg', 'grad'
     56   }
     57 
     58   // create trigonometric functions replacing the input depending on angle config
     59   const fns1 = ['sin', 'cos', 'tan', 'sec', 'cot', 'csc']
     60   fns1.forEach(function(name) {
     61     const fn = math[name] // the original function
     62 
     63     const fnNumber = function (x) {
     64       // convert from configured type of angles to radians
     65       switch (config.angles) {
     66         case 'deg':
     67           return fn(x / 360 * 2 * Math.PI)
     68         case 'grad':
     69           return fn(x / 400 * 2 * Math.PI)
     70         default:
     71           return fn(x)
     72       }
     73     }
     74 
     75     // create a typed-function which check the input types
     76     replacements[name] = math.typed(name, {
     77       'number': fnNumber,
     78       'Array | Matrix': function (x) {
     79         return math.map(x, fnNumber)
     80       }
     81     })
     82   })
     83 
     84   // create trigonometric functions replacing the output depending on angle config
     85   const fns2 = ['asin', 'acos', 'atan', 'atan2', 'acot', 'acsc', 'asec']
     86   fns2.forEach(function(name) {
     87     const fn = math[name] // the original function
     88 
     89     const fnNumber = function (x) {
     90       const result = fn(x)
     91 
     92       if (typeof result === 'number') {
     93         // convert to radians to configured type of angles
     94         switch(config.angles) {
     95           case 'deg':  return result / 2 / Math.PI * 360
     96           case 'grad': return result / 2 / Math.PI * 400
     97           default: return result
     98         }
     99       }
    100 
    101       return result
    102     }
    103 
    104     // create a typed-function which check the input types
    105     replacements[name] = math.typed(name, {
    106       'number': fnNumber,
    107       'Array | Matrix': function (x) {
    108         return math.map(x, fnNumber)
    109       }
    110     })
    111   })
    112 
    113   // import all replacements into math.js, override existing trigonometric functions
    114   math.import(replacements, {override: true})
    115 
    116   // pointers to the input elements
    117   const expression = document.getElementById('expression')
    118   const evaluate   = document.getElementById('evaluate')
    119   const result     = document.getElementById('result')
    120   const angles     = document.getElementById('angles')
    121 
    122   // attach event handlers for select box and button
    123   angles.onchange = function () {
    124     config.angles = this.value
    125     config.angles = this.value
    126   }
    127   evaluate.onclick = function () {
    128     result.innerHTML = math.evaluate(expression.value)
    129   }
    130 </script>
    131 
    132 
    133 </body>
    134 </html>