Autonomous Agents steering an object - p5.js

Question

I am attempting to apply steering forces based on Nature of Code's first Autonomous Agents example, but I'm missing something. I did get desired/steer vectors to update, but then the object simply moves to the lower right and checkEdges() stops working. I've put various x,y values in the target variable, but nothing seems to work right. I've tried calling seek() in sketch.js, but then I thought maybe to put it in update(). What am I doing wrong?
My goal is to get it to move to a changing mouseX,mouseY target, like in Dan's example, but I've hard coded x,y values just to debug.
Here is my Person class:
class Person {
constructor(){
this.location = createVector(random(width),random(height));
this.velocity = createVector(random(-1,1), random(-1,1));
this.acceleration = createVector(-0.01,0.001);
this.maxspeed = 2;
this.maxforce = 0.01;
this.desired = createVector();
this.steer = createVector();
this.target = createVector(200,200);
}
update() {
this.velocity.add(this.acceleration);
this.velocity.limit(this.maxspeed);
this.location.add(this.velocity);
this.acceleration.mult(0);
this.seek();
}
display() {
fill(0);
stroke(255);
strokeWeight(2);
ellipse(this.location.x, this.location.y, 10, 10);
text(this.target,this.location.x, this.location.y);
}
applyForce(force) {
this.acceleration.add(force);
}
seek() {
this.desired = this.desired.sub(this.target,this.location);
this.desired.normalize();
this.desired.mult(this.maxspeed);
this.steer = this.steer.sub(this.desired,this.velocity);
this.applyForce(this.steer);
this.steer.limit(this.maxforce);
}
checkEdges() {
if ((this.location.x > width) || (this.location.x < 0)) {
this.velocity.x = this.velocity.x * -1;
}
if ((this.location.y > width) || (this.location.y < 0)) {
this.velocity.y = this.velocity.y * -1;
}
}
}
Here is sketch.js:
let people = [];
function setup() {
createCanvas(400, 400);
let p1 = new Person();
people.push(p1);
}
function draw() {
background(0);
people.forEach((p) => {
p.update();
p.checkEdges();
p.display();
});
}
Live code: https://editor.p5js.org/OMTI/sketches/sgGe8CaZH

Answer 1

In your seek() function, use p5.Vector.sub() instead of this.desired.sub() and this.steer.sub().