没想到这么普通的checkbox能玩到这么高！例如，点击复选框，屏幕会像石头扔进水里一样泛起涟漪：设置好初始状态后，就可以开始展示《生命游戏》的进化过程；控制上、下、左、右，还原经典游戏?；是做前端开发的小弟Bryan。他最近在他的网站上发布了一种新的玩法checkbox（复选框）。这个项目在HackerNews上引起了很多网友的评论。高赞的评论已经给孩子们安排的很清楚了~不过面对“为什么要用checkbox，普通pixel就可以达到这个效果”等一些疑惑，有人替Bryan说话：回到事情本身，其实更早今年，他构建了一个名为Checkboxland的JavaScript库。它可以将任何内容呈现为HTML复选框。还有更强大的游戏玩法。说实话，刚刚展示的复选框效果只能称得上是“开胃菜”。不仅仅是简单的动画，日常拍摄的照片、记录的生活vlog也可以成为“复选框”的素材。小弟自己一度认为灵感枯竭，但是在看了一篇关于将图片转换为ASCII的文章后，Bryan将耐克和苹果的logo进行了转换（不推荐迪士尼的logo）。小哥自己也是老二次元了，《Bad Apple》来之不易：后来自嘲“CheckBox佬”的小哥给了checkbox更多的可能性，他扩展了CheckboxlandAPI来加载任何视频并生成复选框版本。下面这张看起来像是进入了《星际穿越》的五维立方体。而此时此刻，如果你打开相机，布莱恩还可以带领你半尺入《黑客帝国》~赶快学起来吧，说不定还能用来画个心形图，成为你的表白工具（不是）！复选框花式游戏的原理是什么？看似炫酷的效果实际制作过程只需要分两步，一步步教你！1.制作原图。2.将图像转换成ASCII文本输出。以水波为例，首先要产生这样的动态水波。要生成它，您需要在以中心为原点的xy平面上创建一个正弦函数。z轴垂直于屏幕外侧，z轴的值转化为灰度，白色为波峰，黑色为波谷。然后让图形计算器desmos上的水波荡漾，第一步就完成了。第二步是将第一步的结果转换成ASCII码输出。这一步的转换主要是将颜色映射为灰度。使用这个公式，即使是彩色图片也只是一个彩色的灰色~GrayScale=0.21R+0.72G+0.07B提取原图的RGB颜色，输出??为灰度：consttoGrayScale=(r,g,b)=>0.21*r+0.72*g+0.07*b;constconvertToGrayScales=(context,width,height)=>{constimageData=context.getImageData(0,0,width,height);constgrayScales=[];for(leti=0;i
