I'm working on a self-directed project which involves casting a certain amount of rays out of a particle which the user can move at a given range of angle which the user can manipulate. I then render two things:
A) An image of the particle within it's world, displaying the particle itself, the rays it is casting, and any boundaries which the rays collide with.
B) A render of the 2d scene, where the boundaries (represented in part A by lines) are supposed to be rendered as walls.
In the end, I plan to adjust the brightness of said walls as well as their height in order to represent distance. The farther away a wall is, the darker and smaller it should be. As it stands, the distance is directly proportional to the height, which causes this fisheye effect. While I understand where the effect comes from, I don't want it, and I am completely clueless in terms of how to remove it. I haven't yet implemented the brightness being linked to the distance, but that is alright as I think a fisheye effect would look more natural with the brightness.
I'm doing everything using only the HTML canvas element and JS, although that isn't completely relevant to the question. My question is more about the maths involved in removing the fisheye effect. Can anyone provide insight on what I would need to do to remove the fisheye effect? The walls should still vary in height based on their distance from the particle, but I'd like the top edge of the wall to be straight in the render.
A picture from my testing implementation as an example of the effect:
