<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="http://CDNJS.CLOUDFLARE.COM/ajax/libs/mathjs/12.4.1/math.js"></script>
<script src="http://CDN.PLOT.LY/plotly-2.30.1.min.js"></script>
	<style>
		input[type=text]{FONT-FAMILY:ARIAL;
			--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: #C7C7C7;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:12PX;MARGIN:0;COLOR:#C7C7C7;FONT-FAMILY:ARIAL">
<div align="center">
    π“Š—<br><span id="nVal"></span><br><input type="range" id="n" min="0" max="16" value="8" style="width:100%"><br>
    ✀<br><span id="toVal"></span><br><input type="range" id="to" min="-12.566370614359172953850573533118" max="12.566370614359172953850573533118" value="6.283185307179586476925286766559" step="0.785398163396448" style="width:100%;color:#C7C7C7"><br>
    κ—³<br><span id="fromVal"></span><br><input type="range" id="from" min="-12.566370614359172953850573533118" max="12.566370614359172953850573533118" value="-6.283185307179586476925286766559" step="0.785398163396448" style="width:100%;color:#C7C7C7"><br>
    <input type="text" id="formula" value="(1-cos(x*(4)/2))/2 ; acos(cos(x*(4)/2))/pi ; .5+.5*(-1)^floor((4)/2*x/pi)+(-1)^floor((4)/2*x/pi)/(-1-e^(pi*((-(4)/2*x+pi*floor((4)/2*x/pi))^(-1)+(pi-(4)/2*x+pi*floor((4)/2*x/pi))^(-1)))) ; (-1)^floor((x/pi*(4)/2-.5)/1)*(1-abs(mod((x/pi*(4)/2-.5)*2,2)-1)^2)^(1/2)/2+.5" style="width:100%; text-align:CENTER;COLOR:#C7C7C7;FONT-size:12PX"><br>
    <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:{width:1},
					marker:{size:2},
                    hovertemplate:'κ•€ %{x:.256f}'+'<br>δΊΊ %{y:.256f}',
                    name: ''
                });

                all_x.push(x_coords);
                all_y.push(y_coords);

                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',
					line:{width:1},
					marker:{size:2},
					hovertemplate:'κ•€ %{x:.256f}'+'<br>δΊΊ %{y:.256f}',
                    name: ''
                });
                all_x.push(x_vals);
                all_y.push(y_vals);
            });
  
            // Build annotations for every single curve in k_trace and function_trace
            var annotations_k_trace = [];
            var annotations_function_trace = [];
            for (let trace of k_trace) {
                annotations_k_trace.push({
                    x: trace.x[0], 
                    y: trace.y[0], 
                    text:trace.x[0].toString() + 'π“Š—' + trace.y[0].toString(), // Update here
                    font: {color:'#C7C7C7',size:12,family:"ARIAL"},
                    showarrow: false,
                    arrowhead: 0,
                },{
                    x: trace.x[trace.x.length - 1], 
                    y: trace.y[trace.y.length - 1],
                    text:trace.x[trace.x.length - 1].toString() + 'π“Š—' + trace.y[trace.y.length - 1].toString(), // And here
                    font: {color:'#C7C7C7',size:12,family:"ARIAL"},
                    showarrow: false,
                    arrowhead: 0,
                });
            }

            for (let trace of function_trace) {
                annotations_function_trace.push({
                    x: trace.x[0], 
                    y: trace.y[0], 
                    text:trace.x[0].toString() + 'π“Š—' + trace.y[0].toString(), // Update here
                    font: {color:'#C7C7C7',size:12,family:"ARIAL"},  
                    showarrow: false,
                    arrowhead: 0,
                },{
                    x: trace.x[trace.x.length - 1], 
                    y: trace.y[trace.y.length - 1], 
                    text:trace.x[trace.x.length - 1].toString() + 'π“Š—' + trace.y[trace.y.length - 1].toString(), // And here
                    font: {color:'#C7C7C7',size:12,family:"ARIAL"},
                    showarrow: false,
                    arrowhead: 0,
                });
            }

            var layout_k_trace = {
                annotations: annotations_k_trace,
                margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
                autosize: true,
                height: 320,
				xaxis: {scaleanchor:'y',scaleratio: 1, autoscale:false, showgrid:true, zeroline:true, zerolinecolor:'#C7C7C7', zerolinewidth:2, tick0:0, dtick:1, showticklabels:true ,automargin:true,gridcolor:'#C7C7C7',tickfont:{color:'#C7C7C7',size:12,family:"ARIAL"},showspikes:false, spikethickness:1, spikedash:'solid', spikemode:'across'},
				yaxis: {range: [arrayMin(all_y)-(.0078125*2), arrayMax(all_y)+(.0078125*2)],showgrid:true,zeroline:true,zerolinecolor:'#C7C7C7',zerolinewidth:2,tick0:0,dtick:1,showticklabels:false,automargin:true,gridcolor:'#C7C7C7',tickfont:{color:'#C7C7C7',size:12,family:"ARIAL"},showspikes:false,spikethickness:1,spikedash:'solid',spikemode:'across'},
                hovermode: 'closest',
				dragmode: false,
                showlegend: false,
                hoverlabel: { bordercolor: "#C7C7C7", font:{size:12,color:'#C7C7C7',family:"ARIAL"} }
            }

            var layout_function_trace = {
                annotations: annotations_function_trace,
                margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
                autosize: true,
                height: 320,
				xaxis: {scaleanchor:'y',scaleratio: 1, autoscale:false, showgrid:true, zeroline:true, zerolinecolor:'#C7C7C7', zerolinewidth:2, tick0:0, dtick:1, showticklabels:true ,automargin:true,gridcolor:'#C7C7C7',tickfont:{color:'#C7C7C7',size:12,family:"ARIAL"},showspikes:false, spikethickness:1, spikedash:'solid', spikemode:'across'},
				yaxis: {range: [arrayMin(all_y)-(.0078125*2), arrayMax(all_y)+(.0078125*2)],showgrid:true,zeroline:true,zerolinecolor:'#C7C7C7',zerolinewidth:2,tick0:0,dtick:1,showticklabels:false,automargin:true,gridcolor:'#C7C7C7',tickfont:{color:'#C7C7C7',size:12,family:"ARIAL"},showspikes:false,spikethickness:1,spikedash:'solid',spikemode:'across'},
                hovermode: 'closest',
				dragmode: false,
                showlegend: false,
                hoverlabel: { bordercolor: "#C7C7C7", font:{size:12,color:'#C7C7C7',family:"ARIAL"} }
            }

            Plotly.newPlot('k-graph',k_trace,layout_k_trace);
            Plotly.newPlot('function-graph',function_trace,layout_function_trace);
        }

        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>