«

傍晚去了欢乐港湾 和 今天发现了个宝藏 JavaScript 程序员

时间:2024-5-3 20:24     作者:独元殇     分类: 前端技术


欢乐港湾

下午,突然感觉很闷,然后就骑上共享单车向海边走。

目标是南山前海 CBD 旁边的「欢乐港湾」↓

img

相比于北上,这个地方的好处是有山有海。本来今天脑子里想的场景是 ~ 我在三三两两没几人走动的安静的海边,望着空旷的水面和渐渐黯淡的天空,静静坐着...... 可快到的时候,突然脑子清醒过来 ------ 今天是五一长假的第三天呐!

不出所料,一进公园,人山人海。尤其是满地疯跑喊叫的小孩子,让我耳朵感受到了浓浓的人间烟火。嗯,虽然人多,但也挺好,人少了一样没意思。上次来这个公园,人流量很普通,就像工作日的商场一样门可罗雀。不过虽然今天人多,但公园足够大,走着走着还是有很空旷的地方,可以安安静静看看大海,吹吹海风。

然后就走啊走,从南头走到北头,心里的烦闷也一扫而空。平时也不怎么拍照的我,也拍了张普通的傍晚景。

img

img

最近半个月的广东的天气真是..... 一言难尽。每天都能下点雨,我都忘了太阳长什么样了。不知道的还以为广东在拍末日主题的电影呢。

前海远远看着挺发达的,比南山的后海感觉还好,后海都在南山区,但前海把宝安也包括上去。

本来我还以为南山、福田、罗湖因为是关内嘛,所以 GDP 肯定是这个城市的前三,而且罗湖同样是高楼耸立,密密麻麻,还有很多贴满金子、金光闪闪的大楼..... 然而后来看到 GDP 排名后,我才发现,宝安居然和福田差不多,宝安其实也是一个超级 GDP 发动机,富得流油。相较之下,罗湖只有他们一半,显得很少。

不过,这些前海密密麻麻的高楼大厦,还没怎么开始启用,都还在建设中 ing,前天晚上我去前海逛了一圈,跟鬼城一样。当然,这种鬼城还是会变繁华的,这点无需怀疑,现在还没收工,但里面的办公楼也可能卖的差不多了。据说注册公司可以把地址注册都前海秘书处这一说,有点房地产的预售抢购的感觉,抢占先机~

img

密密麻麻的摩天写字楼下,安安静静,没有一个人


img

在旧时代(十年前),深圳是有关内关外之分的,下面的南山、罗湖、福田,就是繁华的关内,进出关内外是需要办“签注签证”的。毕竟是经济试验区,政策是不同的。2010 年这些政策改变,从此没有物理上的关内关外了,但依然有精神上的。关内“鄙视”关外,其乐融融。

不过现在,这种精神上的也变了。罗湖不断落魄、宝安的南边不断的发展,前几个月深圳放开房产限购,官方根据政策不同将深圳分为了“核心区”和“非核心区”,哈哈,这可不就是新关内关外吗?新的鄙视链来了,官方认证的!!!

img

一个很擅长压缩代码的 JavaScript 程序员和艺术家

今天在互联网上瞎逛时,遇到了一个很厉害的人,https://frankforce.com/ ,Frank Force, 一个独立开发者。

两年前,我曾经看到他讲解如何把一个 3D 的 JavaScript 游戏给压缩到 2kb 大小时,我懵了好几天,对他印象很深刻:

文章地址:https://frankforce.com/how-i-made-a-3d-game-in-only-2k-of-javascript/

你看上面这张图片里,这些密密麻麻的压缩后的 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 比如这个←

img

里面的第一个钱包的叮叮声音,可不是 .wmv 或者其他音频文件,而是 zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06]) ,一个函数,函数里的参数是其音频数据内容,就这么简单。

当这个数据多了,那就是一首音乐了!就像 ZzFXM 首页( https://keithclark.github.io/ZzFXM/ )第一个按钮可以播放的那种

当然,他还做了个制作这种音乐的编辑器,界面很有科技感:

https://keithclark.github.io/ZzFXM/tracker/?url=https://raw.githubusercontent.com/keithclark/ZzFXM/master/examples/songs/sanxion.js

img

为了实现一个功能或应用,把代码写的很多很大,相对来说比较容易,但是能把代码写的体积超级的小,且还在基本不改动性能的情况下,这才是大佬!

我现在也终于明白 比尔盖茨 为什么给公司起名 Microsoft (微小的软件),并不是自谦,而是真的代表程序员骨子里对微小轻量级的着迷这种冲动,是一直对极客精神的追求...... 当然,现在微软的软件,给人的印象都是动不动几个 GB 的,那确实没办法。

当然,和动辄十几个 GB 的微信,微软还是很有良心的。

标签: 原创 JavaScript 摄影 广东 天气 深圳

推荐阅读:

评论:
avatar
jiyouzhan 2024-05-15 15:21
这篇文章写得深入浅出,让我这个小白也看懂了!
avatar
灰常记忆 2024-05-10 23:24
关内关外?感觉就很见外,鄙视链一直存在。
commentator
独元殇 2024-05-11 09:32
@灰常记忆:很正常,哪个城市都有。归根结底还是因为房价导致的,哪个区域的房价高,哪个区域就或多或少心里有点优秀 ~
avatar
ejsoon 2024-05-06 14:20
感謝推介!不過代碼並不是越小越好,壓縮過的代碼都是完全沒有可讀性的。
commentator
独元殇 2024-05-06 14:28
@ejsoon:哈哈,当然。不过这不是为了阅读,而是为了节省体积,或者其他一些需要。挺好玩的。  

https://js13kgames.github.io/resources/  

↑  一系列牛批带电的黑科技 迷你 小玩意儿,有 2d 3d 引擎、物理、音频、像素等等引擎,体积都很小
commentator
独元殇 2024-05-06 14:32
@ejsoon:还有这哥们儿 也挺能产出的 ↓

https://xem.github.io/codegolf/intro.html
avatar
Lvtu 2024-05-03 23:29
这不就对了,没事多出去转转,如可以去爬爬梧桐山,好久没去华强北和东门了,不知那里是否还繁华。。。
做好心理准备,接下来如果天气好转将迎来持续几个月的高温天气!
宝安早期可是深圳工业非常发达的区,那时有很多工厂,而福田主要是高楼大厦多。。。
commentator
独元殇 2024-05-04 07:36
@Lvtu:现在这种天气确实挺适合爬山逛街,不是很热。连续好几个月的高温天气应该不至于吧,岭南在夏季是高温多雨的。

今天早上,又是淋漓小雨 + 咚咙咚咙 的打雷声~

龙华满大街都是饭店、公寓住宅,一看就是专为睡觉打造的区,去其他四个区都方便,而宝安满大街都是 金属折弯切割模具制造精密零件抛光打磨冲压铸造钣金..... 这种门店小作坊,一眼望不到头,看起来应该都是吃大工厂某些小零件或者工序的小供应商,整体氛围就不一样,路两旁和东莞差不多,到处是工业园。
commentator
Lvtu 2024-05-07 11:29
@独元殇:嗯,多雨,但秒停,并且停后就是烈日当空。。。