New visualization for TSOP: bouncy spectrum from ShadowPlayer.

I swear this is not added for an assignment.
Also fixed minor layout overlapping.

3 files changed, 88 insertions, 3 deletions

diff --git a/libs/music/player b/libs/music/player
index 8b9e78d..ba4469d 100644
--- a/libs/music/player
+++ b/libs/music/player
@@ -129,7 +129,7 @@ The online player was added.
 			<li><a href="/libs/music/player"><h2>Music Library</h2></a></li>
 			<li><ul id="plists"></ul></li>
 			<li><a href="//filestorage.chrisoft.org/music/" target="_blank">Downloads</a></li>
-			<li><a>TSOP 2.6.0</a></li>
+			<li><a>TSOP 2.6.1</a></li>
 		</ul>
 	</div>
 	<div id="content">
@@ -165,6 +165,7 @@ The online player was added.
 			<select id="visualizationsel" onfocus="this.oldvalue=this.value;" style="background-color:#CCC;border:1px #999 solid;padding:0.2em 0.2em;" class="TText">
 				<option value="none">None</option>
 				<option value="spectrum">Spectrum</option>
+				<option value="spspectrum">Spectrum (ShadowPlayer)</option>
 				<option value="scope">Scope</option>
 				<option value="spectrogram">Spectrogram</option>
 				<option value="inkfountain">Ink Fountain</option>
diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js
index 213dcc9..f4077bb 100644
--- a/libs/music/player.d/main_static.js
+++ b/libs/music/player.d/main_static.js
@@ -420,13 +420,26 @@ NSAudio={
 };
 
 NSVisualization={
-	nbins:1024,
+	nbinsp:10,
+	nbins:Math.pow(2,10),
 	spectgrmw:1200,
 	spectrw:0.7,
 	spectrm:0.08125,
 	caps:[],
 	cctx:null,
 	spectgrmp:0,
+	_61spbins:29,
+	_61spfintv:Math.pow(1024,1./29),
+	_61spbinw:9,
+	_61spaccel:.35,
+	_61spmaxvel:6.17274873,
+	_61spgvel:.025,
+	_61spelas:1.33*.617274873,
+	_61spf:6.17274873,
+	_61spelasth:.017274873,
+	_61spcaps:new Float32Array(29),
+	_61spcapsv:new Float32Array(29),
+    _61spft:new Date(),
 	init:function()
 	{
 		window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame;
@@ -459,6 +472,68 @@ NSVisualization={
 			}
 		}
 	},
+	update_61_spectrum:function()
+	{
+		const cctx=this.cctx,canvas=NSUI.canvas;
+		cctx.clearRect(0,0,canvas.width,canvas.height);
+		try{
+			let freqdomv=new Float32Array(NSAudio.anlznode.frequencyBinCount);
+			NSAudio.anlznode.getFloatFrequencyData(freqdomv);
+			let binl=Math.pow(2,(this._61spbinw-1)*this.nbinsp/(this._61spbins-1+this._61spbinw))-1;
+			let _61spfdomv=new Float32Array(this._61spbins);
+            const ft=new Date()-this._61spft;
+            this._61spft=new Date();
+            const rft=ft/1000*24;
+			for(let i=0;i<this._61spbins;++i)
+			{
+				let binr=Math.pow(2,(i+this._61spbinw)*this.nbinsp/(this._61spbins-1+this._61spbinw))-1;
+				if(Math.floor(binr)<=Math.floor(binl))binr=binl+1;
+                let binli=Math.floor(binl);
+                let binri=Math.floor(binr);
+                const clamp=(x)=>Math.max(0,Math.min(1,x));
+				_61spfdomv[i]=Math.pow(freqdomv.
+				    slice(binli,binri+1).
+				    reduce(
+                        (s,c)=>s+
+                            clamp(
+                                (c-NSAudio.anlznode.minDecibels)
+                                /(NSAudio.anlznode.maxDecibels-NSAudio.anlznode.minDecibels)
+                            )/(binri-binli+1)
+                    ,0),2);//iS tHiS dBv^2?
+				binl=binr;
+
+                if(ft>1000)
+                {
+                    this._61spcaps[i]=0;
+                    this._61spcapsv[i]=0;
+                    continue;
+                }
+				let vel=this._61spgvel*this._61spcapsv[i];
+				if(this._61spcaps[i]-vel*rft<=_61spfdomv[i])
+				{
+					let elf=0;
+					if(vel>rft*this._61spelasth)
+					    elf=this._61spcapsv[i]*this._61spelas;
+					this._61spcapsv[i]=(this._61spcaps[i]-vel*rft-_61spfdomv[i])*this._61spf-elf;
+					this._61spcaps[i]=_61spfdomv[i];
+				}
+				else
+				{
+                    if(this._61spcapsv[i]+rft*this._61spaccel<=this._61spmaxvel)
+                        this._61spcapsv[i]+=rft*this._61spaccel;
+                    else this._61spcapsv[i]=this._61spmaxvel;
+                    vel=this._61spgvel*this._61spcapsv[i];
+				    this._61spcaps[i]-=Math.min(rft*vel,this._61spcaps[i]);
+				}
+
+				cctx.fillStyle=`rgba(70,130,180,${0.36+0.64*_61spfdomv[i]})`;
+				cctx.fillRect(i*(canvas.width/this._61spbins),canvas.height-(canvas.height*_61spfdomv[i]),canvas.width/this._61spbins*0.96,canvas.height*_61spfdomv[i]);
+
+				cctx.fillStyle='rgb(110,139,161)';
+				cctx.fillRect(i*(canvas.width/this._61spbins),canvas.height-(canvas.height*this._61spcaps[i])-4,canvas.width/this._61spbins*0.96,4);
+			}
+		}catch(e){}
+	},
 	update_scope:function()
 	{
 		const cctx=this.cctx,canvas=NSUI.canvas;
@@ -511,6 +586,9 @@ NSVisualization={
 			case 'spectrum':
 				NSVisualization.update_spectrum();
 			break;
+			case 'spspectrum':
+				NSVisualization.update_61_spectrum();
+			break;
 			case 'scope':
 				NSVisualization.update_scope();
 			break;
diff --git a/libs/music/player.d/styles.css b/libs/music/player.d/styles.css
index 24de2aa..354fd45 100644
--- a/libs/music/player.d/styles.css
+++ b/libs/music/player.d/styles.css
@@ -28,7 +28,13 @@
 .centered-audio{text-align:center;width:100%;}
 canvas#cvs{width:100%;height:100%;}
 a.listitem{padding-left:160px !important;margin-left:-160px;}
-div#cvsdiv{position:absolute;width:calc(100% - 16.5em);height:calc(100% - 8.4em);top:0;z-index:-1;}
+div#cvsdiv{
+    position: absolute;
+    width: calc(100% - 16.5em);
+    height: calc(100% - 9.6em);
+    top: 0;
+    z-index: -1;
+}
 @media (max-width:768px)
 {
 	div#cvsdiv{width:calc(100% - 1.5em);}