摘要:
本文通过粒子系统及三维粒子透视投影变换,运用Flash AS2及其开发环境,实现了基本的三维粒子系统。并结合相关的曲线及运动方式,实现了抛体运动,Fermat 螺线上升运动以及龙卷风效果。表现了一定的数字艺术层的美感。
关键词: 粒子系统,三维,数字艺术
1前言:
三维粒子系统是一类令人感到激动又十分有趣的动画程序。它的实现方式主要需要用基于粒子系统构建的图形学,动力学以及数字艺术等多方面的知识。[1]介绍了基本的三维视图通过透视投影变换到二维场景的方式。[2]介绍了一个基本的粒子系统的实现。在这两篇文章的基础上,再结合比较简单的运动学方面的知识,在本文中实现了基本的三维粒子系统,并实现了抛体运动,Fermat 螺线上升运动以及龙卷风效果。这些作品表现了一定的数字艺术层的美感。
另外,开发选用的是基于AS2语言的Flash开发平台,这种开发模式具有以下优点:
1) Flash 播放器具有极高的普及率,而且swf文件格式是跨平台的。
2) Flash 的失量图形处理模式极强,适合网络传播图像,动画及各类互动效果。
3) Flash 平台下的交互动画开发方便,采用了AS2语言可以面向对象的模式来组织程序结构。交互效果可以实现的非常到位。可以说,是一种面像图形开发的脚本语言。(正如Matlab可以说是面向科学工程计算的脚本语言一样。)
当然,这种模式也是有缺点的,比如Flash播放器在处理一些较大运算时的效果不是很
理想。
由于这个程序重点在实现相应的图形效果上,主要是测试之用,所以采用Flash 的 AS2
来进行是非常合适的。
2程序总体思路及关键部分:
2.1粒子系统的框架:
[2]中已有叙述,这里简要回顾之:
Initialization
while(runFlag)
{
For all particles
{
If(current particle is not lived)
{
Init this particle.
}
Else if(current particle is out of the showing area)
{
Current particle set to dead.
}
}
} 2.2三维粒子在二维场景的透视成像:
[1]中已有详述,这里简要回顾之:
对于一个在三维场景中的点p(x ,y ,z)
其在距离原点距离为d处的位于z轴正半轴上的点(0,0,d)而言,其对应到二维投影面的点p’ (x’,y’)有如下计算公式:
x’=x/(-z/d+1)
y’=y/(-z/d+1)
图1
2.3.1抛体运动模式关键:
抛体运动在这里的右手坐标系(图1)中,是指以y为竖直运方向作上抛运动,x , z方向以固定速度运动的方式。我们在公园里看到的许多喷泉就是这样的例子。
由于初始化后所有粒子统一生成,所以要看到类似喷泉的效果,需要待几个粒子生成周期之后,生成粒子与死亡粒子可以持续交替时,便会呈现出不错的效果。图2展示了300粒子在程序运行过几个粒子生成周期后的效果。
相应初始程序、参数及运动函数如下:
//data set
tmp=Math.random(); _root.particleArr[i].initV_A((2+random(3))*Math.cos(2*Math.PI*tmp),15+random(10),(2+random(3))*Math.sin(2*Math.PI*tmp),0,-0.5+0.15*Math.random(),0);
_root.particleArr[i].initPos(gX0-10+random(20),gY0-50+random(150),gZ0-10+random(20));
//motion effect mode
for(var i:Number=0;i<_root.gParticleNum;i++)
{
if(_root.particleArr[i].isLived())
{
_root.particleArr[i].moveCal();
_root.particleArr[i].moveShow();
}
} 图2
2.3.2Fermat 螺线上升运动:
Fermat螺线的极坐标表达为:
ρ=a*θ ^(1/2)
这里要做的,就是将θ角在某粒子与xz平面垂直的截平面上对应的Fermat螺线极坐标转换成x及z坐标值。再进行相应的更新即可。与前一种不同的是,这里只有y轴方向需要用到vy,而x,z轴的位置则由于采用了坐标控制模式,所以不需要使用vx,vz。为了整体程序设计上的统一,可将vx,vz设定为0。
与上一个抛物线型运动不同,这里的Fermat螺线运动如果新生粒子与死亡粒子构成了持续生成关系时,将使画面较为混乱。因此,需要将粒子的初始y值及vy,ay设定的靠近些。
可以看到,团状的粒子簇旋转上升后又扩散下降,无序之中体现着一丝韵律,我将这样的效果命名为“银河落九天”,不知诸位为以为如何?(参图3)
//data set
tmp=Math.random();
_root.particleArr[i].initV_A(0,18+random(2),0,0,-0.5+0.1*Math.random(),0);
_root.particleArr[i].initRotateEle(0,0,2*Math.PI*i/_root.gParticleNum);
_root.particleArr[i].initPos(gX0-15+random(30),gY0-5+random(10),gZ0-15+random(30));
_root.particleArr[i].fermatSpiralA=15+random(10);
//motion effect mode
for(var i:Number=0;i<_root.gParticleNum;i++)
{
if(_root.particleArr[i].isLived())
{
_root.particleArr[i].accTheta(Math.PI/18);
_root.particleArr[i].moveCalFermatSpiralWithY();
_root.particleArr[i].moveShow();
}
} 图3
2.3.3龙卷风效果:
龙卷风效果,这里没有采用从坐标原点生成的模式,而是直接摸拟了生成后运动的效果,难度降低了不小。
可以这样近似看待龙卷风的模拟,每个粒子都以y轴为中心,以不同的运动半径作圆周运动。各粒子的运动半径从下往上递增。
以上面的设计理念,便可生成一种倒锥型的龙卷风,如图4。显然,在这种模式中,没有粒子会死亡。
//data set
_root.particleArr[i].initV_A((0.5*Math.random())*Math.cos(2*Math.PI*tmp),0,(0.5*Math.random())*Math.sin(2*Math.PI*tmp),0,0,0);
_root.particleArr[i].initRotateEle(0,0,2*Math.PI*Math.random());
_root.particleArr[i].initPos(gX0+(i+1)*2-2+random(4),gY0+50-baconHeight/_root.gParticleNum*i-random(50),gZ0+(i+1)*2-2+random(4));
baconHeight=400
//motion effect mode
for(var i:Number=0;i<_root.gParticleNum;i++)
{
if(_root.particleArr[i].isLived())
{
_root.particleArr[i].accTheta(Math.PI/18);
_root.particleArr[i].moveWithY();
_root.particleArr[i].moveShow();
}
} 图4
如果再对粒子生成加以改进,即位于龙卷风高度的75%以下的部分主要生成一个类似柱状的效果,而对于龙卷风高度的75%以上部分则扩散出去,形成一个更为逼真的效果。(如图5)
1控制生成高度及速度:
if(i<0.7*_root.gParticleNum)
{
_root.particleArr[i].initV_A((5*Math.random())*Math.cos(2*Math.PI*tmp),0,(5*Math.random())*Math.sin(2*Math.PI*tmp),0,0,0);
_root.particleArr[i].initPos(gX0-50+random(100),gY0+50-baconHeight/_root.gParticleNum*i-random(50),gZ0-50+random(100));
}
else
{ _root.particleArr[i].initV_A((5*Math.random())*Math.cos(2*Math.PI*tmp),0,(5*Math.random())*Math.sin(2*Math.PI*tmp),0,0,0);
if(random(100)<50)_root.particleArr[i].initPos(gX0+100+random(100),gY0+25-baconHeight/_root.gParticleNum*i-random(25),gZ0+100+random(100));
else _root.particleArr[i].initPos(gX0-100-random(100),gY0+25-baconHeight/_root.gParticleNum*i-random(25),gZ0-100-random(100));
} 2保持上下不同的旋转速度:
if(i<0.7*_root.particleNum)
_root.particleArr[i].accTheta(Math.PI/24+0.05*Math.random());
else
_root.particleArr[i].accTheta(Math.PI/18+0.1*Math.random()); 图5(1000粒)
3关键代码:
3.1粒子类
import E3DPack.*;
import SColDet.*;
import SMotion.*;
class E3DPack.E3DPhyNode extends E3DNode
{
//--location properties extends.--
/*
public var x:Number;
public var y:Number;
public var z:Number;
*/
public var bufferX:Number=0;//for the clear,re-draw mode here.
public var bufferY:Number=0;
public var bufferZ:Number=0;
//--dynamic properties--
public var m:Number=0;//mass
public var g:Number=0;//gravity&nbs