238 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
		
		
			
		
	
	
			238 lines
		
	
	
		
			15 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
|   | <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"> | ||
|  |     𓊗<br><span id="nVal"></span><br><input type="range" id="n" min="1" 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="1.515573018431013534961470538418" step="0.00613592315154256491887235035797" style="width:100%;color:#CECECE"><br> | ||
|  |     ꗳ<br><span id="fromVal"></span><br><input type="range" id="from" min="-12.566370614359172953850573533118" max="12.566370614359172953850573533118" value="0" step="0.00613592315154256491887235035797" style="width:100%;color:#CECECE"><br> | ||
|  |     <input type="text" id="formula" value="cos(x/(247/512))*1.2194238/(247/512)    ;    ((244/512)-acos(cos(x*(4)/2))/pi)*1.564573/(244/512)*2" style="width:100%; text-align:CENTER;COLOR:#CECECE;FONT-SIZE:16PX"><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: { color: '#CECECE' } | ||
|  | 					line:{width:1}, | ||
|  | 					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}, | ||
|  | 					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: false, | ||
|  |                 height: 320, | ||
|  | 				xaxis: {scaleanchor:'y',scaleratio: 1,			          autoscale:false,showgrid:true,zeroline:true,zerolinecolor:'#CECECE',zerolinewidth:2,tick0:0,dtick:1,showticklabels:true ,automargin:true,gridcolor:'#CECECE',tickfont:{color:'#CECECE',size:16},showspikes:false,spikethickness:1,spikedash:'solid',spikemode:'across'}, | ||
|  | 				yaxis: {autoscale:false,showgrid:true,zeroline:true,zerolinecolor:'#CECECE',zerolinewidth:2,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: true, | ||
|  |                 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> |