怎樣用Processing設計出用圖形和文字拼出的圖案?

如圖,Photoshop 或 其他工具能不能做出?


謝邀。先發圖:

這個圖的Processing代碼大約90行,我之前已經把代碼和使用方法一起發在我的微博上了,有興趣戳這裡:Sina Visitor System
這裡我就不重複貼代碼了,只把思路單獨寫出來供參考。

為方便說明,我製作了個示意圖如下,這張圖中的三層圖片從上到下姑且命名為,圖一圖二圖三。

這三張圖尺寸相同,都是建在內存里的,圖一是我們需要的最終結果;圖三是外部導入的底圖,稍作處理後分成兩塊區域:可用文字填充區域(綠色)和不能填充區域(黑色);圖二用來在填充過程中記錄已填充區域。

1.在圖一上隨機找點,在隨機點處划出一個和文字短語佔地面積一樣大的區域,然後對照圖二圖三里相同位置的區域,如果圖三里這片區域全綠(可填充區域)並且圖二里這片區域也全綠(黑方塊代表已經填充了的區域,全綠表示這片區域沒被其它已填充文字佔據),就表示在圖一中此區域可用,在圖一中填上文字,圖二中畫上對應大小的黑方塊,然後開始找填充下一個文字的地方。
如果找的這個隨機點不符合上述條件,就繼續隨機找點,隨機上幾百次,比方說500次。
2.如果找了500次之後還找不到合適點,說明確實找不著能放下這麼大文字的地方了,就把文字縮小一圈(我這裡是把尺寸乘以了0.85)之後重複步驟1。

思路很簡單,明晰這個思路之後就能在代碼里稍加變化就能衍生出更多的玩法。
比如題目中的第二張駱駝圖片,裡面的文字大部分都是傾斜的,而我上面的代碼里文字都是水平放置的。如何讓文字傾斜?只要在步驟1裡面加一個循環即可,即隨機到一個點之後,如果該區域不滿足圖二圖三的條件,那就讓該區域旋轉10度看看是否滿足條件,還不滿足的話繼續旋轉10度,以此類推直到旋轉完180度。

再比如下圖這種小字填在大字間隙處的圖片。只要把圖二方塊控制圖拿掉,直接用圖一控制已填充區域即可達成效果。

題圖裡的手槍圖o(╯□╰)o~~的槍管處和轉輪處的字是加粗的。我認為是先手工填上去的(同時填圖一和圖二)然後剩餘部分用代碼完成,當然也有可能是全圖就沒用代碼,純手工打造出來的。

當然這種文字拼的圖片還可以更複雜些,比如下圖這種,仔細看的話會發現文字按顏色濃淡分成了幾個層次,同層次內的文字不重疊,但不同層次間的文字有重疊,可以猜到大致的思路是把底圖分成了數個色階,然後在每個色階上都拼了一張圖片,最後把拼成的幾個色階的圖片疊在一起,當然像這種玩法對於選擇底圖的要求也很苛刻。

最後,其實除了拼圖案,文字還有很多其它玩法的 ^_^

祝愉快。=================
11月29日更:
我製作了一個非常精彩的全面介紹Processing的視頻,來這裡看看:
迄今最精彩的Processing中文教程 Processing初探


其實有很多種方法。
具體方法請在知乎中搜索
「WWDC 2014的海報是怎麼做出來的?」,參見下方回答,尤其是三樓的。


推薦閱讀:

請問這樣的文字效果用Ps怎麼做?
一個合格的UI設計師需要對視覺稿進行標註嗎?
如何做出圖中字體紙張摺疊效果?
我在豬八戒網設計了一個商標,我認為這是電腦體,請大家幫我判斷一下是不是?
設計一個 logo 的常規思路和流程是怎樣的?

TAG:AdobePhotoshop | 圖像處理 | 平面設計 | Processing編程語言 | AdobeIllustrator |