設定好初始狀態,就可以開始展示《生命遊戲》的演化過程;
控制上下左右,還能還原經典遊戲《貪吃蛇》;
這就是一位做前端開發的小哥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 = ‘[email protected]%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上都可以使用。
感興趣的小夥伴,快來試試吧~