萬(wàn)萬(wàn)沒(méi)想到，如此普通的復(fù)選框，竟也能玩出這種高度！
例如點(diǎn)一下復(fù)選框，屏幕就像被投入石子的水面泛出波紋：
設(shè)定好初始狀態(tài)，就可以開(kāi)始展示《生命游戲》的演化過(guò)程；
控制上下左右，還能還原經(jīng)典游戲《貪吃蛇》；
這就是一位做前端開(kāi)發(fā)的小哥 Bryan，近期在自己的網(wǎng)站上發(fā)布的有關(guān) checkbox （復(fù)選框）的新玩法。
這個(gè)項(xiàng)目在 Hacker News 上引來(lái)了大量網(wǎng)友評(píng)論。
高贊評(píng)論已經(jīng)給小朋友安排得明明白白了~
而面對(duì)一些諸如“為什么要用復(fù)選框，普通像素就可以達(dá)到這種效果”的質(zhì)疑，也有人為 Bryan 說(shuō)話：
回到這件事本身，其實(shí)在去年早些時(shí)候，他就建了一個(gè)名為 Checkboxland 的 JavaScript 庫(kù)。
它可以將任何內(nèi)容呈現(xiàn)為 HTML 復(fù)選框。
還有更厲害的玩法
講真，剛才展示的復(fù)選框效果，只能說(shuō)是“開(kāi)胃菜”。
不僅僅是簡(jiǎn)單的動(dòng)畫，日常拍下的照片，記錄的生活 vlog，一樣可以成為“復(fù)選框”的素材。
小哥本人也一度以為靈感耗盡，但在參閱了一篇關(guān)于將圖像轉(zhuǎn)化為 ASCII 的文章之后，Bryan 將蘋果的 logo 轉(zhuǎn)化了出來(lái)。
小哥本人也是老二次元了，《Bad Apple》也是信手拈來(lái)：
隨后，自嘲“the CheckBox guy”的小哥賦予了復(fù)選框更多的可能，他又拓展了 Checkboxland API，用來(lái)加載任何視頻并生成復(fù)選框版本。
下面這個(gè)看起來(lái)就像進(jìn)入了《星際穿越》的五維立方體。
而此刻你如果打開(kāi)攝像頭，Bryan 還可以帶領(lǐng)你半只腳踏進(jìn)《黑客帝國(guó)》~
趕快學(xué)起來(lái)，說(shuō)不定還能用來(lái)畫心形圖，成為你的表白神器（不是）！
復(fù)選框花式玩法，什么原理？
看似炫酷的效果實(shí)際制作過(guò)程只需分為兩大步，手把手教你！
1.做出原本的圖像。
2.將圖像轉(zhuǎn)化為 ASCII 文本輸出。
以水波為例，首先要生成這樣動(dòng)態(tài)的水波。
想要生成它，需要以中心為原點(diǎn)，在 xy 平面上建立正弦函數(shù)。
z 軸垂直屏幕向外，把 z 軸的數(shù)值轉(zhuǎn)化為灰度，白色為波峰，黑色為波谷。
然后在圖形計(jì)算器 desmos 上讓水波動(dòng)起來(lái)，這樣第一步就完成了。
第二步，將第一步的成果轉(zhuǎn)化為 ASCII 碼輸出。
這一步的轉(zhuǎn)化主要涉及到將彩色對(duì)應(yīng)灰度。
采用這個(gè)公式，即使是彩色的圖片，也只不過(guò)是五彩斑斕的灰罷了~
GrayScale = 0.21 R + 0.72 G + 0.07 B
提取原圖的 RGB 色彩，輸出為灰度：
const toGrayScale = (r, g, b) => 0.21 * r + 0.72 * g + 0.07 * b;
const convertToGrayScales = (context, width, height) => {
const imageData = context.getImageData(0, 0, width, height);
const grayScales = [];
for (let i = 0 ; i < imageData.data.length ; i += 4) {
const r = imageData.data[i];
const g = imageData.data[i + 1];
const b = imageData.data[i + 2];
const grayScale = toGrayScale(r, g, b);
imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = grayScale;
grayScales.push(grayScale);
}
context.putImageData(imageData, 0, 0);
return grayScales;
};然后為每個(gè)像素賦灰度值：
const grayRamp = '$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,"^`\'. ';
const rampLength = grayRamp.length;
const getCharacterForGrayScale = grayScale => grayRamp[Math.ceil((rampLength - 1) * grayScale / 255)];
const asciiImage = document.querySelector('pre#ascii');
const drawAscii = (grayScales) => {
const ascii = grayScales.reduce((asciiImage, grayScale) => {
return asciiImage + getCharacterForGrayScale(grayScale);
}, '');
asciiImage.textContent = ascii;
};最后調(diào)整一下圖片大小就大功告成了~ 更多詳細(xì)內(nèi)容見(jiàn)文后鏈接~
在線可玩，快來(lái)試試
在最近的更新中，Bryan 稱，他創(chuàng)造新天地的事情將暫時(shí)告一段落。
但是他不僅留下了復(fù)選框新玩法原理的詳細(xì)介紹，還有自制的豐富的 demos。這些足以讓你探索創(chuàng)造。
簡(jiǎn)單的動(dòng)畫，貪吃蛇，通過(guò)攝像頭實(shí)時(shí)生成復(fù)選框版圖像（demos 中的 webcam）…
點(diǎn)擊即可試玩，以貪吃蛇和 webcam 為例：
點(diǎn)擊 snake，鍵盤上下左右即可控制貪吃蛇：
點(diǎn)擊 webcam，打開(kāi)前置攝像頭，可以看到自己的實(shí)時(shí)動(dòng)態(tài)：
根據(jù)網(wǎng)友的反饋，似乎在安卓系統(tǒng)中打開(kāi)會(huì)白屏，但是在 Mac Safari, iPhone Safari, 桌面 Chrome 上都可以使用。
感興趣的小伙伴，快來(lái)試試吧~
參考鏈接：
https://www.bryanbraun.com/2021/09/21/i-keep-making-things-out-of-checkboxes/
https://news.ycombinator.com/item?id=28826018
https://www.jonathan-petitcolas.com/2017/12/28/converting-image-to-ascii-art.html
https://www.bryanbraun.com/checkboxland/#demos
https://github.com/bryanbraun/checkboxland
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。