萬萬沒想到，如此普通的複選框，竟也能玩出這種高度！

例如點一下複選框，螢幕就像被投入石子的水面泛出波紋：

設定好初始狀態，就可以開始展示《生命遊戲》的演化過程;

控制上下左右，還能還原經典遊戲《貪吃蛇》;

這就是一位做前端開發的小哥Bryan，近期在自己的網站上發佈的有關checkbox（複選框）的新玩法。

這個專案在Hacker News上引來了大量網友評論。

高讚評論已經給小朋友安排得明明白白了~

而面對一些諸如「為什麼要用複選框，普通圖元就可以達到這種效果」的質疑，也有人為Bryan說話：

回到這件事本身，其實在去年早些時候，他就建了一個名為Checkboxland的JavaScript庫。

它可以將任何內容呈現為HTML複選框。

還有更厲害的玩法

講真，剛才展示的複選框效果，只能說是「開胃菜」。。

不僅僅是簡單的動畫，日常拍下的照片，記錄的生活vlog，一樣可以成為”複選框”的素材。

小哥本人也一度以為靈感耗盡，但在參閱了一篇關於將圖像轉化為ASCII的文章之後，Bryan將耐克和蘋果的logo轉化了出來（不建議轉化迪士尼的logo）。

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

隨後，自嘲”the CheckBox guy”的小哥賦予了複選框更多的可能，他又拓展了Checkboxland API，用來載入任何視頻並生成複選框版本。

下面這個看起來就像進入了《星際穿越》的五維立方體。

而此刻你如果打開攝像頭，Bryan還可以帶領你半隻腳踏進《駭客帝國》~

趕快學起來，說不定還能用來畫心形圖，成為你的表白神器（不是）！

複選框花式玩法，什麼原理？

看似炫酷的效果實際製作過程只需分為兩大步，手把手教你！

1.做出原本的圖像。

2.將圖像轉化為ASCII文本輸出。

以水波為例，首先要生成這樣動態的水波。

想要生成它，需要以中心為原點，在xy平面上建立正弦函數。

z軸垂直螢幕向外，把z軸的數值轉化為灰度，白色為波峰，黑色為波谷。

然後在圖形計算機desmos上讓水波動起來，這樣第一步就完成了。

第二步，將第一步的成果轉化為ASCII碼輸出。

這一步的轉化主要涉及到將彩色對應灰度。

採用這個公式，即使是彩色的圖片，也只不過是五彩斑斕的灰罷了~

• 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;

然後為每個圖元賦灰度值：

• 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;

最後調整一下圖片大小就大功告成了~更多詳細內容見文後連結~

在線可玩，快來試試

在最近的更新中，Bryan稱，他創造新天地的事情將暫時告一段落。

但是他不僅留下了複選框新玩法原理的詳細介紹，還有自製的豐富的demos。 這些足以讓你探索創造。

簡單的動畫，貪吃蛇，通過攝像頭即時生成複選框版圖像（demos中的webcam）…

點擊即可試玩，以貪吃蛇和webcam為例：

點擊snake，鍵盤上下左右即可控制貪吃蛇：

點擊webcam，打開前置攝像頭，可以看到自己的實時動態：

根據網友的反饋，似乎在Android系統中打開會白屏，但是在Mac Safari， iPhone Safari， 桌面Chrome上都可以使用。

感興趣的小夥伴，快來試試吧~

來源：量子位