2D Raycasting

const WIDTH = Math.min(window.innerWidth, window.innerHeight, 480);

let wall;
let ray;

function setup() {
  createCanvas(WIDTH, WIDTH);
  wall = new Boundary(200, 0, 0, 200)
  ray = new Ray(WIDTH/ 2, WIDTH/2);
}

function draw() {
    background(0);
    wall.show();
    ray.show();
    ray.lookAt(mouseX, mouseY);

    const pt = ray.cast(wall);
    if (pt) {
      fill(255);
      ellipse(pt.x, pt.y, 8, 8);
    }
}

Boundary.js

class Boundary {

  constructor(x1, y1, x2, y2) {
    this.a = createVector(x1, y1);
    this.b = createVector(x2, y2);

  }

  show(){
    stroke(255);
    line(this.a.x, this.a.y,this.b.x, this.b.y)
  }
}

Ray.js

class Ray {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.dir = createVector(1, 0);
    this.dir.setMag(999);
  }

  lookAt(x, y) {
    this.dir.x = x - this.pos.x;
    this.dir.y = y - this.pos.y;
    this.dir.setMag(999);
  }

  /**
   * 求解射线和线段的交点
   * @param {*} wall
   */
  cast(wall) {
    const x1 = wall.a.x;
    const y1 = wall.a.y;
    const x2 = wall.b.x;
    const y2 = wall.b.y;

    const x3 = this.pos.x;
    const y3 = this.pos.y;
    const x4 = this.pos.x + this.dir.x;
    const y4 = this.pos.y + this.dir.y;

    const den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    
    if (den === 0) {
      return null;
    }

    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den;
    const u = - ((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den;

    if (t > 0 && t < 1 && u > 0) {
      const pt = createVector();
      pt.x = x1 + t * (x2 - x1);
      pt.y = y1 + t * (y2 - y1);
      return pt;
    }else {
      return null;
    }


  }

  show() {
    stroke(255, 255, 0);
    push();
    translate(this.pos.x, this.pos.y);
    line(0, 0, this.dir.x, this.dir.y);
    pop();
  }
}

const WIDTH = Math.min(window.innerWidth, window.innerHeight, 480);

const walls = [];
let p;
let xoff = 0;
let yoff = 1000;

function setup() {
  createCanvas(WIDTH, WIDTH);
  for (let i = 0; i < 5; i++) {
    const wall = new Boundary(
      random(width),
      random(height),
      random(width),
      random(height)
    );
    walls.push(wall);
  }
  walls.push(new Boundary(0, 0, width, 0));
  walls.push(new Boundary(width, 0, width, height));
  walls.push(new Boundary(width, height, 0, height));
  walls.push(new Boundary(0, height, 0, 0));
  p = new Particle();
}

function draw() {
  background(0);
  walls.forEach((wall) => {
    wall.show();
  });
  p.update(noise(xoff) * width, noise(xoff, yoff) * height);
  p.show();
  p.look(walls);
  xoff += 0.005;
  yoff += 0.005;
}

Particle.js

class Particle {
  constructor() {
    this.pos = createVector(width / 2, height / 2);
    this.rays = [];
    for (let i = 0; i < 360; i += 1) {
      this.rays.push(new Ray(this.pos, p5.Vector.fromAngle(i)));
    }
  }

  update(x, y) {
    this.pos.x = x;
    this.pos.y = y;
  }

  look(walls) {
    this.rays.forEach((ray) => {
      let closest = null;
      let min = Infinity;
      walls.forEach((wall) => {
        const pt = ray.cast(wall);
        if (pt) {
          const dist = p5.Vector.dist(this.pos, pt);
          if (dist < min) {
            min = dist;
            closest = pt;
          }
        }
      });
      if (closest) {
        stroke(255, 100);
        line(this.pos.x, this.pos.y, closest.x, closest.y);
      }
    });
  }

  show() {
    fill(255);
    ellipse(this.pos.x, this.pos.y, 1);
  }
}

Ray.js

class Ray {
  constructor(p, dir) {
    this.pos = p;
    this.dir = dir;
  }

  lookAt(x, y) {
    this.dir.x = x - this.pos.x;
    this.dir.y = y - this.pos.y;
  }

  /**
   * 求解射线和线段的交点
   * @param {*} wall
   */
  cast(wall) {
    const x1 = wall.a.x;
    const y1 = wall.a.y;
    const x2 = wall.b.x;
    const y2 = wall.b.y;

    const x3 = this.pos.x;
    const y3 = this.pos.y;
    const x4 = this.pos.x + this.dir.x;
    const y4 = this.pos.y + this.dir.y;

    const den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    
    if (den === 0) {
      return null;
    }

    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den;
    const u = - ((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den;

    if (t > 0 && t < 1 && u > 0) {
      const pt = createVector();
      pt.x = x1 + t * (x2 - x1);
      pt.y = y1 + t * (y2 - y1);
      return pt;
    }else {
      return null;
    }
  }

  show() {
    stroke(255, 255, 0);
    push();
    translate(this.pos.x, this.pos.y);
    line(0, 0, this.dir.x, this.dir.y);
    pop();
  }
}