Joachim Ford Games Articles Experiments News

Ray-casting City

A small project developed throughout March 2022
Use the Arrows / WASD / ZQSD to move around a procedural 1000x1000 city.

Here is the complete source code:
This experiment was fun to make, but also, as I began trying to add more features I realised that ray casting, great as it is, is very limited and tricky to grow from.

The concept of a ray-caster is very simple. Although it may appear to look 3D, it is actually using 2D logic to project various rectangles onto a canvas in such a manner that it looks 3D.

This is a ray.

...And these are some rectangles.

If you make collision with the ray and the rectangles...

...and add multiple rays within a limit, you have the base structure for the 3D casting.

So, take the ray on the far left. That ray has a unique length based on what it's colliding with. If a rectangle was drawn on the far left of the screen, and its height corresponded to the length of the ray (i.e. the longer the ray, the shorter the rectangle), you would have actually completed the main part of ray-casting.


...would make something similar to this...

...And with more rays, something like this:

It's looking a bit more 3D now! Now if we add a higher resolution (i.e. making a ray for every ~pixel), this would be the result:

This is the source code for the demo above:

© Copyright —