DEFLATE token-cost heatmap for build/intermediate/demo.temp.js

How DEFLATE works (short version)

DEFLATE is a lossless compression algorithm used in gzip, PNG, ZIP, etc.

It has two main phases:

  1. LZ77 matches:
    • The encoder looks for repeated sequences in the output seen so far.
    • Instead of storing the bytes again, it emits a match token of the form len, dist.
    • len = how many bytes to copy, dist = how far back to copy from.
    • Example: len 6, dist 5 means “copy 6 bytes from 5 bytes earlier in the output”.
  2. Huffman coding:
    • Literal bytes and match descriptors are turned into variable-length bit codes.
    • Frequent symbols get short codes (fewer bits), rare ones get long codes (more bits).

Literal tokens (shown as lit N) mean “output this exact byte”. Example: lit 97 is byte value 97, which is the character 'a' in ASCII/UTF-8.

Match tokens (shown as len L, dist D) mean “repeat data that already appeared in the output”. The heatmap and token list show how many bits each token costs.

few bits  →  many bits
let l,n,z;'use strict';
const A=new function(){function K(a){return Math.sin(a*6.283184)}var B=[K,function(a){return a%1<.5?1:-1},function(a){return a%1*2-1},function(a){a=a%1*4;return a<2?a-1:3-a}],b,r,h,t,p;this.init=function(a){b=a;r=a.o;h=0;t=a.i*a.h*(r+1)*2;p=new Int32Array(t)};this.u=function(){var a,g,k,c,m,q=new Int32Array(t),e=b.A[h],C=b.i,L=b.h,Q=0,M=0,u;var v=!1;var N=[];for(g=0;g<=r;++g){var F=e.p[g];for(k=0;k<L;++k){if(m=F?e.c[F-1].f[k]:0)e.g[m-1]=e.c[F-1].f[k+L]||0,m<17&&(N=[]);var ia=B[e.g[16]],ja=e.g[17]/
512,ka=2**(e.g[18]-9)/C,la=e.g[19],Y=e.g[20],ma=e.g[21]*43.23529*3.141592/44100,na=1-e.g[22]/255,R=e.g[23]*1E-5,oa=e.g[24]/32,pa=e.g[25]/512,qa=6.283184*2**(e.g[26]-9)/C,Z=e.g[27]/255,S=e.g[28]*C&-2;m=(g*L+k)*C;for(c=0;c<4;++c)if(a=F?e.c[F-1].n[k+c*L]:0){if(!N[a]){var d=N;var y=a;var aa=u=void 0,O,w,f=e,ba=a,ra=B[f.g[0]],sa=f.g[1],ta=f.g[3]/32,ua=B[f.g[4]],va=f.g[5],wa=f.g[8]/32,ca=f.g[9],D=f.g[10]*f.g[10]*4,P=f.g[11]*f.g[11]*4,T=f.g[12]*f.g[12]*4,xa=1/T,ya=-f.g[13]/16,H=f.g[14],za=C*2**(2-f.g[15]),
da=new Int32Array(D+P+T),ea=0,fa=0;for(O=w=0;w<D+P+T;w++,O++){O>=0&&(H=H>>8|(H&255)<<4,O-=za,aa=.003959503758*2**((ba+(H&15)+f.g[2]-128-128)/12),u=.003959503758*2**((ba+(H&15)+f.g[6]-128-128)/12)*(1+8E-4*f.g[7]));var x=1;w<D?x=w/D:w>=D+P&&(x=(w-D-P)*xa,x=(1-x)*3**(ya*x));ea+=aa*x**ta;var U=ra(ea)*sa;fa+=u*x**wa;U+=ua(fa)*va;ca&&(U+=(2*Math.random()-1)*ca);da[w]=80*U*x|0}d[y]=da}y=N[a];a=0;for(d=m*2;a<y.length;a++,d+=2)q[d]+=y[a]}for(a=0;a<C;a++)c=(m+a)*2,(d=q[c])||v?(v=ma,la&&(v*=ia(ka*c)*ja+.5),
v=1.5*Math.sin(v),Q+=v*M,d=na*(d-M)-Q,M+=v*d,d=Y==3?M:Y==1?d:Q,R&&(d*=R,d=d<1?d>-1?K(d*.25):-1:1,d/=R),d*=oa,v=d*d>1E-5,y=Math.sin(qa*c)*pa+.5,u=d*(1-y),d*=y):u=0,c>=S&&(u+=q[c-S+1]*Z,d+=q[c-S]*Z),q[c]=u|0,q[c+1]=d|0,p[c]+=u|0,p[c+1]+=d|0}}h++;return h/b.v};this.j=function(){for(var a=z.createBuffer(2,t/2,44100),g=0;g<2;g++)for(var k=a.getChannelData(g),c=g;c<t;c+=2)k[c>>1]=p[c]/65536;return a};this.getData=function(a,g){for(var k=2*Math.floor(a*44100),c=Array(g),m=0;m<2*g;m+=1){var q=k+m;c[m]=a>
0&&q<p.length?p[q]/32768:0}return c}};
A.init({A:[{g:[2,100,128,0,1,109,128,0,0,11,255,138,100,64,0,0,0,0,0,0,1,8,51,2,32,13,2,121,6],p:[1,2,,,,,,,,1],c:[{n:[],f:[]},{n:[101,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,113,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,125,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,137],f:[]}]},{g:[2,100,128,0,1,109,128,0,0,11,255,138,100,64,0,0,0,0,0,0,1,8,51,2,32,13,2,121,6],p:[,2],c:[{n:[],f:[]},{n:[,,,,,,,,149,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,161,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,120,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,132],f:[]}]},{g:[2,
100,128,0,1,109,128,0,0,11,255,138,100,64,0,0,0,0,0,0,1,8,51,2,32,13,2,121,6],p:[,2],c:[{n:[],f:[]},{n:[,,,,,,,,,,,,,,,,,,144,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,156,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,165],f:[]}]},{g:[2,255,128,0,2,255,128,0,0,0,0,6,29,0,0,0,0,195,4,1,2,22,61,11,33,147,6,84,6],p:[,,,,1,2,2,3,4],c:[{n:[113,,113,,113,,113,,113,,113,,113,,113,,113,,113,,113,,113,,113,,113,,113,,113],f:[]},{n:[113,113,113,113,113,113,113,113,113,113,113,113,113,113,114,113,113,113,113,113,113,113,113,113,
113,113,113,113,113,113,112,113],f:[]},{n:[125,113,113,126,125,113,113,124,113,113,125,113,113,113,124,113,125,113,113,126,125,113,113,124,113,113,125,113,113,113,124,113],f:[]},{n:[113,,,,115,,,,117,,,,118],f:[]}]},{g:[0,255,116,85,0,255,116,0,37,14,4,6,73,99,0,0,0,0,0,0,2,136,15,0,32,0,0,0,0],p:[,,,,,1,1,1],c:[{n:[147,,,,147,,,,147,,,,147,,,,147,,,,147,,,,147,,,,147],f:[]}]},{g:[0,0,128,0,0,0,128,0,0,125,0,1,59,0,0,0,0,0,0,0,1,193,171,0,29,39,3,88,3],p:[,,,,,,1,1],c:[{n:[,,147,,,,147,,,,147,,,,
147,,,,147,,,,147,,,,147,,,,147],f:[]}]}],i:5250,h:32,o:9,v:6});let ha=()=>{A.u()>=1?(E.append(I,J),J.style.position='absolute',J.style.font='bold 48px system-ui',J.style.top='34%',J.style.left='34%',J.innerHTML='Ready, press a key.'):setTimeout(ha,0)},V,X,I=document.createElement('canvas'),J=document.createElement('p'),E=document.body;E.style.cursor='none';ha();
I.ontouchend=document.onkeyup=()=>{J.innerHTML='';I.width=screen.width;I.height=screen.height;E.requestFullscreen();if(!n){I.style.width='100vw';I.style.height='100vh';I.style.position='absolute';I.style.top=0;I.style.left=0;J.style.color='#fff';J.style.top='4%';J.style.left='4%';J.innerHTML='L&ouml;rtsy Example<br>by Bits Lab<br><br>Code: tmptknn, bsh<br>Music: bsh';let K=((b,r,h)=>{let t=b.createShader(35633);b.shaderSource(t,r);b.compileShader(t);r=b.createShader(35632);b.shaderSource(r,h);b.compileShader(r);
h=b.createProgram();b.attachShader(h,t);b.attachShader(h,r);b.linkProgram(h);b.bindBuffer(34962,b.createBuffer());b.bufferData(34962,new Float32Array([-1,-1,1,-1,-1,1,1,-1,-1,1,1,1]),35044);b.useProgram(h);b.enableVertexAttribArray(0);b.vertexAttribPointer(0,2,5126,0,0,0);let p=b.getUniformLocation(h,'t'),a=b.getUniformLocation(h,'b');return(g,k)=>{b.viewport(0,0,I.width,I.height);b.uniform4fv(p,[screen.width,screen.height,g,screen.width/screen.height]);b.uniform4fv(a,k);b.drawArrays(4,0,6)}})(I.getContext('webgl2'),
'#version 300 es\nin vec2 v;out vec2 s;void main(){s=v;gl_Position=vec4(v,0,1);}','#version 300 es\nprecision highp float;in vec2 s;out vec4 r;uniform vec4 t;float v(int v,float m,float s,float f,float z){s+=z;return v==0?m*sin(s*3.1415926)+f:v==1?m*mod(s,1.)+f:v==2?m*s+f:v==3?m*cos(s*3.1415926)+f:v==4?m*(2./3.1415926)*asin(sin(s*3.1415926))+f:v==5?m*min(abs((sin(s*10.)+sin(s*15.)*.5+sin(s*25.)*.25)/1.75),1.)+f:v==6?m*min(abs((sin(s*40.)+sin(s*55.)*.5+sin(s*75.)*.25)/1.75),1.)+f:v==7?m*min(abs((sin(s*120.)+sin(s*155.)*.5+sin(s*205.)*.25)/1.75),1.)+f:f;}float v(vec3 v){v=abs(v)-vec3(.5);return length(max(v,0.))+min(max(v.x,max(v.y,v.z)),0.);}float v(float v){return clamp(v,0.,1.);}float v(float v,float z){return v/(v*(1.-z)+z+1e-7);}float v(float s,float d,float m){m+=1.;m=m*m/8.;return v(s,m)*v(d,m);}float n(float v,float s){s*=s;s*=s;v=v*v*(s-1.)+1.;return s/(acos(-1.)*v*v+1e-7);}vec3 n(vec3 s,vec3 m,vec3 f,vec3 z){vec3 d=normalize(m+f);float t=v(dot(s,f)),c=v(dot(s,m)),y=max(.2,.05);return n(v(dot(s,d)),y)*v(c,t,y)*(z+(1.-z)*pow(1.-v(v(dot(d,m))),5.))/(4.*c*t+1e-7)*t;}vec3 n(vec3 v,vec3 s,float m,vec3 f,vec3 z){vec3 t=vec3(1,.7655,.336);return n(v,z,f,t*s)+t*s*(m*.5+.04);}float n(vec3 v){v=v*.5-.5;return mod(floor(v.x)+floor(v.y)+floor(v.z),2.);}const vec3 m=vec3(1),f=vec3(0,0,1),a=vec3(.027,.539,.209),c=vec3(.716,.254,.723);vec3 n(vec3 v,vec3 s,vec3 m,int f,float d,vec3 t,vec3 z){return f==9?n(s,m,d,t,z):f==22?mix(m,m*.5,n(v))*(d+.2):m*(d+.2);}float n(vec3 s,float m){return(length(s-vec3(v(3,2.,m,0.,t.z),v(0,1.,m,2.77,t.z),v(0,2.,m,.02,t.z)))-float(.3)+.01*(sin(20.*(s-vec3(v(3,2.,m,0.,t.z),v(0,10.,m,2.77,t.z),v(0,2.,m,.02,t.z))).x)+sin(20.*(s-vec3(v(3,2.,m,0.,t.z),v(0,10.,m,2.77,t.z),v(0,2.,m,.02,t.z))).y)+sin(20.*(s-vec3(v(3,2.,m,0.,t.z),v(0,10.,m,2.77,t.z),v(0,2.,m,.02,t.z))).z)))*.6;}float n(vec3 s,out vec3 m,out int z){float r,t;vec3 i,d;int y,o;float e,l,u,w,x,F,E,D,C;r=v(s-vec3(0,2,0));i=f;y=0;e=n(s,0.);l=n(s,.1);u=n(s,.2);w=n(s,.3);x=n(s,.4);F=n(s,.5);E=n(s,.6);D=n(s,.7);C=n(s,.8);t=min(l,min(u,min(w,min(x,min(F,min(E,min(D,C)))))));d=a;o=9;if(t<r)r=t,i=d,y=o;t=dot(s,vec3(0,1,0));d=c;o=22;if(t<r)r=t,i=d,y=o;m=i;z=y;return r;}mat3 e(vec3 z){vec3 v=normalize(vec3(0,1,0)-z),s=normalize(cross(v,vec3(sin(0.),cos(0.),0)));return mat3(s,normalize(cross(s,v)),v);}float d(vec3 s){vec3 m;int v;return n(s,m,v);}vec3 x(vec3 s){vec2 v=vec2(.001,0);return normalize(vec3(d(s+v.xyy)-d(s-v.xyy),d(s+v.yxy)-d(s-v.yxy),d(s+v.yyx)-d(s-v.yyx)));}struct I{float e;float t;vec3 c;int o;vec3 v;};I d(vec3 s,vec3 m,int v){I t;t.t=0.;t.e=1e2;float d=1.;for(int r=0;r<256&&t.t<=30.;r++){vec3 f=s+m*t.t,y;int z;float c=abs(n(f,y,z));if(v==1){if(c<.001)return t.e=0.,t;d=min(d,8.*c/t.t);}if(v==0)if(c<.001)return t.e=c,t.c=y,t.o=z,t.v=mat3(1.)*f,t;t.t+=c;}if(v==1)t.e=d;return t;}void mainImage(out vec4 v,vec2 z){float m=t.z;vec3 s=vec3(4.*cos(.2*m),5,4.*sin(.2*m)),f=e(s)*normalize(vec3(((-t.xy+2.*z)/t.y).xy,2));I c=d(s,f,0);vec3 r=vec3(0);if(c.e<.001){vec3 v=s+f*c.t,m=x(v),z=normalize(vec3(-.4,.7,.6));r=n(v,m,c.c,c.o,clamp(dot(m,z),0.,1.)*d(v+m*.02+z*.01,z,1).e,z,normalize(s-v));if(c.o==9){vec3 s=v+m*.05,z=reflect(f,m);I t=d(s,z,0);vec3 i=vec3(.4);if(t.e<.001){vec3 v=s+z*t.t,m=x(v);v=normalize(vec3(-20,40,40)-v);i=n(t.v,m,t.c,t.o,max(dot(m,v),0.),v,-z);}float y=.4;{float o=.04;if(c.o==17||c.o==18||c.o==19)o=.02;if(c.o==9||c.o==10||c.o==11||c.o==21)o=1.;o+=(1.-o)*pow(1.-clamp(dot(-f,m),0.,1.),5.);y=o;}r=mix(r,i,y);}r=mix(r,vec3(0),smoothstep(0.,30.,c.t));}v=vec4(r,1);}vec4 d(vec2 v){vec4 s;mainImage(s,v);return s;}void main(){r=d((s+1.)*.5*t.xy);r.w=1.;}');
z=new AudioContext;n=z.createBufferSource();n.buffer=A.j();l=n.buffer.duration;V=new AnalyserNode(z);V.fftSize=2048;X=new Uint8Array(V.frequencyBinCount);V.connect(z.destination);n.connect(V);n.start();let B=()=>{let b=z.currentTime;I.style.opacity=(b<l-5?b:l-b)/5;V.getByteFrequencyData(X);K(b,[X[6]/255,X[13]/255,X[69]/255,0]);b<l?requestAnimationFrame(B):document.exitFullscreen()};B()}};

Tokens

Huffman Treemap