134 lines
3.3 KiB
HTML
134 lines
3.3 KiB
HTML
|
<!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="../../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>
|