## Recommended Posts

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!

##### Share on other sites

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);`

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.