如此普通的复选框竟能玩出这种高度!

万万没想到,如此普通的复选框,竟也能玩出这种高度! ![]() 例如点一下复选框,屏幕就像被投入石子的水面泛出波纹: 设定好初始状态,就可以开始展示《生命游戏》的演化过程, 控制上下左右,还能还原经典游戏《贪吃蛇》, 这就是一位做前端开发的小哥 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 上让水波动起来,这样第一步就完成了。 第二步,将第一步的成果转化为 ASCII 码输出。 这一步的转化主要涉及到将彩色对应灰度。 GrayScale=0.21R+0.72G+0.07B 提取原图的 RGB 色彩,输出为灰度: consttoGrayScale==gt,0.21*r+0.72*g+0.07*b,constconvertToGrayScales==gt,constimageData=context.getImageData,constgrayScales=,forconstr=imageData.data,constg=imageData.data,constb=imageData.data,constgrayScale=toGrayScale,imageData.data=imageData.data=imageData.data=grayScale,grayScales.push,context.putImageData,returngrayScales,, 然后为每个像素赋灰度值: 1。—_+~lt,gt,i!lI,:,"^`'.',constrampLength=grayRamp.length,constgetCharacterForGrayScale=grayScale=gt,grayRamp*grayScale/255)),constasciiImage=document.querySelector('pre#ascii'),constdrawAscii=(grayScales)=gt,constascii=grayScales.reduce((asciiImage,grayScale)=gt,returnasciiImage+getCharacterForGrayScale,,''),asciiImage.textContent=ascii,, 在线可玩,快来试试 在最近的更新中,Bryan 称,他创造新天地的事情将暂时告一段落。 但是他不仅留下了复选框新玩法原理的详细介绍,还有自制的丰富的 demos这些足以让你探索创造 简单的动画,贪吃蛇,通过摄像头实时生成复选框版图像… 点击即可试玩,以贪吃蛇和 webcam 为例: 点击 snake,键盘上下左右即可控制贪吃蛇: 点击 webcam,打开前置摄像头,可以看到自己的实时动态: 根据网友的反馈,似乎在安卓系统中打开会白屏,但是在 Mac Safari, iPhone Safari, 桌面 Chrome 上都可以使用。 感兴趣的小伙伴,快来试试吧~ 参考链接: 。郑重声明:此文内容为本网站转载企业宣传资讯,目的在于传播更多信息,与本站立场无关。仅供读者参考,并请自行核实相关内容。 (编辑:笑笑) |

