How to fix fish-eye effect while making doom like pseudo-3d raycaster game

85 Views Asked by At

I am creating a 2.5d game in p5js. I wanted to have it feel like doom, so I made the 3d myself (via griffpatches scratch tutorials for principles), and while making it, I discovered a problem. due to the way that I fixed the fish-eye effect it caused the bottom to be wavy.

He fixed this with linear ray distribution, I think, but that is required FOV. Every time I tried to do this it broke the entire thing. if anyone has done anything like this, please help me.

the 3d game the effect on the wall And this is the code:

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  dv = -408.709660662;
  //image(img, 0, 0);
}

x = 150;
y = 200;
sx = 150;
sy = 200;
dir = 0;

function draw() {
  setup();
  erase();

  /*let img = createImage(66, 355);
  img.loadPixels();
  for (let x = 0; x < img.width; x += 1) {
    for (let y = 0; y < img.height; y += 1) {
        img.set(x, y, 0);
    }
  }
  img.updatePixels();
  image(img, 17, 17);
  image(img, 317, 17);
    
  let img2 = createImage(366, 66);
  img2.loadPixels();
  for (let x = 0; x < img2.width; x += 1) {
    for (let y = 0; y < img2.height; y += 1) {
        img2.set(x, y, 0);
    }
  }
  img2.updatePixels();
  image(img2, 17, 17);
  image(img2, 17, 317);*/

  sdir = dir - 1;
  let columnnum = 0;

  for (let m = 0; m < 200; m++) {
    columnnum += 1;
    sx = x;
    sy = y;
    for (let m = 0; m < 150; m++) {
      if (17 > sy || 17 > sx || 383 < sy || 383 < sx) {

      } else {
        sx += 1 * sin(sdir);
        sy += 1 * cos(sdir);
      }
      while (17 > sy || 17 > sx || 383 < sy || 383 < sx) {
        sx += -0.1 * sin(sdir);
        sy += -0.1 * cos(sdir);
      }
    }
    stroke(255);
    let distance = sqrt(sq(sx - x) + sq(sy - y));
    distance = distance * cos((dir) - sdir)
    stroke(145 - (distance * 1.5));
    height = 4000 / distance;
    strokeWeight(3);
    line(3 * (10 + columnnum), (height + 200), (columnnum + 10) * 3, (-1 * (height) + 150));
    sdir += 0.01;
  }
  if (keyIsDown(UP_ARROW)) {
    movef();
  }
  if (keyIsDown(DOWN_ARROW)) {
    moveb();
  }
  if (keyIsDown(RIGHT_ARROW)) {
    dir += 0.1;
  }
  if (keyIsDown(LEFT_ARROW)) {
    dir -= 0.1;
  }
}

function movef() {
  y += 2 * cos(dir);
  if (17 > y || 383 < y) {
    y += -2 * cos(dir);
  }
  x += 2 * sin(dir);
  if (17 > x || 383 < x) {
    x += -2 * sin(dir);
  }
}

function moveb() {
  y += -2 * cos(dir);
  if (17 > y || 383 < y) {
    y += 2 * cos(dir);
  }
  x += -2 * sin(dir);
  if (383 < x || 17 > x) {
    x += 2 * sin(dir);
  }
}

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

There are 0 best solutions below