It's 2025 and I'm still updating this shit. (Visualizations)HEADmaster

ShadowPlayer spectrum visualization now more bouncy and less
glitch-prone.

Ink fountain almost completely rewritten, new ink emission system
based on some wacky form of envelope tracking.

1 files changed, 211 insertions, 76 deletions

diff --git a/libs/music/player.d/main_static.js b/libs/music/player.d/main_static.js
index 94658fc..44cc94c 100644
--- a/libs/music/player.d/main_static.js
+++ b/libs/music/player.d/main_static.js
@@ -1,4 +1,4 @@
-//Chris Xiong 2015-2021
+//Chris Xiong 2015-2025
 //License: Expat
 //WARNING: This file contains profanity (thrown as exceptions).
 
@@ -21,18 +21,21 @@ const sh={
 
 class Ink
 {
-    constructor(_vx,_vy,_c)
+    constructor(_vx,_vy,_c,_d)
     {
         this.x=NSUI.canvas.width/2;this.y=NSUI.canvas.height/2;
         this.vx=_vx;this.vy=_vy;
+        this.d = _d ? 1 - _d : 0.995;
         this.color=_c>6?6:_c;this.active=true;
     }
     update()
     {
         const canvas=NSUI.canvas;
-        this.x+=this.vx;this.y+=this.vy;
-        this.vx*=0.995;this.vy*=0.995;
-        if(this.x<-10||this.x>canvas.width+10||this.y<-10||this.y>canvas.height+10)
+        this.x += this.vx; this.y += this.vy;
+        if (this.vx > 5 && this.vy > 5) {
+            this.vx *= this.d; this.vy *= this.d;
+        }
+        if(this.x<-30||this.x>canvas.width+30||this.y<-30||this.y>canvas.height+30 || Number.isNaN(this.x) || Number.isNaN(this.y))
             this.active=false;
     }
     draw(cctx)
@@ -41,6 +44,31 @@ class Ink
     }
 }
 
+class TrendTracker
+{
+    constructor(_window_size, _default_value)
+    {
+        this.window_size = _window_size;
+        this.data = new Array(_window_size).fill(_default_value);
+        this.meanx = (this.window_size - 1) / 2;
+    }
+    push(v)
+    {
+        this.data.shift();
+        this.data.push(v);
+        this.update_slope();
+    }
+    update_slope()
+    {
+        const meanx = this.meanx;
+        const meany = this.data.reduce((s, v) => s + v / this.window_size, 0);
+        this.slope = this.data.reduce((s, v, i) => s + (i - meanx) * (v - meany), 0) / 
+                     this.data.reduce((s, _, i) => s + (i - meanx) * (i - meanx), 0);
+        this.intercept = meany - this.slope * meanx;
+        this.meanv = meany;
+    }
+}
+
 NSPlayer={
     plistname:null,
     tracks:null,
@@ -494,7 +522,7 @@ NSAudio={
 
 NSVisualization={
     nbinsp:10,
-    nbins:Math.pow(2,10),
+    nbins:Math.pow(2, 10),
     spectgrmw:1200,
     spectrw:0.7,
     spectrm:0.08125,
@@ -502,18 +530,20 @@ NSVisualization={
     cctx:null,
     spectgrmp:0,
     _61spbins:29,
-    _61spfintv:Math.pow(1024,1./29),
-    _61spbinw:9,
-    _61spaccel:.617274873,
-    _61spdamp:Math.pow(.617274873,6.17274873),
+    _61spbinw:5,
+    _61spaccel:.3617274873,
+    _61spdamp:0.1617174873,
     _61spvelcap:2*6.17274873,
-    _61spgvel:.025,
-    _61spelas:.617274873,
-    _61spf:6.17274873*6.17274873,
-    _61spelasth:.017274873,
+    _61spgvel:.08617274873,
+    _61spelas:.2617274873,
+    _61spf:42.617274873,
+    _61spelasth:.1617274873,
     _61spcaps:new Float32Array(29),
     _61spcapsv:new Float32Array(29),
-    _61spft:new Date(),
+    _61spft:performance.now(),
+    frms:0,
+    lastfpsupd:null,
+    fps:0,
     init:function()
     {
         window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame;
@@ -546,6 +576,33 @@ NSVisualization={
             }
         }
     },
+    distr_log_bins:function(data, nbins, shift)
+    {
+        let ret = new Float32Array(nbins);
+        let binfreq = 0;
+        const cctx = NSVisualization.cctx;
+        //cctx.fillStyle=window.getComputedStyle(document.body).getPropertyValue("--principal-fg");
+        const cw = NSUI.canvas.width;
+        for (let i = 0; i < nbins; ++i)
+        {
+            const lbin = Math.floor(binfreq);
+            binfreq = Math.pow(2, (i + shift) * NSVisualization.nbinsp / (nbins - 1 + shift)) - 1;
+            const rbin = Math.max(Math.floor(binfreq), lbin + 1);
+            //cctx.fillText(lbin, i / nbins * cw + 8, 60);
+            //cctx.fillText(rbin, i / nbins * cw + 8, 90);
+            const clamp0 = (x) => Math.max(0, x);
+            ret[i] = Math.pow(data.
+                slice(lbin, rbin + 1).
+                reduce(
+                    (s, c) => s +
+                        clamp0((c - NSAudio.anlznode.minDecibels) /
+                        (NSAudio.anlznode.maxDecibels - NSAudio.anlznode.minDecibels)) /
+                        (rbin - lbin + 1)
+                , 0), 2);//iS tHiS dBv^2?
+            //cctx.fillText(ret[i].toFixed(2), i / nbins * cw + 8, 120);
+        }
+        return ret;
+    },
     update_61_spectrum:function()
     {
         const cctx=this.cctx,canvas=NSUI.canvas;
@@ -553,29 +610,12 @@ NSVisualization={
         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();
+            let _61spfdomv = NSVisualization.distr_log_bins(freqdomv, this._61spbins, this._61spbinw);
+            const ft=performance.now() - this._61spft;
+            this._61spft=performance.now();
             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;
@@ -583,24 +623,38 @@ NSVisualization={
                     continue;
                 }
                 let vel=this._61spgvel*this._61spcapsv[i];
-                if(this._61spcaps[i]-vel*rft<=_61spfdomv[i])
+                //cctx.fillStyle = this._61spcapsv[i] > 0 ? "#f00" : "#0f0";
+                //cctx.fillText(Math.abs(this._61spcapsv[i]).toFixed(1), i / this._61spbins * canvas.width + 8, 120);
+                if (Number.isNaN(this._61spcaps[i]) || !Number.isFinite(this._61spcaps[i])) {
+                    this._61spcaps[i] = _61spfdomv[i];
+                    this._61spcapsv[i] = 0;
+                }
+                if (this._61spcaps[i] - (vel < 0.5 ? vel * rft : 0) <= _61spfdomv[i])
                 {
-                    let elf=0;
-                    if(vel>this._61spgvel*this._61spvelcap)
+                    if (!(this._61spcaps[i] < 1e-2 && this._61spcapsv[i] < 1e-2 && _61spfdomv[i] < 1e-2))
                     {
-                        vel=this._61spgvel*this._61spvelcap;//cap this so that Newton could rest in peace.
-                        this._61spcapsv[i]=this._61spvelcap;
+                        let elf=0;
+                        if(vel>this._61spgvel*this._61spvelcap)
+                        {
+                            vel=this._61spgvel*this._61spvelcap;//cap this so that Newton could rest in peace.
+                            this._61spcapsv[i]=this._61spvelcap;
+                        }
+                        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
+                    {
+                        this._61spcaps[i] = _61spfdomv[i];
+                        this._61spcapsv[i] = 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
                 {
                     this._61spcapsv[i]+=rft*(this._61spaccel-this._61spdamp*Math.sign(this._61spcapsv[i])*Math.pow(this._61spcapsv[i],2));
                     vel=this._61spgvel*this._61spcapsv[i];
-                    this._61spcaps[i]-=Math.min(rft*vel,this._61spcaps[i]);
+                    this._61spcaps[i] -= Math.min(rft * vel,this._61spcaps[i]);
+                    this._61spcaps[i] = Math.max(this._61spcaps[i], _61spfdomv[i]);
                 }
 
                 cctx.fillStyle=`rgba(70,130,180,${0.36+0.64*_61spfdomv[i]})`;
@@ -658,6 +712,16 @@ NSVisualization={
     },
     updateVisualization:function()
     {
+        const self=NSVisualization;
+        const cctx=self.cctx;
+        ++self.frms;
+        if(Date.now()-self.lastfpsupd>500)
+        {
+            if(self.lastfpsupd)
+            self.fps=1000*self.frms/(Date.now()-self.lastfpsupd),self.frms=0;
+            self.lastfpsupd=Date.now();
+        }
+        const ts=Date.now();
         switch(NSUI.vissel.value)
         {
             case 'spectrum':
@@ -675,7 +739,13 @@ NSVisualization={
             case 'inkfountain':
                 NSInk.update();
             break;
+            default:
+                return;
         }
+        cctx.fillStyle=window.getComputedStyle(document.body).getPropertyValue("--principal-fg");
+        cctx.font="2em 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace";
+        const fpst=`FPS: ${self.fps.toFixed(1)}, update time ${Date.now()-ts} ms`;
+        cctx.fillText(fpst,0,24);
         if(NSUI.vissel.value!='none')
         requestAnimationFrame(NSVisualization.updateVisualization);
     }
@@ -688,9 +758,12 @@ NSInk={
     inkimg:[],
     ifcaps:[],
     nbinsif:128,
+    debug_render:false,
+    erms_tracker:new TrendTracker(8, 0),
+    freq_tracker:[],
     inkPrepare:function()
     {
-        for(let i=0;i<7;++i)
+        for(let i = 0; i < 7; ++i)
         {
             this.inkimg[i]=document.createElement('canvas');
             this.inkimg[i].width=this.inkimg[i].height=10*window.devicePixelRatio;
@@ -703,63 +776,125 @@ NSInk={
             cctx.beginPath();
             cctx.arc(5*window.devicePixelRatio,5*window.devicePixelRatio,5*window.devicePixelRatio,0,2*Math.PI);
             cctx.fill();
+            this.freq_tracker[i] = new TrendTracker(8, 0);
         }
         for(let i=0;i<NSVisualization.nbins;++i)this.ifcaps[i]=0;
         this.nbinsif=NSVisualization.nbins/8;
     },
     createInk:function(_vx,_vy,_c1,_c2)
     {
-        let f=false;
         for(let i=0;i<this.inks.length;++i)
         {
             if(!this.inks[i].active)
-            {this.inks[i]=new Ink(_vx,_vy,_c1,_c2);f=true;break;}
+            {this.inks[i]=new Ink(_vx,_vy,_c1,_c2);return;}
         }
-        if(!f&&this.inks.length<512)this.inks.push(new Ink(_vx,_vy,_c1,_c2));
+        if(this.inks.length<1024)this.inks.push(new Ink(_vx,_vy,_c1,_c2));
     },
-    frms:0,lastfpsupd:null,fps:0,
     update:function()
     {
         const canvas=NSUI.canvas;
-        const cctx=canvas.getContext('2d'),ts=Date.now();
+        const cctx=canvas.getContext('2d');
         cctx.clearRect(0,0,canvas.width,canvas.height);
-        ++this.frms;if(Date.now()-this.lastfpsupd>500)
-        {
-            if(this.lastfpsupd)
-            this.fps=1000*this.frms/(Date.now()-this.lastfpsupd),this.frms=0;
-            this.lastfpsupd=Date.now();
-        }
         try{
-            let freqarr=new Uint8Array(NSAudio.anlznode.frequencyBinCount);
-            NSAudio.anlznode.getByteFrequencyData(freqarr);
-            for(let i=0;i<this.nbinsif;++i)
+            let amplarr = new Float32Array(NSAudio.anlznode.frequencyBinCount);
+            let freqarr = new Float32Array(NSAudio.anlznode.frequencyBinCount);
+            NSAudio.anlznode.getFloatTimeDomainData(amplarr);
+            NSAudio.anlznode.getFloatFrequencyData(freqarr);
+            
+            const rms = 10 * Math.log10(amplarr.reduce((s, a) => s += a * a / NSAudio.anlznode.frequencyBinCount, 0));
+            const erms = Math.pow(Math.pow(10, rms / 10), .5);
+            this.erms_tracker.push(erms);
+            
+            const evals = NSVisualization.distr_log_bins(freqarr, 8, 2);
+            evals[6] += evals[7];
+            
+            const clamped_lerp = function(v, imin, imax, omin, omax) {
+                if (v <= imin) return omin;
+                if (v >= imax) return omax;
+                const f = (v - imin) / (imax - imin);
+                return f * (omax - omin) + omin;
+            };
+
+            let base_emission_modifier = 1;
+            if (this.erms_tracker.slope < -0.015)
+                base_emission_modifier = clamped_lerp(this.erms_tracker.slope, -0.03, -0.015, 0.3, 1);
+            else if (this.erms_tracker.slope > 0.01)
+                base_emission_modifier = clamped_lerp(this.erms_tracker.slope, 0.01, 0.1, 1, 5);
+            const base_emission_factor = Math.max(1, Math.pow(erms * 8, 2));
+            const base_velocity_factor = clamped_lerp(erms, 0.05, 0.4, 12, 80);
+            const base_veldamp_factor = clamped_lerp(erms, 0.1, 0.4, 0.005, 0.001);
+
+            const freq_emission_factors = [];
+            const freq_emission_modifiers = [];
+            const freq_velocity_shift = [];
+            const freq_velocity_variances = [];
+            const actual_emission = [];
+            for(let i = 0; i < 7; ++i)
             {
-                let r=0;
-                for(let j=0;j<8;++j)r+=freqarr[i*8+j];
-                r/=8.;
-                if(r-this.ifcaps[i]>7)
+                this.freq_tracker[i].push(evals[i]);
+                let r = evals[i] * 255;
+
+                freq_emission_modifiers[i] = 1;
+                if (this.freq_tracker[i].slope < -0.01)
+                    freq_emission_modifiers[i] = Math.pow(clamped_lerp(this.freq_tracker[i].slope, -0.03, -0.01, 0, 1), 2);
+                else if (this.freq_tracker[i].slope > 0.005)
+                    freq_emission_modifiers[i] = clamped_lerp(this.freq_tracker[i].slope, 0.005, 0.05, 1, 5);
+                freq_emission_factors[i] = Math.pow(evals[i] * (i > 1 ? (i > 4 ? 20 : 10) : 7), 2) / 10;
+                freq_velocity_shift[i] = Math.pow(clamped_lerp(this.freq_tracker[i].slope, 0.005, 0.03, 4, 8), 1.5);
+                freq_velocity_variances[i] = Math.min(base_velocity_factor * 0.5, Math.pow(evals[i] * 10, 0.5));
+                
+                actual_emission[i] = 0;
+                if (r - this.ifcaps[i] > 5)
                 {
-                    let color=Math.floor(i*8.0/this.nbinsif),rad=Math.random()*Math.PI*2;
-                    let ndrops=(128-i)/128.*3+1;ndrops*=(r/128.);ndrops=Math.floor(ndrops);if(ndrops<1)ndrops=1;
-                    for(let k=0;k<ndrops;++k)
+                    let color=i;
+                    actual_emission[i] = base_emission_factor * base_emission_modifier * freq_emission_factors[i] * freq_emission_modifiers[i];
+                    actual_emission[i] = Math.min(Math.max(Math.floor(actual_emission[i]), 1), 24);
+                    for(let k = 0; k < actual_emission[i]; ++k)
                     {
-                        this.createInk(((r-this.ifcaps[i]-7)/32*24+12)*Math.cos(rad),((r-this.ifcaps[i]-7)/32*24+12)*Math.sin(rad),color);
-                        rad=Math.random()*Math.PI*2;
+                        const rad = Math.random() * Math.PI * 2;
+                        const vel = (base_velocity_factor + freq_velocity_shift[i]) * 0.25 + (Math.random() * 2 - 1) * freq_velocity_variances[i];
+                        this.createInk(vel * Math.cos(rad), vel * Math.sin(rad), color, base_veldamp_factor);
                     }
                 }
-                if(r>this.ifcaps[i])this.ifcaps[i]=r;else this.ifcaps[i]-=2;
+                if (r > this.ifcaps[i]) this.ifcaps[i] = r; else this.ifcaps[i] -= 3;
+            }
+            if (this.debug_render) {
+                const debug_render_bars = function(data, n, max, bipolar, style) {
+                    const cw = NSUI.canvas.width;
+                    const ch = NSUI.canvas.height;
+                    for (let i = 0; i < n; ++i) {
+                        cctx.fillStyle = Array.isArray(style) ? style[i] : style;
+                        const h = Math.min(Math.max(-data[i] / max, -1), 1);
+                        cctx.fillRect(i * (cw / n), bipolar ? ch / 2 : ch, cw / n * 0.96, h * ch * 0.6);
+                    }
+                }
+                debug_render_bars(evals, 7, 1, false, NSInk.ic1);
+                const fsl = [];
+                for (let i = 0; i < 7; ++i) fsl.push(this.freq_tracker[i].slope);
+                debug_render_bars(fsl, 7, 0.1, true, NSInk.ic2);
+                cctx.fillStyle = "rgba(70,130,180)";
+                cctx.fillRect(0, 0, erms * NSUI.canvas.width, 10);
+                cctx.fillRect(NSUI.canvas.width / 2, 10, 10 * this.erms_tracker.slope * NSUI.canvas.width / 2, 10);
+                cctx.fillStyle=window.getComputedStyle(document.body).getPropertyValue("--principal-fg");
+                cctx.font="2em 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace";
+                cctx.fillText(`${erms.toFixed(4).padStart(7)} ${this.erms_tracker.slope.toFixed(6).padStart(9)}`,0,90);
+                cctx.fillText(`${base_emission_factor.toFixed(3).padStart(6)} ${base_emission_modifier.toFixed(3).padStart(6)}`,0,120);
+                for (let i = 0; i < 7; ++i) {
+                    cctx.fillStyle = NSInk.ic1[i];
+                    cctx.fillText(evals[i].toFixed(2), i / 7 * NSUI.canvas.width + 8, 180);
+                    cctx.fillText(this.freq_tracker[i].slope.toFixed(4).padStart(7), i / 7 * NSUI.canvas.width + 8, 210);
+                }
             }
         }catch(e){
             cctx.clearRect(0,0,canvas.width,canvas.height);
+            console.error(e);
         }
-        const tu=Date.now();
         let aa=0;
         for(let i=0;i<this.inks.length;++i)
-        if(this.inks[i].active){this.inks[i].update();this.inks[i].draw(cctx);++aa;}
-        cctx.fillStyle='#000';
-        cctx.font="1em 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace";
-        cctx.fillText('Active droplets '+aa+', '+this.fps.toFixed(2)+' FPS',0,10);
-        cctx.fillText('Update time '+(tu-ts)+'ms, render time '+(Date.now()-tu)+'ms',0,24);
+        if(this.inks[i].active){this.inks[i].draw(cctx);this.inks[i].update();++aa;}
+        cctx.fillStyle=window.getComputedStyle(document.body).getPropertyValue("--principal-fg");
+        cctx.font="2em 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace";
+        cctx.fillText(`Active droplets ${aa}`,0,52);
     }
 };