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) {
}

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