UNPKG

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