p5.jsで作成　障害物をぶつかったら方向転換をしてランダムに歩き回る丸印とでもいいましょうか

丸は区画単位で移動します。一度ランダムで決めた方向に既定の歩数進みます。障害物にぶつかるとランダムに方向転換します。とりあえずそれだけのことでした。

以下がコードです。

let gridSize = 20; //一辺の区画数
let cellSize; //区画の一辺のサイズ
let cell = []; //区画の情報
let cl; //色情報
let persons = []; //丸印の情報格納
let pnum = 20; // 丸の数
let steps = 0; //一方向への歩数のカウンター
let stpMax = 7; //歩数カウンターの最大値
let d; //次に進む向き
let radius; //丸の半径
let speed = 0; // 丸の移動スピードカウンター
let spdMax = 30; // 丸の移動スピードカウンターの最大値

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  cellSize = width / gridSize;
  radius = cellSize * 0.3;
  
  for (let i = 0; i < gridSize; i++) {
    for ( let j = 0; j < gridSize; j++) {
      cell.push(createVector(j, i, 0));
    }    
  }
  
  for (let i = 0; i < gridSize * gridSize; i++) {
    if (
      cell[i].x == 0 ||
      cell[i].x == gridSize - 1 ||
      cell[i].y == 0 ||
      cell[i].y == gridSize -1) 
    {
      cell[i].z = 1;
    }　// 四方に壁を作り壁の印としてzを1とする。
  }
  
  // 中ほどに障害物を作ってみる。その場所のzは2とした。
  for (let i = 184; i < 189; i++) {
    for (let j = 0; j < 5; j++) {
      cell[i + j * gridSize].z = 2;
    }
  }
  for (let i = 112; i < 117; i++) {
    for (let j = 0; j < 5; j++) {
      cell[i + j * gridSize].z = 2;
    }
  }
  
  // 人の最初の場所と進む方向を決める
  for (let i = 0; i < pnum; i++) {
    persons.push(new Parson(2, 2, int(random(4))));
  }
}

function draw() {
  background(0)
  for (let i = 0; i < gridSize * gridSize; i++) {
    if (cell[i].z == 1) {
      cl = color(128, 0, 0);
      drawRect(i, cl);
    }
    if (cell[i].z == 2) {
      cl = color(255, 255, 0);
      drawRect(i, cl);
    }
  }
  
  for (let person of persons) {
    person.drawParson();
    person.nextPosition();
  }
}

function drawRect(i, cl) {
  fill(cl);
  noStroke();
  rect(
    cell[i].x * cellSize + cellSize / 2,
    cell[i].y * cellSize + cellSize / 2,
    cellSize,
    cellSize
  );
}

class Parson {
  constructor(x, y, d) {
    this.x = x;
    this.y = y;
    this.d = d;
    this.speed = 0;
    this.steps = 0;
  }

  drawParson() {
    fill(0, 255, 0);
    noStroke();
    ellipse(
      this.x * cellSize + cellSize / 2,
      this.y * cellSize + cellSize / 2,
      radius * 2
    );
  }
  
  nextPosition() {
    this.speed += 1;
    if (this.speed < spdMax) {
      return;
    }
    this.speed = 0;
  
    this.steps += 1;
    if (this.steps < stpMax) {
    } else {
      this.d = int(random(4));
      this.steps = 0;
    }
    
    let newX = this.x;
    let newY = this.y;

    switch (this.d) {
      case 0: newY -= 1; break;
      case 1: newX += 1; break;
      case 2: newY += 1; break;
      case 3: newX -= 1; break;      
    }
    
    if (this.checkNext(newX, newY) == 0) {
      this.x = newX;
      this.y = newY;
    } else {
      this.d = int(random(4));
    }
  }

  checkNext(x, y) {
    if (x < 0 || x >= gridSize ||
      y < 0 || y >= gridSize) {
      return 1;
    }
    let idx = x + y * gridSize;
    return cell[idx].z;
  }
}