I've been following one of Daniel Shiffman's tutorials for steering behaviors(seeking) and based on the tutorial, I created a class that contains two objects (vehicle, target) and then I added them to the main sketch; right now I'm getting this error which addressed a strange line that doesn't even exist.

p5js web editor error

I tested the same code with vs code and chrome, but still, chrome's console showed the same error but yet with another reference to an odd line.

the main purpose of this code is that vehicle must seek the target.

this is the main sketch :

let vehicle;
let target;

function setup() {
  createCanvas(400, 400);
  vehicle = new Vehicle(50, 50);
  target = new Target(mouseX, mouseY);
}

function draw() {
  background(220);

  let steering = vehicle.seek(target);
  vehicle.applyForce(steering);

  vehicle.show();
  vehicle.update();
  
  target.show();
  target.update();
}

and this is the vehicle class:

class Vehicle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
    this.maxForce = 1;
    this.r = 16;
  }

  seek(target) {
    let force = p5.Vector.sub(target, this.pos);
    force.setMag(this.maxSpeed);
    force.sub(this.vel);
    force.limit(this.maxForce);
    return force;
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
  }
  show() {
    noStroke();
    fill(0);
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    triangle(-this.r, -this.r / 2, -this.r, this.r / 2, this.r, 0);
    pop();
  }
}

class Target extends Vehicle {
  constructor(x, y) {
    super(x, y);
  }
  show() {
    noStroke();
    fill(200, 0, 0);
    ellipse(this.pos.x, this.pox.y, this.r);
  }
}

CodePudding user response：

You're not going to like it, but it's typos :)

• this.pos.y, not this.pox.y on line 71
• let force = p5.Vector.sub(target.pos, this.pos); (not let force = p5.Vector.sub(target, this.pos); on line 36

Your code runs just fine otherwise:

let vehicle;
let target;

function setup() {
  createCanvas(400, 400);
  vehicle = new Vehicle(50, 50);
  target = new Target(mouseX, mouseY);
}

function draw() {
  background(220);
  
  target.pos.set(mouseX, mouseY);
  vehicle.applyForce(vehicle.seek(target));

  vehicle.show();
  vehicle.update();
  
  target.show();
  target.update();
}

class Vehicle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
    this.maxForce = 1;
    this.r = 16;
  }

  seek(target) {
    let force = p5.Vector.sub(target.pos, this.pos);
    force.setMag(this.maxSpeed);
    force.sub(this.vel);
    force.limit(this.maxForce);
    return force;
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
  }
  show() {
    noStroke();
    fill(0);
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    triangle(-this.r, -this.r / 2, -this.r, this.r / 2, this.r, 0);
    pop();
  }
}

class Target extends Vehicle {
  constructor(x, y) {
    super(x, y);
  }
  show() {
    noStroke();
    fill(200, 0, 0);
    ellipse(this.pos.x, this.pos.y, this.r);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>