# Drawing triangle to face toward it's velocity

**URL:** <https://discourse.processing.org/t/drawing-triangle-to-face-toward-its-velocity/16642>\
**Category:** Coding Questions\
**Created:** [December 26, 2019, 4:15pm UTC](https://discourse.processing.org/t/drawing-triangle-to-face-toward-its-velocity/16642 "2019-12-26T16:15:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ackados](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ackados/32/8282_2.png) [@Ackados](https://discourse.processing.org/u/Ackados)\
**Post date:** [December 26, 2019, 4:15pm UTC](https://discourse.processing.org/t/drawing-triangle-to-face-toward-its-velocity/16642/1 "2019-12-26T16:15:34Z")

</div>

I know you can use `vector.heading()` to get the angle of direction. I have been using this in my code but it’s not working correctly.

```auto
class Boid {
    constructor() {
        this.loc = createVector();
        this.vel = p5.Vector.random2D();
        this.vel.setMag(random(1, 2));
        this.acc = createVector();

        this.maxSpeed = 1;
    }

    draw() {
        stroke(255);
        strokeWeight(2)
        push();
        beginShape();
        rotate(this.vel.heading());
        vertex(this.loc.x, this.loc.y);
        vertex(this.loc.x - 3, this.loc.y + 10);
        vertex(this.loc.x, this.loc.y + 8);
        vertex(this.loc.x + 3, this.loc.y + 10);
        endShape(CLOSE);
        pop();

    }

    update() {
        this.loc.add(this.vel);
        this.vel.add(this.acc);
        this.vel.limit(this.maxSpeed)
    }
}

```

They appear to point in a random direction and not “point” toward their velocity vector. What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 27, 2019, 1:32am UTC](https://discourse.processing.org/t/drawing-triangle-to-face-toward-its-velocity/16642/2 "2019-12-27T01:32:09Z")

</div>

Try this:

```auto
  draw() 
    {
    stroke(255);
    strokeWeight(2)
    push();
    translate(this.loc.x, this.loc.y);
    rotate(this.vel.heading() + TAU / 4);
    beginShape();
    vertex(0, 0);
    vertex(0 - 3, 0 + 10);
    vertex(0, 0 + 8);
    vertex(0 + 3, 0 + 10);
    endShape(CLOSE);
    pop();
    }

```

🙂

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 27, 2019, 2:01am UTC](https://discourse.processing.org/t/drawing-triangle-to-face-toward-its-velocity/16642/3 "2019-12-27T02:01:21Z")

</div>

hi,  
-a- the difference from your code posting  
to a running program we can play with,  
might be 6 lines more

also for p5.js better just post the link like  
[https://editor.p5js.org/kll/sketches/tAOOtHtWD](https://editor.p5js.org/kll/sketches/tAOOtHtWD)

yes, some experts might can solve riddles just from reading some code lines,  
normals need to test / play line by line  
if you want their help, make it as easy as possible for us.

-b-  
@glv solved it:  
-1- translate ( goto ) rotation center  
-2- rotate