Drawing triangle to face toward it's velocity

p5.js Coding Questions
1

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.

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?

1 Like
2

Try this:

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

:slight_smile:

3 Likes
3

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

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

2 Likes