AEJoy —— 用表达式实现碰撞检测（一）【JS】

2023-10-03 23:04:11

AEJoy —— 表达式的碰撞检测（一）【JS】

引子

这应该很有趣。AE CS3 包含了一个新的 sample project 文件夹，其中包含了一个名为 "Expression Collision" 的项目文件。这是一个相当简单的项目，它使用表达式来检测图层之间的碰撞。碰撞检测表达式允许每一层检测它的可见区域是否与任何其他层的可见区域相接触。

我非常喜欢这个表达式，并认为它有很多潜在的用途。例如，你可以用它来创建粒子系统，或者创建对象之间的交互动画。

表达式碰撞的原理

碰撞检测表达式的工作原理是，它使用内置的 hitTest() 函数来检测图层之间的碰撞。hitTest() 函数接受两个参数：第一个参数是要检测碰撞的图层，第二个参数是要检测碰撞的区域。

区域可以是矩形、圆形或多边形。在碰撞检测表达式中，我们使用一个矩形作为区域。矩形由它的左上角和右下角坐标定义。

使用表达式检测碰撞

要使用表达式检测碰撞，你需要先创建一个表达式图层。表达式图层是一个特殊的图层，它允许你使用表达式来控制图层的属性。

要创建一个表达式图层，请执行以下步骤：

在时间轴面板中，选择要创建表达式图层的图层。
在“图层”菜单中，选择“新建”>“表达式图层”。
在“表达式图层”对话框中，输入一个名称并单击“确定”。

表达式图层创建后，你就可以开始编写表达式了。要编写表达式，请执行以下步骤：

在时间轴面板中，选择表达式图层。
在“属性”面板中，单击“表达式”属性旁边的省略号 (...) 按钮。
在“表达式编辑器”窗口中，输入你的表达式。

一个简单的碰撞检测表达式

以下是一个简单的碰撞检测表达式：

hitTest(thisLayer, otherLayer)

这个表达式将检测 thisLayer 和 otherLayer 之间的碰撞。如果图层碰撞，则表达式将返回 true。否则，表达式将返回 false。

使用表达式创建粒子系统

你可以使用表达式碰撞来创建粒子系统。例如，以下表达式将创建一个粒子系统，粒子在屏幕上随机移动并相互碰撞：

var numParticles = 100;
var particles = [];

for (var i = 0; i < numParticles; i++) {
  var particle = createParticle();
  particles.push(particle);
}

function createParticle() {
  var particle = new Layer();
  particle.position = new Point(Math.random() * 800, Math.random() * 600);
  particle.velocity = new Point(Math.random() * 10 - 5, Math.random() * 10 - 5);
  return particle;
}

function updateParticles() {
  for (var i = 0; i < particles.length; i++) {
    var particle = particles[i];

    particle.position += particle.velocity;

    for (var j = i + 1; j < particles.length; j++) {
      var otherParticle = particles[j];

      if (hitTest(particle, otherParticle)) {
        particle.velocity = particle.velocity * -1;
        otherParticle.velocity = otherParticle.velocity * -1;
      }
    }
  }
}

setInterval(updateParticles, 16);