Kitty: Sketching Dynamic and Interactive Illustrations

发布于 作者:

本文是来自CHI2014的一篇论文。CHI是人机交互领域Human-Computer Interaction (HCI)的顶级会议。作者是法国自动化研究所INRIA的Fanny Chevalier等人。

开门见山地说，Kitty是一个制作交互式插图(interactive illustration)的软件。

简介

传统上，制作交互式插图或者动态图，需要通过脚本控制图元的运动，比如flash和ActionScript。为了减轻这些必备的编程技能，研究人员和从业人员开发了一些着名的工具，用于创作交互式插图，依赖于拖放交互[18]，草图[14]或可视化编程[24]等技术（Victor, B. (2009). Drawing Dynamic Visualizations.CUSE）。虽然功能强大，但这些工具通常适用于特殊用途的应用（例如模拟血流 Zhu, B., Iwata, M., Haraguchi, R., Ashihara, T., Umetani, N., Igarashi, T., & Nakazawa, K. (2011).Sketch-based dynamic illustration of fluid systems.ACM Trans. on Graphics, 30(6), 134.）。

Kitty是一个基于sketch（手绘草图）的工具，它是第一个支持直接操作图元之间的动态关系的系统。为了指定实体的交互行为，Kitty依赖于底层关系图结构，其中节点对应于实体，边表示实体参数之间的对应关系。Kitty在插图的上下文中显示此图形，作者可以通过自由形式草图指定边缘及其相关功能。这使得能够进行直观的交互，而无需任何编程或脚本。

background

为了理解Kitty是怎么做的，需要先了解visual thinking process。Roam在他有影响力的作品《The Back of the Napkin 》将视觉思维过程分解为six W’s :

  • Object Who and What
  • Quantity How many and how much
  • Position in Space Where
  •  Position in Time When
  • Relations How
  • Interpretation Why

关键在于人们在观察事物的时候，不仅会看到who, how many, where, when，还会观察how and why。换句话说，当特定事件发生并触发链式效应时，人们推断出功能关系和一件事物对另一件事物的影响，从而产生关于因果模式的新知识。这就意味着，制作动态图，不仅要有who, how many, where, when，其可视图元的动作行为也要符合因果规律。理解这一点有益于制作动态图本身。

Kitty是基于作者上一篇文章提到的Draco系统之上制作的。Draco提供了名为动态纹理的技术，可以编码实体集合及他们的运动模式。Draco 提供两种动态纹理: emitting textures and oscillating textures (Figure 3).

（a）Emitting texture (发射纹理)：物体从发射器发出，并遵循由底层运动矢量场引导的全局运动轨迹。
（b）Oscillating texture (摆动纹理)：由初始刷骨架和目标振荡骨架之间的振荡运动来定义。摆动纹理还可以具有纹理轮廓和蒙版。

粒子运动也可以应用于集合的各个对象：平移定义了单个对象在其中移动的二维路径（上图a），旋转定义了对象旋转的枢轴点和路径（上图b）。其实在3D渲染中也有类似的方法，称之为粒子效果。

但是Draco的动态纹理只是满足视觉思维过程的一个子集，不提供交互性。
在这个基础上，论文作者开发了Kitty，提供一个开放框架，提供的功能包括

  • 作为场景中视觉实体的对象和集合 (What and How Much，对象指的是物体和Draco动态纹理)，
  • 定义这些实体的视觉属性的参数 (Where, When, and How Much, 包括平移、旋转、缩放、透明度变化等，以及动态纹理的参数)
  • 定义实体之间功能关系的关系图 (How and Why，这个是重点，后文详细讲述)
  • 动态插图中元素的互动性 (How and Why，视觉实体可以将其参数之一分配给输入控件以启动交互)

定义实体之间作用关系的节点链接图

节点指代视觉实体对象和动态纹理。图4具有五个节点，对应于两个对象（绿色），两个发射纹理（蓝色）和一个振荡纹理（橙色）。每个节点都有一组相关的参数，可用于创建与其他节点的功能依赖关系。

边定义源节点和目标节点的参数之间的函数关系。每个边都是有向的，并且具有相关的功能的映射函数，其编码从目标节点的特定参数到源节点的特定参数的依赖行为。例如，在图4中，蒸汽强度（发射频率参数）是旋钮旋转的函数（全局旋转参数）：旋钮旋转得越多，发射频率就越高。

源参数到目标参数的依赖关系，可以用以下一维函数定义：

tp = f(sp)

其中，tp和Sp代表目标实体和源实体的参数值。


如图5所示。将鸡蛋放入锅中会导致汤水飞溅。该关系涉及蛋的位置作为源参数sp，并且汤的发射频率作为目标参数tp。相关的映射函数f使得当蛋撞击水面时发射频率最高。

链式关系：

可以按顺序组合多个节点链接关系，从而构成一组连续传递的参数。
例如图6中，旋转旋钮影响火焰的振动参数（振荡纹理），其反过来影响蒸汽的发射频率（发射纹理）。由此产生的链条效应使得当旋转旋钮时，火焰的强度增加，这导致来自锅的更强蒸汽。

Kitty的具体实现：一个java程序


（a）主界面

（b）全局工具栏，主要有如下功能：

  • 墨水工具
  • 默认画笔
  • 套索画笔
  • 选则工具
  • 铅笔和擦子
  • 创建发射纹理
  • 创建振动纹理
  • 选择视觉对象

（c）上下文工具栏：选中视觉对象时显示，内容跟全局工具栏差不太多。主要用来设置动态效果。

Kitty的具体使用过程

1）绘制动态图

  • 先画一个视觉对象。
  • 然后用对象套索工具，将这个视觉对象定义为新的可操作性对象。
  • 接着定义转轴点（图8c红色处）
  • 最后用户将这个可操作对象直接连续地转动，就会生成一个旋转的动态效果。
    制作动态纹理的方式则与Draco差不多。

要定义视觉对象的关联关系，需要进入graph mode。


Graph mode 会生成一个节点链接图，每个节点自动地与视觉对象相互关联。
创建实体间的关系遵循三个步骤：

  • 选择源节点和目标节点。要连接图形中的两个节点，艺术家只需绘制从源节点到目标节点的连线。
  • 选择参数。Kitty在径向菜单中显示源节点和目标节点的所有候选参数。艺术家在一条链接中可以做一组参数的一对一映射。如图9（c）所示。
  • 指定函数映射。默认情况下，此函数设置为identity（tp = sp），艺术家可以通过直接在窗口小部件中绘制新曲线来覆盖（图9d）。Kitty还允许艺术家从外部定量数据文件（csv格式）加载映射函数，从而实现视觉实体之间的精确功能关系。

2）制作交互图

为了制作interactive illustration, 用户需要切换到presentation mode.
当用户使用鼠标或手写笔悬停在交互式视觉实体上时，或者当用户使用直接触摸时点击屏幕时，Kitty会显示红色视觉提示。这些指南指出了可能的交互式手势（图11）。对于空间参数（例如旋转和平移），使用预期的直接操纵，例如直接旋转风车（图11a）。对于其他参数，例如发射频率，朝向和远离实体的滑动手势将分别减小和增加参数值。图11b示出了增加风力发射速度的示例

Kitty的优势和局限性

优势：

用户评估表明用户只需很短的培训时间即可快速掌握Kitty系统的概念并编写自己的插图。

局限性：

1.Kitty不支持视觉实体组的定义。物体和动态纹理是Kitty系统的原子组成部分，不能分组。如果可以分组，那么将允许更丰富的动画表达，具体的说至少包括如下好处：

  • 将视觉实体分组为层级对象将允许多个动画元素的协调移动，这些元素一起形成一些更高级别的对象。
  • 对对象或关系进行分组还允许作者在单个交互中将公共参数应用于一组可视实体，这样可以加速绘图过程。
  • 如果他们能够跨关系复制相同的映射函数，那将会很有帮助。
  • 烟雾发射纹理跟随汽车的全局运动。

2.Kitty不支持复杂的物理效果。如对象之间的基于牛顿力学的相互作用，这将便于创建动态的复杂场景。已经有一些游戏引擎支持将物理效果实现在2D游戏中，不过这些游戏引擎易用性欠佳。将来，探索基于草图和物理效果的动画将会是一个有趣的研究点。

3.可扩展性问题。 Kitty系统本身支持的节点数量是有上限的，具体的说受到屏幕大小的限制。不仅如此，当节点和边缘数量增加，图形会复杂到人无力去处理。（根据一些交互方面的理论，人最多能同时掌握7-11组关系。所以复杂的视图人所难以处理的。也意味着用kitty也做不了动画时间长、对象过多的内容。）一个可能部分解决此问题的方案是——将复杂（时空）视觉内容分解为更易于操作的子组件的传统方式（回到了问题1）。