Best way to render a slanted grid in 2D

[Bigfoot71]

Hello everybody !

I'm trying to find documentation or examples (SDL or LÖVE) on how to display a slanted grid in 2D and if possible animated, something like this:


I've tried several ways but can't come up with anything very convincing, I ended up using the Playmat library, generating a grid image from a canvas, setting the camera render size to the width of the screen and half its height and using lg.translate while scrolling the X-axis of the camera... (that's a lot of call for something that could be much cheaper I guess)

Here is the result:


Otherwise I thought to do it by displaying lines and applying a translation to the points, a bit like this (this code only displays a simple grid with lines, I miss the good way to "simulate" the Z axis)

Code: Select all

local WIN_W, WIN_H = love.graphics.getDimensions()


local CELL_SIZE = 20
local POINTS = { x={}, y={} }

local px = POINTS.x
for x = 0, WIN_W, CELL_SIZE do
    px[#px+1] = x
end

local py = POINTS.y
for y = 0, WIN_H, CELL_SIZE do
    py[#py+1] = y
end


function love.draw()

    local px = POINTS.x
    local py = POINTS.y

    for x = 1, #px-1 do

        local x1 = px[x]	-- What calculation should be applied to obtain the perspective?
        local x2 = px[x+1]	-- What calculation should be applied to obtain the perspective?

        for y = 1, #py-1 do

            local y1 = py[y]		-- What calculation should be applied to obtain the perspective?
            local y2 = py[y+1]		-- What calculation should be applied to obtain the perspective?

            love.graphics.line(x1, y1, x1, y2)
            love.graphics.line(x1, y1, x2, y1)

        end

    end

end

Or in the worst case if this way is really not optimized if you can tell me another way rather than using an entire library dedicated to MODE7 for just an animation...

[Bigfoot71]

If I don't have a better solution, I think I'll keep this one (I managed to apply a perspective differently but it was obviously not optimized at all).
The best solution would obviously be to write a shader, but Playmat's already does the job really well!

The only thing to fix with Playmat is to play for example with the anisotropy or other filters to fix the flickering problems of the lines that you can see on the GIF above. (this is how I personally did it)

I share with you here an little example of how I did it and an animation of the result of this example:



But if a genius always has a better solution the answers are always open!