基于视频反馈的交互式图案生成技术

律睿慜，孟 磊，刘 渊，张 军，李静远

（1.江南大学 数字媒体学院，江苏 无锡214122；2.成都航空职业技术学院 计算机工程系，四川 成都610100）

0 引 言

用显示屏将摄像头拍摄的内容实时显示，并且将摄像头指向显示屏，便构成了视频反馈。几十年来，已有不少科学家和艺术家对视频反馈进行了探索［1］，展现了视频反馈的一些有趣特性：①它能生成多样的、不断演化的图案，这是由于它的反馈机制引起 “蝴蝶效应”［2］；②它允许用任意实物交互式地生成图案［2］，具有可触式人机交互界面（tangible user interface，TUI）［3］的 种 种 优 点。上 述 特 性 暗示了视频反馈作为图案设计工具的可能性。视频反馈的混沌特性导致其图形的演化过程难以控制和预测，因而也未能很好的应用于图案设计领域。至今，关于视频反馈的研究主要包括理论分析［4］和实验研究［5］，或者将其用于生成分形图像［6］，以及制作抽象动画、特效视频和艺术装置等［1］，却没有基于视频反馈开发出易于操作的图案设计工具。鉴于此，本研究将图像滤波、图像的仿射变换引入视频反馈，实现一种可触式的交互图案创作工具VFPD （video feedback pattern designer），该工具有以往一些图案创作工具［7－19］未能兼备的优点：允许运用任意实物以 “可触式交互”方式高效地创作图案；生成具有显著分形特征的图案；图案的整体布局形式由用户绘制，而图案的细节则通过用户与系统的 “可触式交互”［3］而生成，效果多样化。

1 系统设计与实现

1.1 系统结构

VFPD 系统的硬件外观如图1 （a）所示，由摄像头及主显示器构成视频反馈机制，主显示器上放置玻璃板，构成用户操作平台，则用户可在操作平台上操作任意实物进行图案创作，副显示器是主显示器的同步显示，当操作平台上放置实物时用户无法通过主显示器观看图案全貌，则可通过副显示器观看。

图1 VFPD 系统外观与结构

VFPD 系统结构如图1 （b）所示 （图中略去了副显示器、玻璃板），包括视频反馈装置和数字处理程序两个主要部分。视频反馈装置由普通的彩色摄像头指向普通的液晶显示器构成。数字处理程序由图像处理模块、图案生成模块及用户界面构成。图像处理模块包含一连串图像处理函数，这一函数链是由用户通过用户界面，将图像处理库中的函数进行拼接而成。图案生成模块将输入的图像映射到特定的图案结构上，生成图案，这一特定的图案结构是用户通过用户界面对图案结构进行交互式绘制而得到的。系统运行时，摄像头将不断获取图像，每一帧图像经由图像处理模块和图案生成模块处理为一幅图案并在显示器上显示，然后再被摄像头获取，形成视频反馈回路。同时，用户可在摄像头及显示器之间操纵任意物品，向视频反馈中输入图像，从而形成丰富多样的图案。

1.2 图像处理模块

图像处理模块是由一系列图像处理函数构成的函数链。用户可以在图像处理库中选取函数，设置参数并组合成自定义的函数链 （可以为空链，即不对输入图像做任何处理）。因此，图像处理模块的功能取决于图像处理库中包含的基本函数。图像处理库中包含多种典型的图像处理算法，我们的设计主要是将这些算法封装为一系列具有用户设置接口的函数。图像处理函数的基本形式如下

式中：Iin——输入图像，Iout——输出图像，c1，c2，…，cn是一系列用户设定的参数，其数量与具体的函数有关。图像处理库中包含线性滤波函数、色彩变换函数及形态学处理函数，其具体运算方式及用户接口如下所述。

1.2.1 线性滤波函数

线性滤波函数如下

式 （2）表示对图像I 的每个色彩通道以卷积核H 进行二维卷积运算，H 为用户设定的卷积核。用户可选取一些经典的卷积核，如均值滤波、高斯滤波、拉普拉斯滤波、动态模糊、sobel算子等，也可以自由输入任意矩阵作为卷积核。线性滤波函数对于图像边缘的像素，以周期延展的方式进行处理。

1.2.2 色彩变换函数

色彩变换函数对输入图像的每个像素的色彩进行变换，公式如下

式中：rin，gin，bin——输入像素的R，G，B 颜色值，rout，gout，bout——输出的R，G，B 颜色值，T3×3——一个3×3矩阵，由用户从预定义的一系列矩阵中选定或自由输入，s为一个用户输入的常量，clamp（C）对色彩值进行修剪，将超出色彩值定义域的值修剪为定义域的端点值，例如，本系统中定义所有色彩值的定义域为 ［0，1］，则clamp（）将大于1的值变为1，将小于0的值变为0，在定义域范围内的值不变。

1.2.3 形态学处理函数

形态学处理函数如下

其中，morphfilt（Iin，SE，op）表示对输入图像Iin的每个色彩通道用结构元素SE 进行以op 表示的形态学处理。SE 是用户通过输入参数而设定的形态学滤波结构元素，op 是由用户选定的形态学处理，用户可选的处理方式包括“bottom－hat”，“close”， “erode”， “fill”， “open”等形态学算子。

1.3 图案生成模块

本模块将输入的图像映射到用户绘制的图案结构上，生成输出图像。图案结构表达了从输入图像到输出图像的空间映射关系。VFPD 的用户界面提供了交互式的图案结构绘制功能，让用户可以定义多种多样的图案结构，从而生成丰富多样的图案。

1.3.1 图案结构

图案结构表示了输出图像上每个位置对应的输入图像上的相应位置。VFPD 中，输入图像Iin及输出图像Iout分别位于XY 平面内重叠的区域Din和Dout：0≤x ≤1，0≤y ≤1，则图案结构将输出图像的区域Dout划分为n 个多边形区域P1，P2，…，Pn，每个多边形区域P1对应于输入图像区域Dout中的一个多边形区域Qi，Pi与Qi的空间关系由一个仿射变换表示，即图案结构F 表示一个复合的映射，该映射将每个输入图像上的多边形区域Qi仿射映射到输出图像上的多边形区域Pi，即F：Qi→Pi，其中i＝1，2，…，n，且所有Pi构成完整的矩形区域Dout：Dout＝∪i＝1，2，…，nPi。则Pi中某位置（x′，y′）与Qi中对应位置（x，y）的关系由仿射变换表示

其中，矩阵Mi为从Qi到Pi的仿射变换矩阵。

图2示意了一个简单的图案结构，其输出图像被划分为3个区域并分别对应于输入图像的3个相似形区域。

图2 图案结构

1.3.2 图案结构的交互式绘制

图案生成模块的关键在于为用户提供的交互式图案结构绘制功能。本功能让用户采用 “添加节点”及 “连接线段”等的方式将输出图像的区域Dout划分为多个多边形P1，P2，…，Pn，针对每个多边形Pi，采用交互式的仿射变换 （平移、缩放、旋转及斜切变换）获得其对应的输入图像区域Din上的多边形区域Qi，同时其仿射变换矩阵Mi也被记录下来。图3示意了一个图案结构交互式绘制过程的实例，这一绘制结果表示将步骤1中的输入图像映射为步骤6表示的输出图像，其具体操作流程如下：

步骤1 用 “添加节点”及 “连接线段”等方式绘制多边形区域Pi；

步骤2 将图像区域完整地划分为多个多边形区域P1～Pn（图中显示了绘制了3个矩形区域）；

步骤3 对于每个多边形区域Pi，通过交互式的仿射变换，指定其对应的区域Di（图中显示了指定Dout左上角矩形区域对应于Din上的区域）；

步骤4 区域Pi的映射将被显示出来，方便用户观察，用户可对其以拖动、缩放、旋转等方式进行修改；

步骤5 对每个输出图像区域Pi都选定其对应的输入图像区域Di；

步骤6 完成绘制，取消各个多边形边界的显示。

图3 图案结构交互式绘制流程

1.3.3 图像映射

VFPD 系统把输出图像以满屏幕方式显示，因此，输出图像的分辨率即为显示器的分辨率。在用户完成图案结构的绘制后，输出图像上每个像素所在的多边形区域将被计算并记录下来。系统运行时，视频反馈的每一次运算都将按图像映射计算出输出图像上的每个像素的色彩值，计算方式如下：

设输出图像上某像素标号为（m，n），其坐标（x′m，y′m）位于多边形区域Pi内，则其色彩值C（m，n）按如下运算求解：

步骤1 依据Pi内的仿射变换矩阵Mi，通过式 （5）求出其对应的输入图像上的位置（xm，ym）；

步骤2 根据输入图像Iin，通过二次线性插值求得位置（xm，ym）上的色 彩值，即作为（x′m，y′m）上的色彩值C（m，n）。

1.4 使用方法

VFPD 系统具有两个可切换模式——编辑模式和生成模式。在编辑模式中，视频反馈回路停止运转，用户可对图像处理模块及图案生成模块进行设置，也即按1.2节的方法设定函数处理链并以1.3节的方法绘制图案结构。当切换到生成模式时，编辑模式的功能不可用，而视频反馈回路持续运行，用户可在摄像头及显示器之间操作任意日常物品以生成图案。

2 应用示例

2.1 用任意实物以 “可触式交互”方式进行图案创作

VFPD 允许用任意实物实时生成图案，从而能高效地生成大量图案。图4示意了采用各种实物操作技术进行图案创作。对于特定的图像处理序列及图案结构，不同的物品可生成各式图案，生成的图案中始终保持着用户所使用物品的视觉特征。这种以实物创作图案的方式使得用户可以在在短时间内创作大量相同对称形式的图案。这种用实物进行数字艺术创作的特色具有“可触式”［3］创作工具的优点。

图4 运用各种实物进行图案创作

2.2 特定主题的分形图案创作

在图案设计实践中，一个通常的方法就是，设计师在某个特定的主题和构成形式的限定下，创作出大量不同细节特征的图案。

VFPD 的特性恰好适用于上述创作方法，并且其优点就是将这种一般的图案创作方法变得高效。下面展示运用VFPD 进行 “iPod”主题图案创作的实例。创作的基本思路包括：①针对这一主题，在创作过程中都使用iPod实物来进行创作；②为了实现多种不同的图案构成形式，可使用VFPD 提供的图案结构绘制功能，定义多种图案结构；③为了实现不同的视觉风格，可通过定义不同的图像处理功能以及实物交互的技巧来实现。

2.2.1 生成多种对称形式的图案

通过绘制不同的图案结构，并且采用iPod进行创作，生成了多种类型的对称性图案 （如图5所示），它们具有不同的周期性基元及对称组，包括Archimedean tilings 和Laves tilings等经典的对称结构［20］，同时这些图案都具有分形艺术特有的尺度对称性。

图5 生成多样化对称结构的iPod主题图案

由此可见，VFPD 提供的绘制功能，让用户可以任意定义出各种布局形式的图案，在此基础上，利用视频反馈的混沌及分形特性，快速生成演化的、具有分形特征的图案。

2.2.2 生成多种风格图案

对于一种图案结构，可尝试组合不同的图像处理函数链，从而创作出整体结构一致，但细节及风格多样化的图案。图6示意了采用同一个图案结构并且将iPod放置于固定位置，并通过设定不同的图像处理链，从而生成风格多样化的图案。图6从左到右依次采用的图像处理方式为：prewitt滤波＋色彩翻转，动态模糊，色彩变换，形态学腐蚀。

图6 生成结构相同，风格多样化的iPod主题图案

3 局限性及未来方向

目前VFPD 的局限性在于：①图案结构的绘制功能比较有限；②由于视频反馈的混沌特性，难以精确控制图案的细节。

在后续的研究中，将对VFPD 做进一步扩展，包括：①设计更自由且易用的图案结构绘制方式，让该系统可以用于渲染更复杂结构的图案；②研究针对图案细节的控制方法，让用户既能定义图案的总体结构，又能对图案的细节加以操控；③针对普通大众的日常娱乐消遣等用途，将本文的系统以软件模拟的方式实现，这种纯软件方式可以在一些特定的场合获得更加方便的应用，例如数码相机内的图像处理软件、手机图像处理应用软件等，但是其缺点就是，用户无法获得用实物进行即兴发挥的创作体验和探索乐趣。

4 结束语

本研究拓展了以往关于视频反馈的研究，将视频反馈分形特效运用到了计算机辅助图案设计领域，让用户以“可触式交互”的方式快速地生成特定主题的分形图案。该技术可开发为完整的图案创作环境，也可以作为插件融合到当前常用的图案图形编辑系统中，还可以开发为独立运行的类似于 “万花筒”的面向儿童的互动娱乐应用。可以预期，将视频反馈运用到非真实感绘制、生成艺术和数字绘画等领域，也将产生独特的新应用。

［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）. ［陈莉，叶介茂.基于初等函数的针织图案自动设计 ［J］.天津工业大学学报，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］.纺织学报，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）. ［冯玲.遗传算法在分形图案自动化设计中的应用 ［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）.［罗戎蕾，洪潘.基于数学方法的流行几何图案设计 ［J］.纺织学报，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）.［陈莉，叶介茂.基于函数Z＝axc＋byd的图案生成与针织产品设计 ［J］.纺织学报，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.