基于視頻反饋的交互式圖案生成技術(shù)

律睿慜，孟 磊，劉 淵，張 軍，李靜遠(yuǎn)

（1.江南大學(xué) 數(shù)字媒體學(xué)院，江蘇 無錫214122；2.成都航空職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)工程系，四川 成都610100）

0 引 言

用顯示屏將攝像頭拍攝的內(nèi)容實(shí)時(shí)顯示，并且將攝像頭指向顯示屏，便構(gòu)成了視頻反饋。幾十年來，已有不少科學(xué)家和藝術(shù)家對視頻反饋進(jìn)行了探索［1］，展現(xiàn)了視頻反饋的一些有趣特性：①它能生成多樣的、不斷演化的圖案，這是由于它的反饋機(jī)制引起 “蝴蝶效應(yīng)”［2］；②它允許用任意實(shí)物交互式地生成圖案［2］，具有可觸式人機(jī)交互界面（tangible user interface，TUI）［3］的 種 種 優(yōu) 點(diǎn)。上 述 特 性 暗示了視頻反饋?zhàn)鳛閳D案設(shè)計(jì)工具的可能性。視頻反饋的混沌特性導(dǎo)致其圖形的演化過程難以控制和預(yù)測，因而也未能很好的應(yīng)用于圖案設(shè)計(jì)領(lǐng)域。至今，關(guān)于視頻反饋的研究主要包括理論分析［4］和實(shí)驗(yàn)研究［5］，或者將其用于生成分形圖像［6］，以及制作抽象動(dòng)畫、特效視頻和藝術(shù)裝置等［1］，卻沒有基于視頻反饋開發(fā)出易于操作的圖案設(shè)計(jì)工具。鑒于此，本研究將圖像濾波、圖像的仿射變換引入視頻反饋，實(shí)現(xiàn)一種可觸式的交互圖案創(chuàng)作工具VFPD （video feedback pattern designer），該工具有以往一些圖案創(chuàng)作工具［7－19］未能兼?zhèn)涞膬?yōu)點(diǎn)：允許運(yùn)用任意實(shí)物以 “可觸式交互”方式高效地創(chuàng)作圖案；生成具有顯著分形特征的圖案；圖案的整體布局形式由用戶繪制，而圖案的細(xì)節(jié)則通過用戶與系統(tǒng)的 “可觸式交互”［3］而生成，效果多樣化。

1 系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

1.1 系統(tǒng)結(jié)構(gòu)

VFPD 系統(tǒng)的硬件外觀如圖1 （a）所示，由攝像頭及主顯示器構(gòu)成視頻反饋機(jī)制，主顯示器上放置玻璃板，構(gòu)成用戶操作平臺(tái)，則用戶可在操作平臺(tái)上操作任意實(shí)物進(jìn)行圖案創(chuàng)作，副顯示器是主顯示器的同步顯示，當(dāng)操作平臺(tái)上放置實(shí)物時(shí)用戶無法通過主顯示器觀看圖案全貌，則可通過副顯示器觀看。

圖1 VFPD 系統(tǒng)外觀與結(jié)構(gòu)

VFPD 系統(tǒng)結(jié)構(gòu)如圖1 （b）所示 （圖中略去了副顯示器、玻璃板），包括視頻反饋裝置和數(shù)字處理程序兩個(gè)主要部分。視頻反饋裝置由普通的彩色攝像頭指向普通的液晶顯示器構(gòu)成。數(shù)字處理程序由圖像處理模塊、圖案生成模塊及用戶界面構(gòu)成。圖像處理模塊包含一連串圖像處理函數(shù)，這一函數(shù)鏈?zhǔn)怯捎脩敉ㄟ^用戶界面，將圖像處理庫中的函數(shù)進(jìn)行拼接而成。圖案生成模塊將輸入的圖像映射到特定的圖案結(jié)構(gòu)上，生成圖案，這一特定的圖案結(jié)構(gòu)是用戶通過用戶界面對圖案結(jié)構(gòu)進(jìn)行交互式繪制而得到的。系統(tǒng)運(yùn)行時(shí)，攝像頭將不斷獲取圖像，每一幀圖像經(jīng)由圖像處理模塊和圖案生成模塊處理為一幅圖案并在顯示器上顯示，然后再被攝像頭獲取，形成視頻反饋回路。同時(shí)，用戶可在攝像頭及顯示器之間操縱任意物品，向視頻反饋中輸入圖像，從而形成豐富多樣的圖案。

1.2 圖像處理模塊

圖像處理模塊是由一系列圖像處理函數(shù)構(gòu)成的函數(shù)鏈。用戶可以在圖像處理庫中選取函數(shù)，設(shè)置參數(shù)并組合成自定義的函數(shù)鏈 （可以為空鏈，即不對輸入圖像做任何處理）。因此，圖像處理模塊的功能取決于圖像處理庫中包含的基本函數(shù)。圖像處理庫中包含多種典型的圖像處理算法，我們的設(shè)計(jì)主要是將這些算法封裝為一系列具有用戶設(shè)置接口的函數(shù)。圖像處理函數(shù)的基本形式如下

式中：Iin——輸入圖像，Iout——輸出圖像，c1，c2，…，cn是一系列用戶設(shè)定的參數(shù)，其數(shù)量與具體的函數(shù)有關(guān)。圖像處理庫中包含線性濾波函數(shù)、色彩變換函數(shù)及形態(tài)學(xué)處理函數(shù)，其具體運(yùn)算方式及用戶接口如下所述。

1.2.1 線性濾波函數(shù)

線性濾波函數(shù)如下

式 （2）表示對圖像I 的每個(gè)色彩通道以卷積核H 進(jìn)行二維卷積運(yùn)算，H 為用戶設(shè)定的卷積核。用戶可選取一些經(jīng)典的卷積核，如均值濾波、高斯濾波、拉普拉斯濾波、動(dòng)態(tài)模糊、sobel算子等，也可以自由輸入任意矩陣作為卷積核。線性濾波函數(shù)對于圖像邊緣的像素，以周期延展的方式進(jìn)行處理。

1.2.2 色彩變換函數(shù)

色彩變換函數(shù)對輸入圖像的每個(gè)像素的色彩進(jìn)行變換，公式如下

式中：rin，gin，bin——輸入像素的R，G，B 顏色值，rout，gout，bout——輸出的R，G，B 顏色值，T3×3——一個(gè)3×3矩陣，由用戶從預(yù)定義的一系列矩陣中選定或自由輸入，s為一個(gè)用戶輸入的常量，clamp（C）對色彩值進(jìn)行修剪，將超出色彩值定義域的值修剪為定義域的端點(diǎn)值，例如，本系統(tǒng)中定義所有色彩值的定義域?yàn)?［0，1］，則clamp（）將大于1的值變?yōu)?，將小于0的值變?yōu)?，在定義域范圍內(nèi)的值不變。

1.2.3 形態(tài)學(xué)處理函數(shù)

形態(tài)學(xué)處理函數(shù)如下

其中，morphfilt（Iin，SE，op）表示對輸入圖像Iin的每個(gè)色彩通道用結(jié)構(gòu)元素SE 進(jìn)行以op 表示的形態(tài)學(xué)處理。SE 是用戶通過輸入?yún)?shù)而設(shè)定的形態(tài)學(xué)濾波結(jié)構(gòu)元素，op 是由用戶選定的形態(tài)學(xué)處理，用戶可選的處理方式包括“bottom－h(huán)at”，“close”， “erode”， “fill”， “open”等形態(tài)學(xué)算子。

1.3 圖案生成模塊

本模塊將輸入的圖像映射到用戶繪制的圖案結(jié)構(gòu)上，生成輸出圖像。圖案結(jié)構(gòu)表達(dá)了從輸入圖像到輸出圖像的空間映射關(guān)系。VFPD 的用戶界面提供了交互式的圖案結(jié)構(gòu)繪制功能，讓用戶可以定義多種多樣的圖案結(jié)構(gòu)，從而生成豐富多樣的圖案。

1.3.1 圖案結(jié)構(gòu)

圖案結(jié)構(gòu)表示了輸出圖像上每個(gè)位置對應(yīng)的輸入圖像上的相應(yīng)位置。VFPD 中，輸入圖像Iin及輸出圖像Iout分別位于XY 平面內(nèi)重疊的區(qū)域Din和Dout：0≤x ≤1，0≤y ≤1，則圖案結(jié)構(gòu)將輸出圖像的區(qū)域Dout劃分為n 個(gè)多邊形區(qū)域P1，P2，…，Pn，每個(gè)多邊形區(qū)域P1對應(yīng)于輸入圖像區(qū)域Dout中的一個(gè)多邊形區(qū)域Qi，Pi與Qi的空間關(guān)系由一個(gè)仿射變換表示，即圖案結(jié)構(gòu)F 表示一個(gè)復(fù)合的映射，該映射將每個(gè)輸入圖像上的多邊形區(qū)域Qi仿射映射到輸出圖像上的多邊形區(qū)域Pi，即F：Qi→Pi，其中i＝1，2，…，n，且所有Pi構(gòu)成完整的矩形區(qū)域Dout：Dout＝∪i＝1，2，…，nPi。則Pi中某位置（x′，y′）與Qi中對應(yīng)位置（x，y）的關(guān)系由仿射變換表示

其中，矩陣Mi為從Qi到Pi的仿射變換矩陣。

圖2示意了一個(gè)簡單的圖案結(jié)構(gòu)，其輸出圖像被劃分為3個(gè)區(qū)域并分別對應(yīng)于輸入圖像的3個(gè)相似形區(qū)域。

圖2 圖案結(jié)構(gòu)

1.3.2 圖案結(jié)構(gòu)的交互式繪制

圖案生成模塊的關(guān)鍵在于為用戶提供的交互式圖案結(jié)構(gòu)繪制功能。本功能讓用戶采用 “添加節(jié)點(diǎn)”及 “連接線段”等的方式將輸出圖像的區(qū)域Dout劃分為多個(gè)多邊形P1，P2，…，Pn，針對每個(gè)多邊形Pi，采用交互式的仿射變換 （平移、縮放、旋轉(zhuǎn)及斜切變換）獲得其對應(yīng)的輸入圖像區(qū)域Din上的多邊形區(qū)域Qi，同時(shí)其仿射變換矩陣Mi也被記錄下來。圖3示意了一個(gè)圖案結(jié)構(gòu)交互式繪制過程的實(shí)例，這一繪制結(jié)果表示將步驟1中的輸入圖像映射為步驟6表示的輸出圖像，其具體操作流程如下：

步驟1 用 “添加節(jié)點(diǎn)”及 “連接線段”等方式繪制多邊形區(qū)域Pi；

步驟2 將圖像區(qū)域完整地劃分為多個(gè)多邊形區(qū)域P1～Pn（圖中顯示了繪制了3個(gè)矩形區(qū)域）；

步驟3 對于每個(gè)多邊形區(qū)域Pi，通過交互式的仿射變換，指定其對應(yīng)的區(qū)域Di（圖中顯示了指定Dout左上角矩形區(qū)域?qū)?yīng)于Din上的區(qū)域）；

步驟4 區(qū)域Pi的映射將被顯示出來，方便用戶觀察，用戶可對其以拖動(dòng)、縮放、旋轉(zhuǎn)等方式進(jìn)行修改；

步驟5 對每個(gè)輸出圖像區(qū)域Pi都選定其對應(yīng)的輸入圖像區(qū)域Di；

步驟6 完成繪制，取消各個(gè)多邊形邊界的顯示。

圖3 圖案結(jié)構(gòu)交互式繪制流程

1.3.3 圖像映射

VFPD 系統(tǒng)把輸出圖像以滿屏幕方式顯示，因此，輸出圖像的分辨率即為顯示器的分辨率。在用戶完成圖案結(jié)構(gòu)的繪制后，輸出圖像上每個(gè)像素所在的多邊形區(qū)域?qū)⒈挥?jì)算并記錄下來。系統(tǒng)運(yùn)行時(shí)，視頻反饋的每一次運(yùn)算都將按圖像映射計(jì)算出輸出圖像上的每個(gè)像素的色彩值，計(jì)算方式如下：

設(shè)輸出圖像上某像素標(biāo)號(hào)為（m，n），其坐標(biāo)（x′m，y′m）位于多邊形區(qū)域Pi內(nèi)，則其色彩值C（m，n）按如下運(yùn)算求解：

步驟1 依據(jù)Pi內(nèi)的仿射變換矩陣Mi，通過式 （5）求出其對應(yīng)的輸入圖像上的位置（xm，ym）；

步驟2 根據(jù)輸入圖像Iin，通過二次線性插值求得位置（xm，ym）上的色 彩值，即作為（x′m，y′m）上的色彩值C（m，n）。

1.4 使用方法

VFPD 系統(tǒng)具有兩個(gè)可切換模式——編輯模式和生成模式。在編輯模式中，視頻反饋回路停止運(yùn)轉(zhuǎn)，用戶可對圖像處理模塊及圖案生成模塊進(jìn)行設(shè)置，也即按1.2節(jié)的方法設(shè)定函數(shù)處理鏈并以1.3節(jié)的方法繪制圖案結(jié)構(gòu)。當(dāng)切換到生成模式時(shí)，編輯模式的功能不可用，而視頻反饋回路持續(xù)運(yùn)行，用戶可在攝像頭及顯示器之間操作任意日常物品以生成圖案。

2 應(yīng)用示例

2.1 用任意實(shí)物以 “可觸式交互”方式進(jìn)行圖案創(chuàng)作

VFPD 允許用任意實(shí)物實(shí)時(shí)生成圖案，從而能高效地生成大量圖案。圖4示意了采用各種實(shí)物操作技術(shù)進(jìn)行圖案創(chuàng)作。對于特定的圖像處理序列及圖案結(jié)構(gòu)，不同的物品可生成各式圖案，生成的圖案中始終保持著用戶所使用物品的視覺特征。這種以實(shí)物創(chuàng)作圖案的方式使得用戶可以在在短時(shí)間內(nèi)創(chuàng)作大量相同對稱形式的圖案。這種用實(shí)物進(jìn)行數(shù)字藝術(shù)創(chuàng)作的特色具有“可觸式”［3］創(chuàng)作工具的優(yōu)點(diǎn)。

圖4 運(yùn)用各種實(shí)物進(jìn)行圖案創(chuàng)作

2.2 特定主題的分形圖案創(chuàng)作

在圖案設(shè)計(jì)實(shí)踐中，一個(gè)通常的方法就是，設(shè)計(jì)師在某個(gè)特定的主題和構(gòu)成形式的限定下，創(chuàng)作出大量不同細(xì)節(jié)特征的圖案。

VFPD 的特性恰好適用于上述創(chuàng)作方法，并且其優(yōu)點(diǎn)就是將這種一般的圖案創(chuàng)作方法變得高效。下面展示運(yùn)用VFPD 進(jìn)行 “iPod”主題圖案創(chuàng)作的實(shí)例。創(chuàng)作的基本思路包括：①針對這一主題，在創(chuàng)作過程中都使用iPod實(shí)物來進(jìn)行創(chuàng)作；②為了實(shí)現(xiàn)多種不同的圖案構(gòu)成形式，可使用VFPD 提供的圖案結(jié)構(gòu)繪制功能，定義多種圖案結(jié)構(gòu)；③為了實(shí)現(xiàn)不同的視覺風(fēng)格，可通過定義不同的圖像處理功能以及實(shí)物交互的技巧來實(shí)現(xiàn)。

2.2.1 生成多種對稱形式的圖案

通過繪制不同的圖案結(jié)構(gòu)，并且采用iPod進(jìn)行創(chuàng)作，生成了多種類型的對稱性圖案 （如圖5所示），它們具有不同的周期性基元及對稱組，包括Archimedean tilings 和Laves tilings等經(jīng)典的對稱結(jié)構(gòu)［20］，同時(shí)這些圖案都具有分形藝術(shù)特有的尺度對稱性。

圖5 生成多樣化對稱結(jié)構(gòu)的iPod主題圖案

由此可見，VFPD 提供的繪制功能，讓用戶可以任意定義出各種布局形式的圖案，在此基礎(chǔ)上，利用視頻反饋的混沌及分形特性，快速生成演化的、具有分形特征的圖案。

2.2.2 生成多種風(fēng)格圖案

對于一種圖案結(jié)構(gòu)，可嘗試組合不同的圖像處理函數(shù)鏈，從而創(chuàng)作出整體結(jié)構(gòu)一致，但細(xì)節(jié)及風(fēng)格多樣化的圖案。圖6示意了采用同一個(gè)圖案結(jié)構(gòu)并且將iPod放置于固定位置，并通過設(shè)定不同的圖像處理鏈，從而生成風(fēng)格多樣化的圖案。圖6從左到右依次采用的圖像處理方式為：prewitt濾波＋色彩翻轉(zhuǎn)，動(dòng)態(tài)模糊，色彩變換，形態(tài)學(xué)腐蝕。

圖6 生成結(jié)構(gòu)相同，風(fēng)格多樣化的iPod主題圖案

3 局限性及未來方向

目前VFPD 的局限性在于：①圖案結(jié)構(gòu)的繪制功能比較有限；②由于視頻反饋的混沌特性，難以精確控制圖案的細(xì)節(jié)。

在后續(xù)的研究中，將對VFPD 做進(jìn)一步擴(kuò)展，包括：①設(shè)計(jì)更自由且易用的圖案結(jié)構(gòu)繪制方式，讓該系統(tǒng)可以用于渲染更復(fù)雜結(jié)構(gòu)的圖案；②研究針對圖案細(xì)節(jié)的控制方法，讓用戶既能定義圖案的總體結(jié)構(gòu)，又能對圖案的細(xì)節(jié)加以操控；③針對普通大眾的日常娛樂消遣等用途，將本文的系統(tǒng)以軟件模擬的方式實(shí)現(xiàn)，這種純軟件方式可以在一些特定的場合獲得更加方便的應(yīng)用，例如數(shù)碼相機(jī)內(nèi)的圖像處理軟件、手機(jī)圖像處理應(yīng)用軟件等，但是其缺點(diǎn)就是，用戶無法獲得用實(shí)物進(jìn)行即興發(fā)揮的創(chuàng)作體驗(yàn)和探索樂趣。

4 結(jié)束語

本研究拓展了以往關(guān)于視頻反饋的研究，將視頻反饋分形特效運(yùn)用到了計(jì)算機(jī)輔助圖案設(shè)計(jì)領(lǐng)域，讓用戶以“可觸式交互”的方式快速地生成特定主題的分形圖案。該技術(shù)可開發(fā)為完整的圖案創(chuàng)作環(huán)境，也可以作為插件融合到當(dāng)前常用的圖案圖形編輯系統(tǒng)中，還可以開發(fā)為獨(dú)立運(yùn)行的類似于 “萬花筒”的面向兒童的互動(dòng)娛樂應(yīng)用?？梢灶A(yù)期，將視頻反饋運(yùn)用到非真實(shí)感繪制、生成藝術(shù)和數(shù)字繪畫等領(lǐng)域，也將產(chǎn)生獨(dú)特的新應(yīng)用。

［1］Andersen C，Ersen C，Bredmose L.Ultimate video feedback page［EB／OL］. ［2014－09－20］.http：／／www.videofeedback.dk／World／.

［2］The secret life of chaos ［EB／OL］. ［2014－09－20］.http：／／www.bbc.co.uk／programmes／b00pv1c3.

［3］Hiroshi Ishii.Tangible bits：Beyond pixels［C］／／Proceedings of the 2nd International Conference on Tangible and Embedded Interaction.New York，NY，USA：ACM，2008：15－25.

［4］Frame M，Neger N.Fractal video feedback as analog iterated function systems［J］.Fractals，2008，16 （3）：275－285.

［5］Holroyd T.Video feedback with a mixer［EB／OL］.［2014－09－20］.http：／／members.tripod.com／professor com／galleries／video／mixer／index.html.

［6］King P H.Video fractal genesis ［EB／OL］.［2014－9－20］.http：／／www.sweetandfizzy.com／fractals／diagrams.html.

［7］Juan Trujillo.PhotoEchoes kaleidoscope ［EB／OL］.［2014－09－20］.http：／／www.photoechoes.com／index.htm.

［8］Kaleido flash ［EB／OL］.［2014－09－20］.http：／／www.kaleidoflash.com／.

［9］TESS ［EB／OL］.［2014－09－20］.http：／／www.peda.com／tess／Welcome.html.

［10］Java kali［EB／OL］.［2014－09－20］.http：／／www.geom.uiuc.edu／java／Kali／welcome.html.

［11］KaleidoTile ［EB／OL］.［2014－09－20］.http：／／www.geometrygames.org／KaleidoTile／.

［12］TesselMania ［EB／OL］.［2014－10－12］.http：／／www.tessellations.org／tesselmania0.htm.

［13］The GAVROG project ［EB／OL］.［2014－09－20］.http：／／gavrog.org／.

［14］Artlandia ［EB／OL］.［2014－09－20］.http：／／artlandia.com／products／SymmetryWorks／.

［15］CHEN Li，YE Jiemao.Pattern automatical design based on elementary function ［J］.Journal of Tianjin Polytechnic University，2010，29 （6）：32－34 （in Chinese）. ［陳莉，葉介茂.基于初等函數(shù)的針織圖案自動(dòng)設(shè)計(jì) ［J］.天津工業(yè)大學(xué)學(xué)報(bào)，2010，29 （6）：32－34.］

［16］ZHUGE Zhenrong，DONG Ping.Algorithms of figure distortion in the fabric CAD ［J］.Journal of Textile Research，2008，29 （7）：34－37 （in Chinese）. ［諸葛振榮，董平.紋織CAD中圖案的變形算法 ［J］.紡織學(xué)報(bào)，2008，29 （7）：34－37.］

［17］FENG Ling.Application of genetic algorithm in fractal images design ［J］.Computer Engineering and Design，2008，29（12）：3185－3187 （in Chinese）. ［馮玲.遺傳算法在分形圖案自動(dòng)化設(shè)計(jì)中的應(yīng)用 ［J］.計(jì)算機(jī)工程與設(shè)計(jì)，2008，29（12）：3185－3187.］

［18］LUO Ronglei，HONG Pan.Fashion geometric printing pattern designing based on mathematical method ［J］.Journal of Textile Research，2014，35 （3）：141－144 （in Chinese）.［羅戎蕾，洪潘.基于數(shù)學(xué)方法的流行幾何圖案設(shè)計(jì) ［J］.紡織學(xué)報(bào)，2014，35 （3）：141－144.］

［19］CHEN Li，YE Jiemao.Pattern creation and knitted products design based on function Z＝axc＋byd［J］.Journal of Textile Research，2013，34 （2）：65－68 （in Chinese）.［陳莉，葉介茂.基于函數(shù)Z＝axc＋byd的圖案生成與針織產(chǎn)品設(shè)計(jì) ［J］.紡織學(xué)報(bào)，2013，34 （2）：65－68.］

［20］Ares Lagae，Craig S Kaplan，Chi－Wing Fu，et al.Tile－Based Methods for Interactive Applications ［C］／／Proceedings of SIGGRAPH，2008：535.