O-/𖣠⚪ᗩ∣ᗝ∣Ẏ⚪𖡼𖡼𖡼𖡼⚪𔗢⚪🞋⚪𔗢⚪𖡼𖡼𖡼𖡼⚪Ẏ∣ᗝ∣ᗩ⚪𖣠/𖣠⚪✤ᴥᗩ⚪𖡼𖡼𖡼𖡼⚪𔗢⚪🞋⚪𔗢⚪𖡼𖡼𖡼𖡼⚪ᗩᴥ✤⚪𖣠/𖣠⚪ᗱᗴᴥᗩᗯ✤ꗳⓄᔓᔕ⚪𖡼𖡼𖡼𖡼⚪𔗢⚪🞋⚪𔗢⚪𖡼𖡼𖡼𖡼⚪ᔓᔕⓄꗳ✤ᗯᗩᴥᗱᗴ⚪𖣠/𖣠⚪ЭЄᗩНߦᗱᗴᙏЭЄⓄẎᗝ⚪𖡼𖡼𖡼𖡼⚪𔗢⚪🞋⚪𔗢⚪𖡼𖡼𖡼𖡼⚪ᗝẎⓄЭЄᙏᗱᗴߦНᗩЭЄ⚪𖣠/⚪ᗱᗴ⚪ᕤᕦ⚪ᗩ⚪ᑎ⚪ᕤᕦ⚪ИN⚪ᗩ⚪ᙁ⚪𖣓⚪ߦ⚪ᑎ⚪✻⚪ᴥ⚪ᗩ⚪ᙏ⚪𖣓⚪✤⚪ꕤ⚪ᗱᗴ⚪✤⚪ᴥ⚪ᗱᗴ⚪ߦ⚪人⚪옷⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪옷⚪人⚪ߦ⚪ᗱᗴ⚪ᴥ⚪✤⚪ᗱᗴ⚪ꕤ⚪✤⚪𖣓⚪ᙏ⚪ᗩ⚪ᴥ⚪✻⚪ᑎ⚪ߦ⚪𖣓⚪ᙁ⚪ᗩ⚪ИN⚪ᕤᕦ⚪ᑎ⚪ᗩ⚪ᕤᕦ⚪ᗱᗴ⚪/LMTH.··.⚪ᴥᗱᗴ✤Ⓞᙁߦ⚪ᗱᗴᴥᑎ✤ᗩᗯᴥᑎᑐᑕ⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪ᑐᑕᑎᴥᗯᗩ✤ᑎᴥᗱᗴ⚪ߦᙁⓄ✤ᗱᗴᴥ⚪.··.HTML
2024-04-05 10:58:04 +00:00

238 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<HTML>
<HEAD>
<SCRIPT>
<!--ᐃⵔ··ⵔᐃ··ᐃⵔⵈⵔⵔⵈⵔᐃ··ᐃⵔ··ⵔᐃᐃⵔ··ⵔᐃ··ᐃⵔⵈⵔⵔⵈⵔᐃ··ᐃⵔ··ⵔᐃ--!>
var O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O = new (window.AudioContext || window.webkitAudioContext)();
var O_0_EDON_ROTLICSO_O_OSCILATOR_NODE_0_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_1_EDON_ROTLICSO_O_OSCILATOR_NODE_1_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_2_EDON_ROTLICSO_O_OSCILATOR_NODE_2_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_3_EDON_ROTLICSO_O_OSCILATOR_NODE_3_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_4_EDON_ROTLICSO_O_OSCILATOR_NODE_4_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_5_EDON_ROTLICSO_O_OSCILATOR_NODE_5_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_6_EDON_ROTLICSO_O_OSCILATOR_NODE_6_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_7_EDON_ROTLICSO_O_OSCILATOR_NODE_7_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_8_EDON_ROTLICSO_O_OSCILATOR_NODE_8_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_9_EDON_ROTLICSO_O_OSCILATOR_NODE_9_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_01_EDON_ROTLICSO_O_OSCILATOR_NODE_10_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_11_EDON_ROTLICSO_O_OSCILATOR_NODE_11_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_21_EDON_ROTLICSO_O_OSCILATOR_NODE_12_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_31_EDON_ROTLICSO_O_OSCILATOR_NODE_13_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_41_EDON_ROTLICSO_O_OSCILATOR_NODE_14_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_51_EDON_ROTLICSO_O_OSCILATOR_NODE_15_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_61_EDON_ROTLICSO_O_OSCILATOR_NODE_16_O= O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createOscillator();
var O_EDON_NIAG_O_GAIN_NODE_O = O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.createGain();
O_0_EDON_ROTLICSO_O_OSCILATOR_NODE_0_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**0;
O_1_EDON_ROTLICSO_O_OSCILATOR_NODE_1_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**1;
O_2_EDON_ROTLICSO_O_OSCILATOR_NODE_2_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**2;
O_3_EDON_ROTLICSO_O_OSCILATOR_NODE_3_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**3;
O_4_EDON_ROTLICSO_O_OSCILATOR_NODE_4_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**4;
O_5_EDON_ROTLICSO_O_OSCILATOR_NODE_5_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**5;
O_6_EDON_ROTLICSO_O_OSCILATOR_NODE_6_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**6;
O_7_EDON_ROTLICSO_O_OSCILATOR_NODE_7_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**7;
O_8_EDON_ROTLICSO_O_OSCILATOR_NODE_8_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**8;
O_9_EDON_ROTLICSO_O_OSCILATOR_NODE_9_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**9;
O_01_EDON_ROTLICSO_O_OSCILATOR_NODE_10_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**10;
O_11_EDON_ROTLICSO_O_OSCILATOR_NODE_11_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**11;
O_21_EDON_ROTLICSO_O_OSCILATOR_NODE_12_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**12;
O_31_EDON_ROTLICSO_O_OSCILATOR_NODE_13_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**13;
O_41_EDON_ROTLICSO_O_OSCILATOR_NODE_14_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**14;
O_51_EDON_ROTLICSO_O_OSCILATOR_NODE_15_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**15;
O_61_EDON_ROTLICSO_O_OSCILATOR_NODE_16_O.frequency.value = 1/84.406022589954030768899117092091000289089388918088900852079*3**16;
O_EDON_NIAG_O_GAIN_NODE_O.gain.value = 1/3**4;
O_0_EDON_ROTLICSO_O_OSCILATOR_NODE_0_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_1_EDON_ROTLICSO_O_OSCILATOR_NODE_1_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_2_EDON_ROTLICSO_O_OSCILATOR_NODE_2_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_3_EDON_ROTLICSO_O_OSCILATOR_NODE_3_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_4_EDON_ROTLICSO_O_OSCILATOR_NODE_4_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_5_EDON_ROTLICSO_O_OSCILATOR_NODE_5_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_6_EDON_ROTLICSO_O_OSCILATOR_NODE_6_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_7_EDON_ROTLICSO_O_OSCILATOR_NODE_7_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_8_EDON_ROTLICSO_O_OSCILATOR_NODE_8_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_9_EDON_ROTLICSO_O_OSCILATOR_NODE_9_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_01_EDON_ROTLICSO_O_OSCILATOR_NODE_10_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_11_EDON_ROTLICSO_O_OSCILATOR_NODE_11_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_21_EDON_ROTLICSO_O_OSCILATOR_NODE_12_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_31_EDON_ROTLICSO_O_OSCILATOR_NODE_13_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_41_EDON_ROTLICSO_O_OSCILATOR_NODE_14_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_51_EDON_ROTLICSO_O_OSCILATOR_NODE_15_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_61_EDON_ROTLICSO_O_OSCILATOR_NODE_16_O.connect(O_EDON_NIAG_O_GAIN_NODE_O);
O_EDON_NIAG_O_GAIN_NODE_O.connect(O_TXETNOC_OIDUA_O_AUDIO_CONTEXT_O.destination);
O_0_EDON_ROTLICSO_O_OSCILATOR_NODE_0_O.start();
O_1_EDON_ROTLICSO_O_OSCILATOR_NODE_1_O.start();
O_2_EDON_ROTLICSO_O_OSCILATOR_NODE_2_O.start();
O_3_EDON_ROTLICSO_O_OSCILATOR_NODE_3_O.start();
O_4_EDON_ROTLICSO_O_OSCILATOR_NODE_4_O.start();
O_5_EDON_ROTLICSO_O_OSCILATOR_NODE_5_O.start();
O_6_EDON_ROTLICSO_O_OSCILATOR_NODE_6_O.start();
O_7_EDON_ROTLICSO_O_OSCILATOR_NODE_7_O.start();
O_8_EDON_ROTLICSO_O_OSCILATOR_NODE_8_O.start();
O_9_EDON_ROTLICSO_O_OSCILATOR_NODE_9_O.start();
O_01_EDON_ROTLICSO_O_OSCILATOR_NODE_10_O.start();
O_11_EDON_ROTLICSO_O_OSCILATOR_NODE_11_O.start();
O_21_EDON_ROTLICSO_O_OSCILATOR_NODE_12_O.start();
O_31_EDON_ROTLICSO_O_OSCILATOR_NODE_13_O.start();
O_41_EDON_ROTLICSO_O_OSCILATOR_NODE_14_O.start();
O_51_EDON_ROTLICSO_O_OSCILATOR_NODE_15_O.start();
O_61_EDON_ROTLICSO_O_OSCILATOR_NODE_16_O.start();
<!--ᐃⵔ··ⵔᐃ··ᐃⵔⵈⵔⵔⵈⵔᐃ··ᐃⵔ··ⵔᐃᐃⵔ··ⵔᐃ··ᐃⵔⵈⵔⵔⵈⵔᐃ··ᐃⵔ··ⵔᐃ--!>
</SCRIPT>
<TITLE>⚪ᴥ⚪ᗱᗴ⚪✤⚪Ⓞ⚪ᙁ⚪ߦ⚪◯⚪ᗱᗴ⚪ᗯ⚪ᴥ⚪ᑎ⚪ᑐᑕ⚪◯⚪ИN⚪Ⓞ⚪ꖴ⚪✤⚪ᑐᑕ⚪ИN⚪ᑎ⚪ꗳ⚪◯⚪ᗱᗴ⚪ᴥ⚪ᑎ⚪✤⚪ᗩ⚪ᗯ⚪ᴥ⚪ᑎ⚪ᑐᑕ⚪◯⚪ᗝ⚪ᗱᗴ⚪ꖴ⚪ꗳ⚪ꖴ⚪ᑐᑕ⚪ᗱᗴ⚪ߦ⚪ᔓᔕ⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪𖡼⚪ᔓᔕ⚪ߦ⚪ᗱᗴ⚪ᑐᑕ⚪ꖴ⚪ꗳ⚪ꖴ⚪ᗱᗴ⚪ᗝ⚪◯⚪ᑐᑕ⚪ᑎ⚪ᴥ⚪ᗯ⚪ᗩ⚪✤⚪ᑎ⚪ᴥ⚪ᗱᗴ⚪◯⚪ꗳ⚪ᑎ⚪ИN⚪ᑐᑕ⚪✤⚪ꖴ⚪Ⓞ⚪ИN⚪◯⚪ᑐᑕ⚪ᑎ⚪ᴥ⚪ᗯ⚪ᗱᗴ⚪◯⚪ߦ⚪ᙁ⚪Ⓞ⚪✤⚪ᗱᗴ⚪ᴥ⚪</TITLE>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.1.0/math.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
input[type=text]{
--O_ROLOC_O_COLOR_O:#F2F2F2;
--O_SUIDAR_RULB_O_BLUR_RADIUS_O:0PX;
--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O:1.0PX;
BOX-SHADOW:INSET 0 0 VAR(--O_SUIDAR_RULB_O_BLUR_RADIUS_O) VAR(--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O) VAR(--O_ROLOC_O_COLOR_O),0 0 VAR(--O_SUIDAR_RULB_O_BLUR_RADIUS_O) VAR(--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O) VAR(--O_ROLOC_O_COLOR_O)!IMPORTANT;
BORDER-WIDTH:0;BORDER-RADIUS:65536PX;OVERFLOW:VISIBLE
}
input[type=text]:focus{
border-color: #CECECE;BORDER-WIDTH:0PX;border-style: solid;outline: 1PX SOLID #E7E7E7;
}
input[type=range]::-moz-range-track {
HEIGHT:0PX;
--O_ROLOC_O_COLOR_O:#F2F2F2;
--O_SUIDAR_RULB_O_BLUR_RADIUS_O:0PX;
--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O:1.0PX;
BOX-SHADOW:INSET 0 0 VAR(--O_SUIDAR_RULB_O_BLUR_RADIUS_O) VAR(--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O) VAR(--O_ROLOC_O_COLOR_O),0 0 VAR(--O_SUIDAR_RULB_O_BLUR_RADIUS_O) VAR(--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O) VAR(--O_ROLOC_O_COLOR_O)!IMPORTANT;
BORDER-WIDTH:0;BORDER-RADIUS:65536PX;OVERFLOW:HIDDEN
}
input[type=range]::-moz-range-thumb {
HEIGHT:16PX;WIDTH:16PX;
--O_ROLOC_O_COLOR_O:#F2F2F2;
--O_SUIDAR_RULB_O_BLUR_RADIUS_O:0PX;
--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O:1.0PX;
BOX-SHADOW:INSET 0 0 VAR(--O_SUIDAR_RULB_O_BLUR_RADIUS_O) VAR(--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O) VAR(--O_ROLOC_O_COLOR_O),0 0 VAR(--O_SUIDAR_RULB_O_BLUR_RADIUS_O) VAR(--O_SUIDAR_DAERPS_O_SPREAD_RADIUS_O) VAR(--O_ROLOC_O_COLOR_O)!IMPORTANT;
BORDER-WIDTH:0;BORDER-RADIUS:65536PX;OVERFLOW:HIDDEN
}
</style>
</HEAD>
<BODY STYLE="BACKGROUND:#FFFFFF;FONT-SIZE:16PX;MARGIN:0;COLOR:#CECECE">
<div align="center">
<P STYLE="DISPLAY:NONE">𓊗</P><BR STYLE="DISPLAY:NONE"><span id="nVal" STYLE="DISPLAY:NONE"></span><BR STYLE="DISPLAY:NONE"><input type="range" id="n" min="1" max="16" value="8" style="width:100%;DISPLAY:NONE""><br STYLE="DISPLAY:NONE">
<P STYLE="DISPLAY:NONE"></P><BR STYLE="DISPLAY:NONE"><span id="toVal" STYLE="DISPLAY:NONE"></span><BR STYLE="DISPLAY:NONE"><input type="range" id="to" min="-12.566370614359172953850573533118" max="12.566370614359172953850573533118" value="6.283185307179586476925286766559" step="0.785398163397448" style="width:100%;color:#CECECE;DISPLAY:NONE"><BR STYLE="DISPLAY:NONE">
<P STYLE="DISPLAY:NONE"></P><BR STYLE="DISPLAY:NONE"><span id="fromVal" STYLE="DISPLAY:NONE"></span><BR STYLE="DISPLAY:NONE"><input type="range" id="from" min="-12.566370614359172953850573533118" max="12.566370614359172953850573533118" value="-6.283185307179586476925286766559" step="0.785398163397448" style="width:100%;color:#CECECE;DISPLAY:NONE"><BR STYLE="DISPLAY:NONE">
<input type="text" id="formula" value="(1-cos(x*(4)/2))/2" !value="(1-cos(x*(4)/2))/2 ; acos(cos(x*(4)/2))/pi" style="width:100%; text-align:CENTER;COLOR:#CECECE;FONT-SIZE:16PX;DISPLAY:NONE"><BR STYLE="DISPLAY:NONE">
<div id="k-graph"></div>
<div id="function-graph"></div>
<script>
function clamp(x) {return math.max(math.min(x,1),0)}
// JS equivalent for the map function
function arrayMax(arr) {
return Math.max(...arr.map(e => Math.max(...e)));
}
function arrayMin(arr) {
return Math.min(...arr.map(e => Math.min(...e)));
}
function plot() {
var formulas = document.getElementById('formula').value.split(";");
var fromPIO2 = Number(document.getElementById('from').value);
var toPIO2 = Number(document.getElementById('to').value);
var N = Number(document.getElementById('n').value);
var num_points = 0 + 2 ** N;
document.getElementById('fromVal').innerText = +fromPIO2;
document.getElementById('toVal').innerText = +toPIO2;
document.getElementById('nVal').innerText = +N;
var from = fromPIO2;
var to = toPIO2;
var step = (to - from) / num_points;
var x_vals = math.range(from, to, step, true).toArray();
var k_trace = [];
var function_trace = [];
var all_x = [];
var all_y = [];
formulas.map((formula, i) => {
var scope = {
clamp: function(x) { return math.max(math.min(x, 1), 0); }
};
var kappa_vals = x_vals.map(x => math.evaluate(formula.trim(), { x: x, ...scope}));
var theta_vals = math.map(math.cumsum(kappa_vals), x => x * step);
var x_coords = math.map(math.cumsum(math.map(theta_vals, math.cos)), x => x * step);
var y_coords = math.map(math.cumsum(math.map(theta_vals, math.sin)), x => x * step);
if (x_coords[0] != 0 || y_coords[0] != 0) {
x_coords.unshift(0);
y_coords.unshift(0);
}
k_trace.push({
x: x_coords,
y: y_coords,
mode: 'lines+markers',
// line: { color: '#CECECE' }
line:{width:1,color: '#CECECE' },
marker:{size:2},
hovertemplate:'ꕤ %{x:.256f}'+'<br>人 %{y:.256f}',
name: ''
});
all_x.push(x_coords);
all_y.push(y_coords);
// Now creating the trace for y=f(x)
var y_vals = x_vals.map(x => math.evaluate(formula.trim(), { x: x, ...scope}));
function_trace.push({
x: x_vals,
y: y_vals,
mode: 'lines+markers',
// optional features
// line: { color: '#CECECE' }
line:{width:1,color: '#CECECE' },
marker:{size:2},
hovertemplate:'ꕤ %{x:.256f}'+'<br>人 %{y:.256f}',
name: ''
});
all_x.push(x_vals);
all_y.push(y_vals);
});
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
autosize: true,
height: 428/4,
xaxis: {scaleanchor:'y',scaleratio: 1, showgrid:true,zeroline:true,zerolinecolor:'#CECECE',zerolinewidth:1,tick0:0,dtick:1,showticklabels:false,automargin:true,gridcolor:'#CECECE',tickfont:{color:'#CECECE',size:16},showspikes:false,spikethickness:1,spikedash:'solid',spikemode:'across'},
yaxis: {range: [arrayMin(all_y)-(.0078125*4), arrayMax(all_y)+(.0078125*4)],showgrid:true,zeroline:true,zerolinecolor:'#CECECE',zerolinewidth:1,tick0:0,dtick:1,showticklabels:false,automargin:true,gridcolor:'#CECECE',tickfont:{color:'#CECECE',size:16},showspikes:false,spikethickness:1,spikedash:'solid',spikemode:'across'},
hovermode: 'closest',
dragmode: false,
showlegend: false,
hoverlabel: { bgcolor: "#FFFFFF", font_color: '#9C9C9C', bordercolor: "#CECECE", font_size: 16 }
}
Plotly.newPlot('k-graph',k_trace,layout);
Plotly.newPlot('function-graph',function_trace,layout);
}
plot();
document.getElementById('formula').addEventListener('input', plot);
document.getElementById('from').addEventListener('input', plot);
document.getElementById('to').addEventListener('input', plot);
document.getElementById('n').addEventListener('input', plot);
</script>
</div>
</BODY>
</HTML>