【融入动画技术的交互应用】——PlayWithThePicture

目录

整体思路

模块介绍

ColorPie

Flow

PaperCut

相关技术及知识

多段路径跟随

粒子系统

总结与展望

参考链接


PlayWithThePicture基于图画,它主要有两个功能:图画剪纸(PaperCut)和流动模拟(Flow),这两个功能之间没有什么太多的相关性,因为这算是两条思路,是很久之前的想法,利用这学期互动媒体技术课程上学到的知识来初步实现。

整体思路

PaperCut的想法来自前段时间看过的一篇论文《Unfolding the Earth: Myriahedral Projections》,我们都知道在计算机上所有的图形图像都是二维的,即使是那些有立体感觉的图像也都是二维的投影,而在数字可视化中我们常常需要在二维平面上展示地球表面,因此有许多的科学家研究了很多种地球投影方法,如:墨卡托投影(正轴等角圆柱投影)、高斯-克吕格投影、斜轴等面积方位投影等等,但这些方法没有一个能使地球表面不变形,而论文《Unfolding the Earth: Myriahedral Projections》中提出一种很有趣的展开地图的同时又能让地球表面不变形的方法:把地图剪开然后铺在平面上。

Flow是想要让画运动起来,之前看过有通过视错觉,视频特效剪辑以及程序让画动起来(请参考链接2,3,4),所以这次尝试用processing让梵高的《星空》动起来。

 

功能模块介绍

ColorPie

绘画和可视化是一对孪生兄弟,绘画作为艺术表示形式的一种,以二维颜色为载体,抒发艺术家的情感。ColorPie实时展示鼠标附近图像的色彩比例,可以帮助用户更好了解图画。

 

Flow

鼠标与图像的交互赋予了其生命力,犹如上帝之手,掠过之处满是生机。

 

 

PaperCut

上面提及的论文中提出手工剪纸将地图展开至平面的方法,而PlayWithThePicture用程序来实现这种剪纸效果,在经过多次尝试后,下面两种比较接近想象中的剪纸风格。

这种的剪纸剪切处比较工整,当不断改变剪切线的斜率时,可以实现纸条随风而动的效果。而另一种剪切方式是以拼图的方式,就相当于将图画剪碎,然后一个个拼起来,相比较第一种没有那么工整,更像剪开的布条。

 

 

相关技术及知识

本应用中主要参考了书本《代码本色》中第一、四、六章的内容,如上图所示,各个功能实现的知识背景相互交叉但又不完全重合,因此在这里重点介绍一下第六章自治智能体章节的路径跟随和第四章的粒子系统。

自治智能体

自治智能体指的是那些根据自身意愿做出行为决定的主体,它们不受任何领导者的影响。                                     --《代码本色》

自制智能体相当于大自然中的一个个体,它可以从一定范围内的外界环境获取特定的信息,然后计算相应的行为,自治智能体可以用来模拟小车运动,流场以及集群行动。

多路径跟随

在PaperCut和Flow模块中均有用到路径跟随,Paper中用最简单的路径跟随来计算某一小块剪纸的运动位置以及颜色,而在Flow当中用到了多路径跟随,第一步是用积分思想将鼠标滑过的曲线细分成多个线段,然后将路径记录下来,粒子就按照这个轨迹运动,粒子每到一个地方,就会计算粒子与路径的法线交点,然后粒子将沿着向着法线交点方向前进。

                                 图1.法线交点的选择

粒子系统

粒子系统在各种电子游戏,动画、数码艺术作品中应用很多,粒子系统适合对复数系统进行建模,可以实现如火焰、雪花、云,河流等多种特效,在很多图形工具如processing,Unity,blender等都可以实现粒子系统。在Flow和PaperCut模块中每一个粒子都有位置,速度,加速度,颜色等属性,能根据外部的力计算速度,更新位置,每个粒子都有生命周期,在一些粒子死亡的同时会有新的粒子产生。

总结与分析

PlayWithThePicture基本上实现了我最初的想法,由于它的两个功能模块分别来自两个想法,所以模块之间的嵌合度不是很高,这也是接下来可以继续完善的地方,总体上说,PlayWithThePicture具有以下优缺点:

优点:

1.用户能够让图画中的点“动”起来,而且能够自由绘制路径,指定任意方向,当想要使图像上某个区域按照某种方式动起来的效果时就可以轻松实现。

2.比较接近地实现剪纸风格的效果,为接下来实现将真实三维物体剪切展开到平面奠定基础。

3.第二种剪纸风格的实现中用到perlin噪声,因此每次最终生成的图案都不一样,可用制作以某一幅画为主题的纹理。

4.可以实时获取图像区域块的颜色,并将其用饼状图的形式可视化呈现。

5.PlayWithThePicture给用户提供保存功能,当用户在“玩”系统,实现了自己想要的效果时,可以及时保存为GIF图片。

缺点:

1.图画剪纸仅仅实现二维图像的剪切展开,并没有实现论文中提到的将三维表面展开。

2.交互方式局限于鼠标点击和键盘,在Flow模块中用手势或者声音交互体验感更好。

3.在PaperCut模块中,粒子更新绘制计算有点慢,用户有时无法进行流畅操作。

进行上述分析后,再次萌发了进一步完善的想法,果然完善之路是没有尽头的........

 

参考文献

【1】Nature of Code:Chapter 4 paricle sysytem

【2】Unfolding the Earth: Myriahedral Projections

【3】让梵高的星空动起来!这个视错觉是怎么做到的?

【4】如果把梵高的星空变成动态的

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值