Floorcasting

Floorcasting

Floorcasting is the name of the technique to draw floors in the Raycasting projection by some texture. If you don't want to render a texture in the floor, the Floorcasting is not needed because you just need to draw color lines from the end of the wall to the end of the projection. So, lets check how to create the Floorcasting.

There are some techniques (vertical strip render, horizontal strip render, etc...) that can be used to render the Floorcasting, but for this tutorial I will use the easiest one that I found (vertical strip render). It is not the best technique since the processing used is not so optimized.

To make the Floorcasting, we will start to iterate from the next pixel after the wall to the last pixel of the projection. For each pixel, we will calculate the distance of this pixel, and get the coordinates using this distance to discover the tile in the map. With the tile we can find the texture that will be used for this pixel. These steps are:

For each pixel under the wall until the end of the projection:

1. Calculate the distance of this pixel
2. Calculate the coordinates by the distance
3. Find the tile in the map by the coordinates
4. Get the texture of this tile
5. Find the color in this texture by the coordinates
6. Draw the pixel

It will be made for each column in the rendering processor (For each x coordinate). The image bellow explains a little bit about the iteration and the calc to get the distance

The first thing to do in the code is to create the function to render the floor, and call this function instead the drawLine() function we are calling to render the floor. The function will need as arguments the x coordinate to know witch column in the projection is the target, the wallHeight to know the position for the next pixel until the last pixel of the projection and the rayAngle to calculate the distance and the position of the tile.

/**
 * Floorcasting
 * @param {*} x1 
 * @param {*} wallHeight 
 * @param {*} rayAngle 
 */
function drawFloor(x1, wallHeight, rayAngle) {
}

So now, we will create the iteration between the pixels:

function drawFloor(x1, wallHeight, rayAngle) {
    start = data.projection.halfHeight + wallHeight + 1;
    for(y = start; y < data.projection.height; y++) {
    }
}

Good. Know, I will explain the formula we will use to calculate the distance of each pixel in the projection plane. This formula generates a distance value in the range of the pixel between the half height of the projection and the height of the projection. By knowing that the last pixel will have 1 of distance because this pixel is the closest pixel of the player, and the pixel in the half height on the projection will have the infinite distance, we can make the range using this formula:

Formula: pixel distance = projection height / (2 * pixel_y - projection height) Code: distance = data.projection.height / (2 * y - data.projection.height)

For example, this formula will generate these values for a projection plane with height 20:

height = 20

pixel 11:  10.0
pixel 12:  5.0
pixel 13:  3.3333333333333335
pixel 14:  2.5
pixel 15:  2.0
pixel 16:  1.6666666666666667
pixel 17:  1.4285714285714286
pixel 18:  1.25
pixel 19:  1.1111111111111112
pixel 20:  1.0

Note: We didn't start to calculate the distance by the first pixel in the projection plane since the pixel in the middle of the height will have infinite distance, and the pixels before this will have negative distancies. The Floorcasting just render the floor, so only the pixels after the rendered wall will be processed (calculations always after the half height of the projection plane)

// Draw
drawBackground(rayCount, 0, data.projection.halfHeight - wallHeight, data.backgrounds[0]);
drawTexture(rayCount, wallHeight, texturePositionX, texture);
drawFloor(rayCount, wallHeight, rayAngle)