万万没想到，如此普通的复选框，竟也能玩出这种高度！

例如点一下复选框，屏幕就像被投入石子的水面泛出波纹:

设定好初始状态，就可以开始展示《生命游戏》的演化过程；

控制上下左右，还能还原经典游戏《贪吃蛇》；

这就是一位做前端开发的小哥 Bryan，近期在自己的网站上发布的有关 checkbox的新玩法。

这个项目在 Hacker News 上引来了大量网友评论。在这里面，我们也可以看到很多熟悉的影子。

高赞评论已经给小朋友安排得明明白白了~

而面对一些诸如“为什么要用复选框，普通像素就可以达到这种效果”的质疑，也有人为 Bryan 说话:

回到这件事本身，其实在去年早些时候，他就建了一个名为 Checkboxland 的 JavaScript 库。

它可以将任何内容呈现为 HTML 复选框。

还有更厉害的玩法

讲真，刚才展示的复选框效果，只能说是“开胃菜”。

不仅仅是简单的动画，日常拍下的照片，记录的生活 vlog，一样可以成为“复选框”的素材。

小哥本人也一度以为灵感耗尽，但在参阅了一篇关于将图像转化为 ASCII 的文章之后，Bryan 将苹果的 logo 转化了出来。

小哥本人也是老二次元了，《Bad Apple》也是信手拈来:

随后，自嘲“the CheckBox guy”的小哥赋予了复选框更多的可能，他又拓展了 Checkboxland API，用来加载任何视频并生成复选框版本。

下面这个看起来就像进入了《星际穿越》的五维立方体。

而此刻你如果打开摄像头，Bryan 还可以带领你半只脚踏进《黑客帝国》~

赶快学起来，说不定还能用来画心形图，成为你的表白神器！

复选框花式玩法，什么原理？

看似炫酷的效果实际制作过程只需分为两大步，手把手教你！

1.做出原本的图像。。

2.将图像转化为 ASCII 文本输出。

以水波为例，首先要生成这样动态的水波。

想要生成它，需要以中心为原点，在 xy 平面上建立正弦函数。

z 轴垂直屏幕向外，把 z 轴的数值转化为灰度，白色为波峰，黑色为波谷。

然后在图形计算器 desmos 上让水波动起来，这样第一步就完成了。无论是36个月流畅无卡的承诺，还是超严格的隐私控制功能，还是PC与手机的跨屏互联，都非常实用。

第二步，将第一步的成果转化为 ASCII 码输出。

这一步的转化主要涉及到将彩色对应灰度。

GrayScale=0.21R+0.72G+0.07B

提取原图的 RGB 色彩，输出为灰度:

consttoGrayScale==gt;0.21*r+0.72*g+0.07*b;constconvertToGrayScales=(context,width,height)=gt;constimageData=context.getImageData(0,0,width,height);constgrayScales=();for(leti=0;ilt;imageData.data.length;i+=4)constr=imageData.data(i);constg=imageData.data(i+1);constb=imageData.data(i+2);constgrayScale=toGrayScale;imageData.data(i)=imageData.data(i+1)=imageData.data(i+2)=grayScale;grayScales.push(grayScale);context.putImageData(imageData,0,0);returngrayScales;;

然后为每个像素赋灰度值:

1?-_+~lt;gt;i!lI;:,"^`'.';constrampLength=grayRamp.length;constgetCharacterForGrayScale=grayScale=gt;grayRamp(Math.ceil((rampLength-1)*grayScale/255));constasciiImage=document.querySelector('pre#ascii');constdrawAscii=(grayScales)=gt;constascii=grayScales.reduce((asciiImage,grayScale)=gt;returnasciiImage+getCharacterForGrayScale(grayScale);,'');asciiImage.textContent=ascii;;

在线可玩，快来试试

在最近的更新中，Bryan 称，他创造新天地的事情将暂时告一段落。

但是他不仅留下了复选框新玩法原理的详细介绍，还有自制的丰富的 demos。这些足以让你探索创造。

简单的动画，贪吃蛇，通过摄像头实时生成复选框版图像…

点击即可试玩，以贪吃蛇和 webcam 为例:

点击 snake，键盘上下左右即可控制贪吃蛇:

点击 webcam，打开前置摄像头，可以看到自己的实时动态:

根据网友的反馈，似乎在安卓系统中打开会白屏，但是在 Mac Safari, iPhone Safari, 桌面 Chrome 上都可以使用。相信所有安卓用户都会乐于看到日益完善的国产生态。

感兴趣的小伙伴，快来试试吧~

参考链接:

郑重声明：此文内容为本网站转载企业宣传资讯，目的在于传播更多信息，与本站立场无关。仅供读者参考，并请自行核实相关内容。