Steering, Rotation, PVector.heading2D()

[UseTheForceFrodo]

Hi all,

 

I'm playing around with PIXI and using what I know of autonomous agents in Processing to help me along the way. I used Processing extensively about 2 years ago and integrated a lot of Craig Reynolds' work into my projects (ie autonomous agents, steering, boids etc). To learn that I used the wonderful book The Nature Of Code by Daniel Shiffman. Chapter 6 of this book is on autonomous agents and moves from steering into a boids algorithm using Processing. The section related to my question is "Example 6.1: Seeking a target" (if you can visit the page for Chapter 6 - Autonomous Agents and look at Example 6.1 as it has an embedded applet showing the intended results of what I'm trying to achieve. Note how nicely the triangle just turns to be facing the direction it is moving).

 

I've been able to rewrite most of that example in JS/PIXI but I'm having trouble with the vehicle rotating to face the mouse. The relevant section from the full Vehicle Class code is:

// Draw a triangle rotated in the direction of velocityfloat theta = velocity.heading2D() + PI/2; //this line in particularfill(127);stroke(0);strokeWeight(1);pushMatrix();translate(location.x,location.y);rotate(theta); //the Vehicle is rotated by the angle calculated by heading2D() abovebeginShape();vertex(0, -r*2);vertex(-r, r*2);vertex(r, r*2);endShape(CLOSE);popMatrix();

What I cannot figure out is how to translate the float theta = velocity.heading2D( ) + PI/2; line into something usable by PIXI and then correctly rotate the triangle primitive I have drawn with PIXI.Graphics( ).

 

My 'Vehicle' is also an object that draws the triangle and moves towards the mouse and does everything expected except rotate to always the direction it is travelling. My current line of code to attempt to replace the PVector.heading2d( ) method from Processing is

this.heading = Math.atan2(this.velocity.x, this.velocity.y);

Which is followed up elsewhere with

graphics.rotation = this.heading;

I'll admit it's a reasonably blind attempt at hoping to stumble upon a working result as I don't truly understand how to rotate a primitive (filled triangle in my case) by the angle derived from the direction it is travelling. What happens when I run my steering example with the above two lines included is exceptionally erratic rotating - alternating between two rotations so fast in fact that it gives the appearance of there being two triangles.

 

Is someone able to help me understand how to rotate a triangle primitive to be facing the direction it travels as seen in the quoted Processing code line?

float theta = velocity.heading2D() + PI/2;

I need to implement whatever calculation PVector.heading2D( ) does, but that is what I can't figure out.

 

Many thanks!

 

[dimumurray]

I think you need to swap the parameters of the atan2 function. That line of code should have read as:

 

this.heading = Math.atan2(this.velocity.y, this.velocity.x);