用代碼生成Glitch Art風格的抖音字體

最近看到不少文章教大家用 photoshop 實現抖音的 logo 跟字體，我也非常喜歡這種風格的字體，於是趁著晚上的時間，動手用代碼實現了下此類風格的字體特效，順便開發了個小工具，地址見文末。本文主要是從藝術手法和 JS 前端實現 2 個方面進行梳理，我們可以看到如何用代碼來描述藝術手法，達到自動化生成某一風格作品的目的。

我們先了解下抖音的這種 logo 的藝術風格。抖音 logo 這種設計手法，是故障藝術 Glitch Art 中的「錯位」。故障藝術還有燥波、失真、毛刺等等其他設計手法。

Glitch 這個詞，常指電腦或硬體設備出小毛病。著名的美國宇航員 John Glenn 對這種現象的表述為：

"Literally, a glitch is a spike or change in voltage in an electric current."

從字面上看，故障是電流中的尖峰或電壓變化。

故障藝術 GlitchArt

作為一種藝術形式，產生於我們生活中一些十分常見的場景，例如數字設備發生故障的場景，當電視、電腦等設備的軟體或硬體出現問題後，可能會造成視頻音頻播放異常，在視覺上，畫面變成破碎、帶有缺陷的圖像，顏色失真。藝術家們卻從這些故障中發現了美，他們認為故障產生的美除了代表不完善之外，更意味著意外和變化，每一次故障的發生都像是打破常規的一次再創造。

看2個案例：

Adidas x 大疆也運用故障藝術效果推出了新款限鞋盒，運動與科技的跨界聯姻：

還有動態海報的案例：

藝術家總是能從生活中發現美，從廠房的破舊發覺破舊之美，裸露的鋼結構與斑駁的混凝土讓人感受到存在的真實感。再如電影中常見的「暴力美學」，將暴力的動作場面儀式化，要麼把影片中的槍戰、打鬥場面消解為無特定意義的遊戲、玩笑；要麼把它符號化，作為與影片內容緊密相關的視覺和聽覺的審美要素。如下圖的電影海報作品採用黃色、黑色、紅色，把暴力美學融入海報設計中。

再看電影 《攻殼機動隊》 的海報，強烈的縱向、橫向的線條感：

有了以上的認知基礎，我們從藝術手法上提煉出抖音 logo 及海報字體的手法：

藝術手法1

錯位

藝術手法 2

橫向線條感

接下來， MixLab 這邊教大家用代碼實現這一風格，並開發一個小工具，用於以後製作此類字體風格，幫大家節省時間，還可以升級加入生成 GIF 動圖的功能。我們先分析下抖音的 logo ，這是一個圖形，向左向右偏移，左邊跟右邊的分別賦予2個不同顏色。如下圖所示：

最上面一種實現是比較簡單的，只要使用偏移，重疊3個字樣就行；下面一種涉及到2個字樣的交集運算，處理起來也稍複雜，但效果更精細，本文採用的是下面一種實現方式。

一個抖音風格的字體構成是由3部分構成的，分別是左上青色字樣、中間白色字樣、右下紅色字樣，我們可以用前端 canvas 實現，先繪製文字內容至畫布，然後分別向左上、右下拷貝一份，這裡主要應用到了 globalCompositeOperation 屬性，各種 globalCompositeOperation 的效果，可以一一試驗，嘗試效果。

下面開始一步步用代碼實現：

技術實現 1

偏移及 xor 操作

1.1

選一款接近抖音風格的字體：

免費商用字體：

站酷酷黑體

http://www.zcool.com.cn/special/zcoolfonts/#3rdPage

1.2

先繪製左上方的字樣

ctx.textBaseline="top";ctx.font=this.font;ctx.fillStyle=this.colorLeft;ctx.fillText(word,x-offset,y-offset);

1.3

繪製右下的字樣

ctx.globalCompositeOperation="xor";ctx.fillStyle=this.colorRight;ctx.fillText(word,x+offset,y+offset);

1.4

新建一個 canvas ，繪製背景及中間的字樣

var canvasBg=document.createElement(canvas), ctxBg=canvasBg.getContext(2d); canvasBg.width_=this.ctx.canvas.width; canvasBg.height=this.ctx.canvas.height; ctxBg.fillStyle=this.colorBg; ctxBg.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height); var word=this.word, offset=this.offset, x=this.x, y=this.y; var ctx=this.ctx; ctxBg.textBaseline="top"; ctxBg.font=this.font; ctxBg.fillStyle=this.color; ctxBg.fillText(word,x+offset,y+offset);

1.5

把第3步的畫布繪製到第4步中的背景中

ctxBg.drawImage(ctx.canvas,0,0);

技術實現 2

sin 函數 ，getImageData 及 putImageData 像素級處理

2.1

分別計算出切割字樣片段的方框坐標、高度

主要是使用 sin 函數，隨機計算出一些高度值，映射到字樣的高度中進行切割，這邊默認設置成切割成10段。代碼見 DYText.prototype.generate 的 get 部分。

2.2

為實現橫向的線條感，需計算風格化後的坐標位置。

這裡由於篇幅所限，詳細可以在知識星球諮詢。代碼見 DYText.prototype.generate 的 put 部分。

至此，我們寫了個 JS 庫，用於自動生成抖音風格的字樣。除了生成 png 圖，我們也可以繼續拓展功能，這邊選擇了開源庫：

http://jnordberg.github.io/gif.js/

在前端利用 web workers 生成 GIF ，生成速度還不錯。代碼如下：

var gif = new GIF({ workers: 20, quality: 10, workerScript:./js/gif.worker.js });var frames=this.createFrames();for (let index = 0; index < frames.length; index++) { gif.addFrame(frames[index], {delay:200})};gif.on(finished, function(blob) { cb(URL.createObjectURL(blob));});gif.render();

其中 createFrames 是 DYText.prototype.createFrames ，用於生成不同狀態下的字體，並存為一個canvas ，保存到一個 frames 數組裡。

cb ( URL.createObjectURL ( blob ) ) 是一個回調函數，因為 GIF 的生成是非同步的，所以使用回調函數 cb 把生成的 base64 傳出來，寫到一個 img 標籤的 src 即可顯示。

一個錯位、橫向線條感的字體風格生成器的 JS 庫就完成了，後面可以自行添加 UI 界面，或者擴展 JS 庫。我們總結下主要使用的藝術手法，錯位及橫向線條感，通過偏移、xor 操作、sin 函數、getImageData 及 putImageData 像素級處理等技術手段，實現了自動創作的功能。我們可以看到，從藝術手法到技術實現的過程，藝術可以被演算法清晰地描述，反過來使用演算法生成藝術作品也是成立的。

錯位

x

偏移及 xor 操作

橫向線條感

x

sin ，getImageData 及 putImageData

以上為全文內容。最近我在思考把文章當成產品來打磨，定了個小基調：一篇文章盡量涉及2個不同領域的內容，跨界思考之間的關聯性。歡迎讀者在微信群交流，入群方式留言獲取。

熱門文章推薦：