在 processing.js 中根据速度创建对象的运动答案

【问题标题】：Creating an object's movement based on velocity in processing.js在 processing.js 中根据速度创建对象的运动
【发布时间】：2015-06-18 05:37:35
【问题描述】：

我正在尝试绘制翅膀根据它们的速度摆动的鸟。简而言之，我的鸟飞得越快，它们的翅膀就应该摆动得越快。

我的完整代码如下，它没有做我想要的。我为创建振荡所做的工作是使flyingFactor 根据我的displayAndMoveWings 函数中velocity 的大小而变化。然而，当我draw 我发现所有东西时，因为velocity 一直在变化（即由draw 函数中的随机acceleration 力触发），flyingFactor 也是如此，这意味着我的鸟的翅膀不会根本不振荡，看起来很马车。

有什么办法让它工作吗？我希望我的鸟儿的翅膀看起来像自然摆动，只是随着我的鸟儿加速或减速而变得越来越慢。

非常感谢您！

angleMode = "degrees";

var Bird = function(m,x,y){
    this.mass = m;
    this.position = new PVector(x,y);
    this.velocity = new PVector(0,0);
    this.acceleration = new PVector(0,0);
};

Bird.prototype.applyForce = function(force) {
    var f = PVector.div(force, this.mass);
    this.acceleration.add(f);
};

Bird.prototype.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
    this.velocity.limit(3);
};

Bird.prototype.displayAndMoveWings = function() {
    this.start=-110;
    this.stop = this.start + 110;
    this.flyingFactor=cos(360+frameCount*this.velocity.mag()*10)*20;
    stroke(0, 0, 0);
    strokeWeight(2);
    noFill();
    arc(this.position.x,this.position.y,this.mass,this.mass,this.start-this.flyingFactor,this.stop-this.flyingFactor);
    arc(this.position.x+this.mass,this.position.y,this.mass,this.mass,this.start+this.flyingFactor-70,this.stop+this.flyingFactor-70);  
};

Bird.prototype.checkEdges = function() {

  if (this.position.x > width) {
    this.position.x = 0;
  } else if (this.position.x < 0) {
    this.position.x = width;
  }

  if (this.position.y > height) {
    this.position.y = 0;
  } else if (this.position.y < 0) {
    this.position.y = height;
  }
};

var bird1 = new Bird(15, width/2, height/2);

var draw = function() {
    background(255, 255, 255);
    bird1.update();
    bird1.displayAndMoveWings();
    var randomAcceleration = new PVector(random(-3,3),random(-3,3));
    bird1.checkEdges();
    bird1.applyForce(randomAcceleration);
};

【问题讨论】：

标签： javascript processing processing.js

【解决方案1】：

我想我可能发现了一个 hack... 在我的 displayAndMoveWings 函数之前，我创建了一个名为 whatIsVelocity 的新全局变量。然后在displayAndMoveWings我写了以下内容：

if (frameCount % 60 === 0){
    whatIsVelocity = this.velocity.mag();
}
this.flyingFactor=cos(360+frameCount*whatIsVelocity*10)*20;

实际上，它的作用是每 60 帧（大约 2 秒）拉一次速度，并将该速度引入flyingFactor，这意味着它不会像我上面之前的代码那样在每一帧都重新计算。不是超级漂亮，但它达到了我的目的。

【讨论】：