roadProgram的专栏

一个程序员的路

转 第十二章 粒子引力与万有引力(as3.0)

很高兴到晋级到了这一章。  前面的章节总体来说都是些交互的运动。先让物体运动起来,
再让物体与环境产生交互,随后与用户交互,最后是物体之间的交互。本章将详细地为大家
介绍物体之间的交互,并带有一定距离的。说具体些,我们将学习粒子,重力(与前面有些
不同),弹性运动(还是它!)以及大名鼎鼎的 Node Garden。让我们开始吧!

粒子(Particles)
      说明一下我们所指的粒子是什么意思。出于本章的目的,粒子只就是一个独立的单位,
通常会伴有着几个(或多个)同样的单位。一个粒子可以说是一颗灰尘,一个沙滩球,或是
一个星球。
      粒子都具有共同的行为,也可以有它们各子独立的行为。OOP 的程序设计员们通常把
它们看成与对象相似的东西。      某个类的所有对象都具有相同的行为,它们是由这个类定义的,
而构造出的实例由于被赋予了不同的属性值,       从而变得有所差异。我们已经在例子中看过许
多 Ball 类的这样的实例。每个对象都有自己的属性:速度,质量,大小,颜色等等,但是
所有的小球都以相同的规则运动。
      在 Ball 类中,包涵了我们所需要的所有的功能。同样,粒子的实例也只是用来保存属
性的。   文档类只负责移动粒子及处理它们之间的交互。    另一种方法是把行为代码放到粒子类
中,这样每个粒子对象都会有它们自己的 enterFrame 函数或定时动画,它们将自行负责运
动或处理交互运动。执行处理函数时,它们都会有各自的加减运算。本书的例子程序,都将
运动和交互放在了文档类中,为的是看起来简单一些。
      程序总体来说与前面例子相同,     变化的部分都在两个粒子间的交互和引力上, 这些代码
都写在 onEnterFrame 方法中出现。程序中我们要创建多个粒子并随机放置到屏幕上,代码
如下:
package {
  import flash.display.Sprite;
  import flash.events.Event;
  public class ClassName extends Sprite {
   private var particles:Array;
   private var numParticles:uint = 30;
   public function ClassName() {
     init();
   }
private function init():void {
  particles = new Array();
  for (var i:uint = 0; i < numParticles; i++) {
    var particle:Ball = new Ball(5);
    particle.x = Math.random() * stage.stageWidth;
    particle.y = Math.random() * stage.stageHeight;
    particle.mass = 1;
    addChild(particle);
    particles.push(particle);
  }
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
    }
  }
}
    这里,每个粒子初始的半径都是 5 设置,质量均为 1。稍后通过改变这些值我们可以
看到不同的效果,当然还可以给粒子随机的速度和大小。
    本章的程序都是假设这些基本的设置已经完成,因为我们主要是来介绍 onEnterFrame
函数及其所需的方法。下面,先来介绍一些基本的理论,刚才创建的这个文件先不要关,因
为马上还要用到。

 

重力
     第一种粒子引力,就是重力。大家可能会说“这不是又回到的第二部分了吗?”是的,
但那是最常见的引力形式。
     站在地球上,引力的定义很简单:将物体向下牵引。实事上,向下的牵引力有着一种特
殊的速率。 它所施加在物体上的加速度等于 32 英尺每秒。从加速度的角度来讲就是某一时
刻内累加了多少速度。重力让物体运动 32 英尺,并且每秒都向下拉。但是,我们可以到最
高的山上, 或者最低的峡谷,这些对于 32 这个数字所产生的细微的变化是不足以让人们觉
察到的(除非使用精密的仪器) 。

万有引力
     我们知道,距离某个星球或某个巨大的天体越远,那么所受的引力就越小。对我们来说
这是件好事。如不然的话,我们会被吸到太阳里面,而太阳也许还会被吸到其它太阳或星球
中进去,所有的一切很快就灰飞烟灭了。我们把星球看作是粒子,粒子间的距离对于引力的
大小起决定性的作用。距离对于引力的影响很简单:引力与距离的平方成反比。需要解释一
下。首先, 引力也与质量联系紧密。物体质量越大,那么该物体对于其它物体的引力就越大,
那么它所受到其它物体的反作用力就越大。这就是所谓的万有引力常数(简写 G)   。引力方
程如下:

    force = G * m1 * m2 / distance2
    简单来说,  其它物体对该个物体的引力等于万有引力常数乘以二者的质量,再除以它们
之间距离的平方。呃… … 看上去很简单,只需要知道引力常数,就 OK 了。下面是正式
的定义:
    G = (6.6742 ± 0.0010) * 10-11 * m3 * kg-1 * s-2
    如果您想用 ActionScript 来计算结果的话,可以试一下。就我个人而言,当我看到这
样的公式,立刻就想到要伪造这些数字。我的引力公式如下:
    force = m1 * m2 / distance2

       是的,就是这样,忽略 G。如果要用 Flash 为 NASA [国家航空局] 作飞船导航系统的
话,就要把 G 算进去。但是如果我们是做宇宙大战游戏的话,那么就应该舍弃它。
       现在,公式已经有了,来写代码吧。首先设置 onEnterFrame 函数,而它又要调用
gravitate 函数,所以要把负责引力的代码分离出来:
private function onEnterFrame(event:Event):void {
  for (var i:uint = 0; i < numParticles; i++) {
    var particle:Ball = particles[i];
    particle.x += particle.vx;
    particle.y += particle.vy;
  }
  for (i=0; i < numParticles - 1; i++) {
    var partA:Ball = particles[i];
    for (var j:uint = i + 1; j < numParticles; j++) {
      var partB:Ball = particles[j];
      gravitate(partA, partB);
    }
  }
}

      开始用一个单独的循环让粒子运动,然后做一个双重循环执行交互。获得 partA 和
partB 后就将这两个粒子对象传给 gravitate 函数:
private function gravitate(partA:Ball, partB:Ball):void {
  var dx:Number = partB.x - partA.x;
  var dy:Number = partB.y - partA.y;
  var distSQ:Number = dx * dx + dy * dy;
  var dist:Number = Math.sqrt(distSQ);
  var force:Number = partA.mass * partB.mass / distSQ;
  var ax:Number = force * dx / dist;
  var ay:Number = force * dy / dist;
  partA.vx += ax / partA.mass;
  partA.vy += ay / partA.mass;
  partB.vx -= ax / partB.mass;
  partB.vy -= ay / partB.mass;
}
      首先,找出两个粒子间的 dx 和 dy 以及总距离。记住这个公式—— F = G * m1 * m2 /
distance2 — — 其 中 包 括 有 距 离 的 平 方 。 在 计 算 距 离 时 , 我 们 通 常 直 接 写 成 dist =
Math.sqrt(dx*dx + dy*dy)。但是在求距离的平方时,还要为这个平方根求平方!两倍的工作
量。如果用变量 distSQ 在开平方前保存 dx*dx + dy*dy,就节省了一部分计算。
      接下来,用总的引力乘以质量再除以距离的平方。就求出了 x,y 轴上总的加速度。然
后,使用第九章最后讨论的那个简洁的计算方法,用 dx / dist 取代 Math.cos(angle),用 dy
/ dist 取代 Math.sin(angle)。这样一来,就无需再使用 Math.atan2(dy, dx) 求出角度了。
    下面,我们继续讨论总引力和总加速度的问题。这是于两个物体间的引力构成的。根据
物体的质量,需要把它们分解为两个部分。想一想地球和太阳,两者之间存在着一种特殊的
引力,是由质量除以距离的平方产生的。地球与太阳在总引力的作用力下相互吸引。地球被
太阳吸引,而太阳反过来又被地球吸引。很明显,地球所获的加速度更多,因为它的质量比
太阳小。所以,在系统中每个物体都有单独的加速度,用总加速度除以物体的质量。因此,
就有了最后四行公式。注意 partA 的加速度是增加的,而partB 则是减少的。这要取决于 dx
和 dy 相减的顺序。
    最终的代码可在 Gravity.as 中找到。测试一下,可以看到开始时粒子是不动的,然后
慢慢地开始相互吸引。

 

    这种超速运动是 bug 吗?并不是代码的 bug。这其实正是期望的效果,这就是所谓的
弹弓效应。这是 NASA 用来发射探测器到外太空的方法。当一个物体与某个星球越来越近
时,它所受的加速度会越来越大,物体的运动速度也会非常之快。如果当物体与某个星球非
常接近时,该物体会受到这个星球的引力作用,被吸引过去。而这些速度是零燃料的——因
此它功不可没。
    回到 Flash。两个物体间的距离非常小时会发生什么——在几乎零距离的情况下。这时,
两个物体间的引力变得非常大,几乎是无穷大。因此,计算的结果是正确,但是从模拟的观
点来看,这并不真实。应该在物体足够接近时产生碰撞。如果我们计划让太空探测器直接落
到某个星球上,那么它的速度就不能是无穷大了,这样的话可能会撞出一个弹坑。

碰撞检测及反作用
       对粒子而言,需要进行碰撞判断以及产生反作用力。到底让碰撞后发生什么事情,取决
于我们自己,可以让粒子爆炸后消失,也可以让一个粒子消失,并把它的质量加到另一个粒
子上面,就像两个粒子溶合到了一起。
       例如,前一章在 checkCollision 函数中,讲到的碰撞及反作用力。下面把它插入进来,
内容如下:
function onEnterFrame(event:Event):void {
  for (var i:uint = 0; i < numParticles; i++) {
    var particle:Ball = particles[i];
    particle.x += particle.vx;
    particle.y += particle.vy;
  }
  for (i=0; i < numParticles - 1; i++) {
    var partA:Ball = particles[i];
    for (var j:uint = i + 1; j < numParticles; j++) {
      var partB:Ball = particles[j];
      checkCollision(partA, partB);
      gravitate(partA, partB);
    }
  }
}
      粗体部分是新加入的。同时要把 checkCollision 及 rotate 函数复制粘贴到了这个文件
中。 (不要忘记导入 flash.geom.Point 函数,因为这些函数中需要使用它) ,全部代码请见
GravityBounce.as。
      我们看到粒子间相互吸引,在产生碰撞后反弹。试改变粒子的质量(mass),观察不同的
引力效果。如果给粒子一个负质量,就可以看到它们彼此互斥。
      在 GravityRandom.as,文件中,我坚持让代码不会有太大的变化,只是在 init 方法中
多加入了一行语句,并在两个地方做了一下改变:
private function init():void {
  particles = new Array();
  for (var i:uint = 0; i < numParticles; i++) {
    var size:Number = Math.random() * 25 + 5;
    var particle:Ball = new Ball(size);
    particle.x = Math.random() * stage.stageWidth;
    particle.y = Math.random() * stage.stageHeight;
    particle.mass = size;
    addChild(particle);
    particles.push(particle);
  }
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
      这里我们给每个粒子一个随机的大小并且根据物体的大小给出质量,如图 12-2 所示。
课题开始变得越来越有趣了。
轨道运动
    最后看一个现实中的例子,我们来创建一个简单的行星系统,有太阳和地球。创建一个
质量为 10,000 的太阳和一个质量为 1 的行星。接下来,让行星移开太阳一段距离,并给
它一个垂直于太阳的速度。
如果给出的质量,距离与速度都非常合适,那么就能让行星进入轨道。见文档类

Orbit.as。 需要解释一下 init 中的代码,还有一点变化就是将 numParticles 变量设为 2。
private function init():void {
  particles = new Array();
  var sun:Ball = new Ball(100, 0xffff00);
  sun.x = stage.stageWidth / 2;
  sun.y = stage.stageHeight / 2;
  sun.mass = 10000;
  addChild(sun);
  particles.push(sun);
  var planet:Ball = new Ball(10, 0x00ff00);
  planet.x = stage.stageWidth / 2 + 200;
  planet.y = stage.stageHeight / 2;
  planet.vy = 7;
  planet.mass = 1;
  addChild(planet);
  particles.push(planet);
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

 

引力 VS 弹性
    对比一下引力与弹性,我们发现它们非常相似,或者说它们是皆然相反的。因为,它们
都是用物体间的加速度,将两个物体牵在一起的。但是,在引力效果中,物体间的距离越远,
则加速度越小。在弹性效果中,则是距离越大,加速度越大。
    如果将前一个例子中的引力代码换成弹性代码的话, 产生的效果就没那么有趣了,因为
粒子最终会聚集在一起,因为弹性运动不能容忍距离。如果引力的座右铭是 “眼不见为净”,
那么弹性运动的信条就是“距离产生美”。
    因此现在就陷入了一个进退两难的局面。我们想让粒子以弹性的形式相互吸引, 还想让
弹性能够容忍距离,不让粒子都牵连在一起。那么我的解决办法就是,设置一个最短距离的
变量。严格来讲,这更像是最大距离,因为它表示能够产生交互的最大距离。但时我大脑总
认为最短距离是正确的,是因为粒子间至少要达到这个距离才会产生交互。 如果它们彼此距
离很远,则忽略不计。

弹性节点花园
     让我们来动手搭建自己的弹性节点花园吧。为了与本书的上一版相同,我将影片的背景
色改为黑色,让粒子为白色。看起来不如用渐变填充代码或嵌入外部图像效果好,不过,这
些是我们今后肯定要做的。将来我将给大家一下有趣的图形材料。
     可在 NodeGarden.as 中找到代码,让我们一步步来。首先,设置一些变量:粒子的数
目,刚刚提到的最短距离,以及弹性(spring)。
var numParticles:uint = 30;
var minDist:Number = 100;
var springAmount:Number = .001;
     第八章的弹性运动示例中,我们设置的弹性值为 0.2 左右。这里我们使用的值要更小
些,因为有很多的粒子会产生交互运动。如果给的值过大,则会使速度过快。然而,如果给
的值太小,粒子就会在屏幕上慢条斯理地运动,就像是没有觉察到其它节点一样。
     接下来进行初始化:
private function init():void {
  particles = new Array();
  for (var i:uint = 0; i < numParticles; i++) {
   var particle:Ball = new Ball(5, 0xffffff);
   particle.x = Math.random() * stage.stageWidth;
   particle.y = Math.random() * stage.stageHeight;
   particle.vx = Math.random() * 6 - 3;
   particle.vy = Math.random() * 6 - 3;
   addChild(particle);
   particles.push(particle);
  }
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
    创建一些粒子,放在舞台上,给予它们随机的速度。注意,这里没有给出物体的质量
(mass)。稍后,在“带有质量的节点”一节,会给大家演示加入质量的例子。
    再下面,就是 onEnterFrame 方法:
private function onEnterFrame(event:Event):void {
    创建一些粒子,放在舞台上,给予它们随机的速度。注意,这里没有给出物体的质量
(mass)。稍后,在“带有质量的节点”一节,会给大家演示加入质量的例子。
    再下面,就是 onEnterFrame 方法:
private function onEnterFrame(event:Event):void {
     很熟悉了吧。以前讲过这个例子,只是在屏幕环绕的代码中 spring 了函数。最后是本
程序的主干 spring 函数如下:
private function spring(partA:Ball, partB:Ball):void {
  var dx:Number = partB.x - partA.x;
  var dy:Number = partB.y - partA.y;
  var dist:Number = Math.sqrt(dx * dx + dy * dy);
  if (dist < minDist) {
   var ax:Number = dx * springAmount;
   var ay:Number = dy * springAmount;
   partA.vx += ax;
   partA.vy += ay;
   partB.vx -= ax;
   partB.vy -= ay;
  }
}
     首先求出两个粒子间的距离。如果不小于 minDist [最短距离],则继续向下执行。如
果小于则根据 springValue 求出每个轴的加速度,  然后将它加入 partA 的速度,再将它从
partB 的速度中减去。这就会将粒子拉近。
     如图 12-5 所示,注意观察粒子是如何汇聚成团的,有点像苍蝇在乱飞。但它们也会聚
在一起,散开,加入其它的团中等等,做出一些有趣的随机行为。试改变 minDist 及
springValue 的值,观察运行效果。
带连线的节点
      从标题可以看出,这就是为了能够表现每对节点间的交互。还有比绘制节点间的连线更
好的方法吗?实现起来也非常简单。只对 spring 函数做一点改变:
private function spring(partA:Ball, partB:Ball):void {
  var dx:Number = partB.x - partA.x;
  var dy:Number = partB.y - partA.y;
  var dist:Number = Math.sqrt(dx * dx + dy * dy);
  if (dist < minDist) {
    graphics.lineStyle(1, 0xffffff);
    graphics.moveTo(partA.x, partA.y);
    graphics.lineTo(partB.x, partB.y);
   var ax:Number = dx * springAmount;
   var ay:Number = dy * springAmount;
   partA.vx += ax;
   partA.vy += ay;
   partB.vx -= ax;
   partB.vy -= ay;
  }
}
      如果两个产生交互,则该函数设置将一个线条样式并在两点间进行连线。我们还应该将
下述语句加入到 onEnterFrame 方法的第一行,用以在每帧时进行刷新:
graphics.clear();
      现在节点间已经连接起来了,如图 12-6 所示。但是我不喜欢这种随节点的变化突然连
线或断开的效果。
    我想要一种梯度式的变化。意思是如果两个节点距离大于 minDist,  则线条应当几乎是
完全透明的。随着它们的距离越来越近,线条会变得越来越亮。因此,如果用 dist / minDist,
就会得到一个从 0 到 1 的分数作为 alpha。  但这种效果与我们的设想是反向的,  因为如果
dist 等于 minDist,alpha 将等于 1,但是当 dist 接近 0 是,alpha 将接近 0。OK,我
们可以 1 减去这个数,那么这个数值就反过来了。以下是画线代码:
graphics.lineStyle(1, 0xffffff, 1 - dist / minDist);
graphics.moveTo(partA.x, partA.y);
graphics.lineTo(partB.x, partB.y);
    在我看来,这是一种非常漂亮的效果。
带有质量的节点
     在撰写本章时,我就密谋要让每个节点都有其质量,这是我以前没有想到的。于是就写
出了 NodesMass.as。在这个文件中给每个节点一个随机的大小,并且根据大小给定质量。
private function init():void {
  particles = new Array();
  for (var i:uint = 0; i < numParticles; i++) {
   var size:Number = Math.random() * 10 + 2;
   var particle:Ball = new Ball(size, 0xffffff);
   particle.x = Math.random() * stage.stageWidth;
   particle.y = Math.random() * stage.stageHeight;
   particle.vx = Math.random() * 6 - 3;
   particle.vy = Math.random() * 6 - 3;
    particle.mass = size;
   addChild(particle);
   particles.push(particle);
  }
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
      质量仅仅用于在 spring 函数中为物体添加速度。我们用每个粒子的速度除以质量,给
较大的物体较大的惯性。
private function spring(partA:Ball, partB:Ball):void {
  var dx:Number = partB.x - partA.x;
  var dy:Number = partB.y - partA.y;
  var dist:Number = Math.sqrt(dx * dx + dy * dy);
  if (dist < minDist) {
   graphics.lineStyle(1, 0xffffff, 1 - dist / minDist);
   graphics.moveTo(partA.x, partA.y);
   graphics.lineTo(partB.x, partB.y);
   var ax:Number = dx * springAmount;
   var ay:Number = dy * springAmount;
    partA.vx += ax / partA.mass;
    partA.vy += ay / partA.mass;
    partB.vx -= ax / partB.mass;
    partB.vy -= ay / partB.mass;
  }
}
      由于我削减了部分弹性运动的效果,因此将 springValue 的值增加到 .0025。我喜欢
这种完善的效果。

    节点能做什么用呢?在我看来,这种效果看上去酷毙了,我曾用它作为屏幕保护程序。
这种效果可以作为所有游戏场景的序幕,放入一个行星飞船在上面,让飞船躲避这些节点。
我想这是个很好的挑战!

本章重要公式
    显然本章最大的公式就是万有引力公式。
引力的一般公式:
                               2
force = G * m1 * m2 / distance   (上面的2 是平方)
ActionScript 实现万有引力:
function gravitate(partA:Ball, partB:Ball):void {
    var dx:Number = partB.x - partA.x;
    var dy:Number = partB.y - partA.y;
    var distSQ:Number = dx * dx + dy * dy;
    var dist:Number = Math.sqrt(distSQ);
    var force:Number = partA.mass * partB.mass / distSQ;
    var ax:Number = force * dx / dist;
    var ay:Number = force * dy / dist;
    partA.vx += ax / partA.mass;
    partA.vy += ay / partA.mass;
    partB.vx -= ax / partB.mass;
    partB.vy -= ay / partB.mass;
}
    函数中,使用的是 Ball 类型,大家可以根据实际需要使用自定义类的类型,只要能够
存储速度,质量和位置即可。

阅读更多
个人分类: Flash Flex
想对作者说点什么? 我来说一句

万有引力搜索算法(Matlab)

2013年08月08日 10KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭