量子(zǐ)位報(bào)道公衆号 QbitAI

萬萬沒想到，如(rú)此普通的複選框，竟也(yě)能(néng)玩(wán)出這(z為吧hè)種高度！

例如(rú)點一(yī)下(xià)複選框城輛，屏幕就(jiù)像被投入石子(zǐ)的水面泛出波紋：什南

設定好(hǎo)(hǎo)初始狀态，就(jiù)可以開始展示《生北但(shēng)命遊戲》的演化(huà)過程；

控制上(shàng)下(xià)左右，還能(néng器小)還原經典遊戲《貪吃蛇》；

這(zhè)就(jiù)是一(yī)位做前端開發的小哥 B友事ryan，近期在自己的網站(zhàn)上(sh兵業àng)發布的有關(guān)checkbox（複選框）的新(xīn)玩(wán)法。

這(zhè)個(gè)項目在 Hacke站水r News 上(shàng)引來(lái)了(le)大量網友評論。

高贊評論已經給小朋(péng)友安排得明明白白了(le)~

而面對一(yī)些(xiē)諸如(rú)“為(wèi)什(shén)音業麼要用複選框，普通像素就(jiù)可以達到這(zhè)種效果”的質疑，也(明請yě)有人(rén)為(wèi) Bryan 門西說(shuō)話(huà)：

回到這(zhè)件事(shì)本身(shēn)，其實在去年早些(xiē)時(高會shí)候，他就(jiù)建了(le)一(yī)個(gè)名為(去好wèi) Checkboxland 的 Ja劇訊vaScript 庫。

它可以将任何内容呈現(xiàn)為(wèi) 窗很HTML 複選框。

還有更厲害的玩(wán)法

講真，剛才展示的複選框效果，隻能(néng)說(shuō)是“開胃菜”。們訊

不僅僅是簡單的動畫，日常拍下(xià)的美她照片，記錄的生(shēng)活 vlog湖船，一(yī)樣可以成為(wèi)“複選框”的素材。公內

小哥本人(rén)也(yě)一(yī)度以為(wèi)靈窗公感耗盡，但(dàn)在參閱了(le)一(yī)篇關車的(guān)于将圖像轉化(huà)為(wèi) AS文行CII 的文章之後，Bryan 将耐克和蘋果的 logo湖門 轉化(huà)了(le)出來(lái)（不建道朋議(yì)轉化(huà)迪士尼的 logo）。科綠

小哥本人(rén)也(yě)是老二次元了(le)，《Bad Apple山員》也(yě)是信手拈來(lái)：

随後，自嘲“the CheckBox guy”的小哥賦予了(le)大自複選框更多的可能(néng)，他又拓展了(le) Check黃化boxland API，用來(lái)加載任何視(shì)頻并生(shēn站關g)成複選框版本。

下(xià)面這(zhè)個(gè)看起來(lái)就(jiù)外會像進入了(le)《星際穿越》的五維立方體(tǐ)。

而此刻你如(rú)果打開攝像頭，Bryan 還可以帶領電下你半隻腳踏進《黑客帝國》~

趕快(kuài)學起來(lái)，說(shuō)不定還哥銀能(néng)用來(lái)畫心形圖，成為(wèi)你的服靜表白神器(qì)（不是）！

複選框花式玩(wán)法，什(shén)麼原理(lǐ)？

看似炫酷的效果實際制作(zuò)過程隻需分(fēn)為(wèi)兩大步，手的又把手教你！

1. 做出原本的圖像。

2. 将圖像轉化(huà)為(wèi) ASCII 文少低本輸出。

以水波為(wèi)例，首先要生(shēng)成這(zhè)樣動态的水波。

想要生(shēng)成它，需要以中心為(wèi)原頻新點，在 xy 平面上(shàng)建立正弦函數。

z 軸垂直屏幕向外，把z軸的數值轉化(huà)為(wè雨家i)灰度，白色為(wèi)波峰，黑色為(wèi)波谷的刀。

然後在圖形計算(suàn)器(qì) desmos 上(shàng)個海讓水波動起來(lái)，這(zhè)樣第一(yī)步很作就(jiù)完成了(le)。

第二步，将第一(yī)步的成果轉化(huà)為(wèi)文友 ASCII 碼輸出。

這(zhè)一(yī)步的轉化(huà)主要涉及到将彩色對應灰度。這懂

采用這(zhè)個(gè)公式，即使是彩筆少色的圖片，也(yě)隻不過是五彩斑斓的灰罷了(le)~

• GrayScale = 0.21 R + 0.72道放 G + 0.07 B

提取原圖的 RGB 色彩，輸出為(wèi)灰度：

• const toGrayScale = (r, g, b) =個弟> 0.21 * r + 0.72 * g + 0.07 * b器子;

const convertToGrayScales = (國車context, width, height) =>用雨; {

const imageData = con光生text.getImageData (0,請作 0, width, height);

const grayScales = [];

for (let i = 0 ; i < imageData.d銀購ata.length ; i += 4) {

const r = imageData.da跳朋ta[i];

const g = imageData.什他data[i + 1];

const b = imageData.dat媽東a[i + 2];

const grayScale = toGrayScale (r, g, 請美b);

imageData.data[i] = imageData.da湖可ta[i + 1] = imageData.data[i + 2] 錯看= grayScale;

grayScales.push (grayS道分cale);

context.putImageData (imageD海黃ata, 0, 0);

return grayScales;

然後為(wèi)每個(gè)像素賦灰度值：

• const grayRamp = '到器;$@B%8&WM#*oahkb業吃dpqwmZO0QLCJUYXzcvunx分兒rjft/()1{}[]?-_+~<&g們大t;i!lI;:,"^`\'下做;. ';

const rampLength = gra通這yRamp.length;

const getCharacterFo錢明rGrayScale = grayScale => grayRamp[M說黑ath.ceil ((rampLength - 吧地1) * grayScale / 255)];

• const asciiImage = document.q慢友uerySelector ('pre#as工慢cii');

const drawAscii = (grayScales) =能個> {

const ascii = grayScales.reduce ((asci遠請iImage, grayScale) => {

return asciiImage + getC購樂haracterForGrayScale (grayS車舊cale);

}， '');

asciiImage.textContent =廠姐 ascii;

最後調整一(yī)下(xià)圖片大小就(jiù)大功告成會人了(le)~更多詳細内容見文後鍊接~

在線可玩(wán)，快(kuài)來(lá從算i)試試

在最近的更新(xīn)中，Bryan 稱，他創造新(xīn)天地的事(shì)高動情将暫時(shí)告一(yī)段落。

但(dàn)是他不僅留下(xià)了(le)複選框新(xī商男n)玩(wán)法原理(lǐ)的詳細介紹，還有自制的豐富的 demos。土筆這(zhè)些(xiē)足以讓你探索創造。術雜

簡單的動畫，貪吃蛇，通過攝像頭實時(shí)生又草(shēng)成複選框版圖像（demos 中的 webcam）…藍車

點擊即可試玩(wán)，以貪吃蛇和 webcam 為(wèi)例：

點擊 snake，鍵盤上(shàng)下了弟(xià)左右即可控制貪吃蛇：

點擊 webcam，打開前置攝像頭，可以看到也開自己的實時(shí)動态：

根據網友的反饋，似乎在安卓系統中打開會白屏知女，但(dàn)是在 Mac Safari工計, iPhone Safari, 桌面 Chrome 上(shàng)都區村可以使用。

感興趣的小夥伴，快(kuài)來(lái)試試吧(ba)~

[1]https://www.bryanbraun可間.com/2021/09/21/i-keep-ma東算king-things-out-of-checkbo他藍xes/

[2]https://news.ycombinator.com/報錢item?id=28826018

[3]https://www.jonathan-petitcolas.com/20嗎算17/12/28/converting-image-關亮to-ascii-art.html

[4]https://www.bryanbraun.com/che雜亮ckboxland/#demos

[5]https://github.com/bryanbraun/che制農ckboxland