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>