傍晚去了欢乐港湾 和 今天发现了个宝藏 JavaScript 程序员
时间：2024-5-3 20:24 作者：独元殇 分类： 前端技术
欢乐港湾
下午，突然感觉很闷，然后就骑上共享单车向海边走。
目标是南山前海 CBD 旁边的「欢乐港湾」↓
相比于北上，这个地方的好处是有山有海。本来今天脑子里想的场景是 ~ 我在三三两两没几人走动的安静的海边，望着空旷的水面和渐渐黯淡的天空，静静坐着...... 可快到的时候，突然脑子清醒过来 ------ 今天是五一长假的第三天呐！
不出所料，一进公园，人山人海。尤其是满地疯跑喊叫的小孩子，让我耳朵感受到了浓浓的人间烟火。嗯，虽然人多，但也挺好，人少了一样没意思。上次来这个公园，人流量很普通，就像工作日的商场一样门可罗雀。不过虽然今天人多，但公园足够大，走着走着还是有很空旷的地方，可以安安静静看看大海，吹吹海风。
然后就走啊走，从南头走到北头，心里的烦闷也一扫而空。平时也不怎么拍照的我，也拍了张普通的傍晚景。
最近半个月的广东的天气真是..... 一言难尽。每天都能下点雨，我都忘了太阳长什么样了。不知道的还以为广东在拍末日主题的电影呢。
前海远远看着挺发达的，比南山的后海感觉还好，后海都在南山区，但前海把宝安也包括上去。
本来我还以为南山、福田、罗湖因为是关内嘛，所以 GDP 肯定是这个城市的前三，而且罗湖同样是高楼耸立，密密麻麻，还有很多贴满金子、金光闪闪的大楼..... 然而后来看到 GDP 排名后，我才发现，宝安居然和福田差不多，宝安其实也是一个超级 GDP 发动机，富得流油。相较之下，罗湖只有他们一半，显得很少。
不过，这些前海密密麻麻的高楼大厦，还没怎么开始启用，都还在建设中 ing，前天晚上我去前海逛了一圈，跟鬼城一样。当然，这种鬼城还是会变繁华的，这点无需怀疑，现在还没收工，但里面的办公楼也可能卖的差不多了。据说注册公司可以把地址注册都前海秘书处这一说，有点房地产的预售抢购的感觉，抢占先机~
在旧时代（十年前），深圳是有关内关外之分的，下面的南山、罗湖、福田，就是繁华的关内，进出关内外是需要办“签注签证”的。毕竟是经济试验区，政策是不同的。2010 年这些政策改变，从此没有物理上的关内关外了，但依然有精神上的。关内“鄙视”关外，其乐融融。
不过现在，这种精神上的也变了。罗湖不断落魄、宝安的南边不断的发展，前几个月深圳放开房产限购，官方根据政策不同将深圳分为了“核心区”和“非核心区”，哈哈，这可不就是新关内关外吗？新的鄙视链来了，官方认证的！！！
一个很擅长压缩代码的 JavaScript 程序员和艺术家
今天在互联网上瞎逛时，遇到了一个很厉害的人，https://frankforce.com/ ，Frank Force， 一个独立开发者。
两年前，我曾经看到他讲解如何把一个 3D 的 JavaScript 游戏给压缩到 2kb 大小时，我懵了好几天，对他印象很深刻：
文章地址：https://frankforce.com/how-i-made-a-3d-game-in-only-2k-of-javascript/
- HTML – Red
- Functions – Orange
- Setup – Yellow
- Player Update – Green
- Background Render – Cyan
- Road Render – Purple
- Object Render – Pink
- HUD Render – Brown
你看上面这张图片里，这些密密麻麻的压缩后的 JavaScript 代码，谁能想到这居然是一个 3D 游戏！只能说这个东西太反认知了，和牛二定理一样，世界上反认知的东西真的多。
<body style=margin:0 onload="P=1e5;t=(t,i=0,n=0,e=1)=>`hsl(${n+m},${i}%,${t}%,${e})`;e=(t,e,h=0)=>e+Math.min(Math.max(t,0),1)*(h-e);h=t=>(t+Math.PI)%(2*Math.PI)+(0>t+Math.PI?Math.PI:-Math.PI);o=(t=1,i=0)=>e(1e5*(Math.sin(++b)+1)%1,i,t);function a(t=0,i=0,n=0){this.x=t,this.y=i,this.z=n}d=(t,i)=>new a(t.x+(i<P?i:i.x),t.y+(i<P?i:i.y),t.z+(i<P?i:i.z));w=(t,i)=>new a(t.x*(i<P?i:i.x),t.y*(i<P?i:i.y),t.z*(i<P?i:i.z));z=(t,i,n,e,h,o,a)=>B.beginPath(B.fillStyle=a,B.lineTo(t-n,0|i),B.lineTo(t+n,0|i),B.lineTo(e+o,0|h),B.lineTo(e-o,0|h),B.fill());for(onmousedown=N=>_?r=1:_=1,onmouseup=N=>r=0,onmousemove=N=>O=N.x/c.width*2-1,x=new a(s=L=u=m=r=N=R=O=f=_=0),p=v=b=Date.now(g=[]),F=500;P>N;N++)++L>R&&(F=500*o(1-.7*(k=Math.min(1,N/9e3)),3-2*k),B=o(e(k,L=.01,.02)),E=o(e(k,.01,.03)),J=N>1e4?0:o(e(k,.2,.6)),K=o(e(k,1e3,2e3)),l=R=(j=0|o(99,1e3))+o(99,1e3),N-=j),I=Math.sin(N*B)*J,S=Math.sin(N*E)*K,W=Math.min(Math.max(L/j,0),1),g[N]=g[N]?g[N]:{x:I,y:S,a:F},g[N].x=e(W,g[N].x,I),g[N].y=e(W,g[N].y,S),g[N].a=N>1e4?0:e(W,g[N].a,F),g[N].b=g[N-1]?Math.atan2(g[N-1].y-g[N].y,99):0;y=new a(0,150),requestAnimationFrame(k=N=>{c.width=window.innerWidth,c.height=window.innerHeight,V=e(U=y.z/100%1,g[Q=0|y.z/100].x,g[Q+1].x),X=e(U,g[Q].y,g[Q+1].y)+150,Y=e(U,g[Q].b,g[Q+1].b),Z=d(x,0),x.y--,x.x*=.7,x.z=p?Math.max(0,.999*x.z):0,y=d(y,x),T=O*e(x.z/300,.2),x.x+=T*x.z-.002*x.z*x.z*V,y.x=Math.min(Math.max(y.x,-2e3),2e3),y.y<X&&(y.y=X,x=d(w(new a(J=0,Math.cos(Y),Math.sin(Y)),-1.2*(Math.cos(Y)*x.y+Math.sin(Y)*x.z)),x),x.z+=r?-3:e(x.z/300,_),Math.abs(y.x)>g[Q].a&&(x.z*=.98,s+=Math.sin(y.z/99)**4/99)),J++<6&&K&&K<9&&p*r?x.y+=K=25:K=r?0:K+1,G=(y.y-X)/99,u+=e(G,0,x.y/4e4),u+=(x.z-Z.z)/2e3,u-=.01*s,s+=u*=.9,f=e(.1,f,e(G,-Y)),M=s+f,L=w(new a(1,-1,1),c.width/2),b=v,l=h(l+x.z*V*5e-5),$=2*T,W=Math.sin($)/2,j=Math.cos(l),R=c.height/2-Math.tan(M)*L.y,(A=B.createLinearGradient(0,R-c.height/2,0,R)).addColorStop(0,t(39+25*j,49+19*j,230-19*j)),A.addColorStop(1,t(5,79,250-9*j)),z(c.width/2,0,c.width/2,c.width/2,c.height,c.width/2,A);for(N=2;N--;z(c.width/2,0,c.width/2,c.width/2,c.height,c.width/2,A))A=B.createRadialGradient(I=c.width*(.5+e((l/Math.PI/2+.5+N/2)%1,4,-4)-W),S=R-c.width/5,c.width/25,I,S,N?c.width/23:c.width),A.addColorStop(0,t(N?70:99)),A.addColorStop(1,t(0,0,0,0));for(N=30;N--;)G=h(l+o(19)),j=Math.cos(G-l),z(I=c.width*(.5+e(G/Math.PI/2+.5,4,-4)-W),S=R,F=o(.2,.8)**2*c.width/2,I+F*o(-.5,.5),S-o(.5,.8)*F,0,t(o(15,25)+N/3-9*j,N/2+o(19),o(220,230)));for(z(c.width/2,R,c.width/2,c.width/2,c.height,c.width/2,t(25,30,95)),I=F=N=0;801>N;)W=d(new a(I+=F+=g[Q+N].x,g[Q+N].y,(Q+N)*100),w(y,-1)),W.x=W.x*Math.cos($)-W.z*Math.sin($),C=1/(W.z*Math.cos(M)-W.y*Math.sin(M)),W.y=W.y*Math.cos(M)-W.z*Math.sin(M),W.z=C,g[Q+N++].p=d(w(w(W,new a(C,C,1)),L),new a(c.width/2,c.height/2));for(N=800,E=g[Q+N];N--;)L=g[Q+N],b=v+Q+N,j=Math.sin(L.b)*Math.cos(l)*99,q=L.p,D=E.p,0<q.z&P>q.z&&(0==N%(0|e(N/800,1,9))&&(z(c.width/2,q.y,c.width/2,c.width/2,D.y,c.width/2,t(25+j,30,95)),400<L.a&&z(q.x,q.y,q.z*(L.a+150),D.x,D.y,D.z*(E.a+150),t((9>(Q+N)%19?50:20)+j)),z(q.x,q.y,q.z*L.a,D.x,D.y,D.z*E.a,t((300>(Q+N)*100%P?70:7)+j)),300<L.a&&0==(Q+N)%9&N<266&&z(q.x,q.y,9*q.z,D.x,D.y,9*D.z,t(70+j)),E=L),I=o(1e4,-1e4)*o(9),.2>o()&&Q+N>29&&(C=(o(2)|0)*400,!L.h&200>Math.abs(y.x-I)&200>Math.abs(y.z-(Q+N)*100)&y.y<L.y+350+C&&(x=w(x,L.h=.1)),G=e(N/800,4),C?(z(I=q.x+q.z*I,q.y,29*q.z,I,q.y-99*q.z,29*q.z,t(o(9)+5,50+o(9),29+o(9),G)),z(I,q.y-o(50,99)*q.z,q.z*o(199,250),I,q.y-o(600,800)*q.z,0,t(o(9)+25,80+o(9),o(29),G))):z(I=q.x+q.z*I,q.y,q.z*o(200,250),I+q.z*o(99,-99),q.y-o(200,250)*q.z,q.z*o(99),t(o(19)+50,25+o(19),209+o(9),G))));y.z>P&&(p+=10,P+=1e5,m+=36),B.font=`9em impact`,N=(t,i)=>(B.fillText(t,i,129),B.lineWidth=3,B.strokeText(t,i,129)),B.fillStyle=t(99,0,0,.5),_?N(0|y.z/1e3,c.width-9,N(Math.ceil(p=Math.min(Math.max(p-1/60,0),20)),9),B.textAlign=`right`):N('HUE JUMPER',c.width/2,B.textAlign=`center`),requestAnimationFrame(k)}),B=c.getContext`2d`"><canvas id=c>至于效果...... 我搞了个网页传到了我网站上，https://img1.ccgxk.com/ccgxk-oss/7NK9ne20240503212016.html ，项目的 github 地址是 https://github.com/KilledByAPixel/HueJumper2k 。
挺牛的吧，妥妥黑科技！
作者常年活跃在例如
https://js1024.fun/ 一个 1024 byte 大小限制的 JavaScript 代码比赛网站
https://js13kgames.com/ 一个 13 kb 大小限制的 JavaScript 游戏网站
等挑战前端程序员代码体积小到极限极限的黑科技网站，当然他也是一个艺术家，精通图形学等等，这些内容的共同点是 极小 的体积，在他博客上，各种黑科技数不胜数。
今天我也是无意中从他的又一个获奖作品 https://js1024.fun/demos/2023/6/readme 中翻了进来，没想到竟然是老“故人”，哈哈。
他的作品之多，网站之丰富让我瞠目结舌。这些是他 Twitter 上告知的他活跃的地方的列表： https://linktr.ee/frankforce
我寥寥草草看了看，对一个名叫 ZzFXM（ https://keithclark.github.io/ZzFXM/ ）的开源项目挺感兴趣。它可以以数组的方式，把一些音乐给记录下来，以极小的代价、体积，在 web 前端代码里使网页播放出声音！
我之前玩过的 abcjs ( https://www.ccgxk.com/front-end/256.html ) 它可以使用 ABC 记谱法，让网页直接播放钢琴曲，而这个 ZzFXM 比这个更高级，居然直接可以播放任意波形的声音，这意味着不仅可以播放钢琴曲，还可以创建一个数组，播放鼓声等等。
什么意思呢？
https://codepen.io/KilledByAPixel/full/BaowKzv 比如这个←
里面的第一个钱包的叮叮声音，可不是 .wmv 或者其他音频文件，而是 zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06]) ，一个函数，函数里的参数是其音频数据内容，就这么简单。
当这个数据多了，那就是一首音乐了！就像 ZzFXM 首页（ https://keithclark.github.io/ZzFXM/ ）第一个按钮可以播放的那种
当然，他还做了个制作这种音乐的编辑器，界面很有科技感：
为了实现一个功能或应用，把代码写的很多很大，相对来说比较容易，但是能把代码写的体积超级的小，且还在基本不改动性能的情况下，这才是大佬！
我现在也终于明白 比尔盖茨 为什么给公司起名 Microsoft （微小的软件），并不是自谦，而是真的代表程序员骨子里对微小轻量级的着迷这种冲动，是一直对极客精神的追求...... 当然，现在微软的软件，给人的印象都是动不动几个 GB 的，那确实没办法。
当然，和动辄十几个 GB 的微信，微软还是很有良心的。
推荐阅读：
https://js13kgames.github.io/resources/
↑ 一系列牛批带电的黑科技 迷你 小玩意儿，有 2d 3d 引擎、物理、音频、像素等等引擎，体积都很小
做好心理准备，接下来如果天气好转将迎来持续几个月的高温天气！
宝安早期可是深圳工业非常发达的区，那时有很多工厂，而福田主要是高楼大厦多。。。