I have made a test sketch of collision avoidance using javascript, as you can see right here.

I want the vehicle to move to the clicked location, avoiding obstacles on the way. It is working, but not like I expected. When I am next to the obstacle and click on the opposite side of it, the vehicle shakes a little bit before arriving in the other side.


I am using this tutorial as base to my sketch, but cant find out the reason for this issue.

Here is my avoidance logic:

let centerPos = p5.Vector.add(this.position, createVector(10, 10));
let velocity = p5.Vector.sub(this.destination, centerPos);
let nVelocity = p5.Vector.normalize(velocity);
let seeAhead = p5.Vector.mult(nVelocity, SEE_AHEAD);
let ahead = p5.Vector.add(centerPos, seeAhead);
if (euclideanDistance(ahead, obs) <= obs.radius) {
  let avoidanceForce = p5.Vector.sub(ahead, obs.position);
} else if (euclideanDistance(centerPos, obs) <= obs.radius * 2) {
  let avoidanceForce = p5.Vector.sub(centerPos, obs.position);
  avoidanceForce.normalize().mult(MAX_AVOID_FORCE * 0.5);

Here is my variables descriptions:

  1. centerPosition: Vehicle center position
  2. velocity: Distance between initial point and destination
  3. seeAhead: n frames in the future
  4. ahead: future new position

After calculating the vars above, check if the ahead vector is inside obstacle range or vehicle vector position is colliding with obstacle. If someone of these two conditions is true, apply avoid force.

I just want the vehicle to stop shaking when clicking at the opposite side of obstacle (see picture). Is it possible? I don't think this collision avoidance algorithm is working properly.

  • \$\begingroup\$ If you don't want to code it yourself, I would recommend looking into frameworks/plugins, like this one github.com/mikewesthad/navmesh \$\endgroup\$ Mar 25, 2023 at 19:56
  • \$\begingroup\$ Programming realistic collisions/avoidance is educational but also very time consuming. When building an actual game you might want to look at a physics library: brm.io/matter-js . Or when you use the ExcaliburJS game library, you can just switch it on with physics = true!! \$\endgroup\$
    – Kokodoko
    Jun 30, 2023 at 12:18


You must log in to answer this question.