UNPKG

3.4 kBHTMLView Raw
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>
\No newline at end of file