Creating an object's movement based on velocity in processing.js

442 views Asked by At

I am trying to draw birds whose wings oscillate based on their velocity. Simply put, the faster my birds fly, the faster their wings should oscillate.

My complete code is below and it doesn't do what I want. What I've done to create the oscillation is make flyingFactor vary based on the magnitude of velocity in my displayAndMoveWings function. However when I draw everything I find that, because velocity changes all the time (i.e. triggered by the random acceleration force in the draw function), so does flyingFactor and means that my birds' wings don't oscillate at all and look very buggy.

Any way to make it work? I want my birds' wings to look like they naturally oscillate, only faster and slower as my birds accelerate or decelerate.

Thank you so much in advance!

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);
};
1

There are 1 answers

0
aBertrand On

I think I may have found a hack... Before my displayAndMoveWings function I created a new global variable called whatIsVelocity. Then in displayAndMoveWings I wrote the following:

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

Effectively what this does is pull the velocity every 60 frames (approximately 2 seconds) and introduces that velocity into flyingFactor, meaning that it doesn't get recalculated every frame like in my previous code above. Not super pretty but it achieves my purpose.