Visualizing a matrix in pygame to form a grid

Question

So I'm new to both pathfinding and and pygame but I'm trying to visualize the matrix into a grid in pygame. However, when I try the boxes get further and further away and it infinitely loops. So my question is how can i Get this to display a 4x4 grind like my matrix, with each square properly spaced? The code was split into 2 files. the main problem is in the second, I put the first here just for context. Also just theory is fine too I don't necessarily need a code solution just wann wrap my head around this.

P.s. To any familiar with pygame is there anyway to get the Grid/grid.node() information from the pathfinder? thatd make this a bit easier i think

from pathfinding.core.grid import Grid
from pathfinding.finder.a_star import AStarFinder

matrix = [
    [1,1,0,1],
    [1,0,0,1],
    [1,1,0,1],
    [1,1,1,1]

    ]
#creates a grid from the matrix
grid = Grid(matrix=matrix)
start = grid.node(0,0)
end = grid.node(3,0)

class setup:
    def createFinder(self):
        #create a new instance of a finder
        self.finder = AStarFinder(diagonal_movement=DiagonalMovement.always)
        #The find_path function returns 2 values, the amounrs of times it runs to --
        #-- find a path(runs) and the length of the finished path(path)
        self.path, self.runs = self.finder.find_path(start, end, grid)
        print(self.path)

    def showPath(self):
        print('operations', self.runs, 'path length:', len(self.path))
        print(grid.grid_str(path=self.path, start=start, end=end))





from Pathfinder import *
import pygame

#creating a pygame screen

white = (255, 255, 255)
black = (198,238,78)

class pygameSetup():
    def createDisplay(self):
        self.gridDisplay = pygame.display.set_mode((800,600))
        self.gridDisplay.fill(white)

    def createSquare(self,x,y):
        pygame.draw.rect(self.gridDisplay, black, [x,y,10,10])

    def visualizeGrid(self):
        x = 0
        y = 0
        z = 0
        w = 0
        v = 0
        while w <=3:
            pygame.display.update()
            for i in matrix[z]:
                print("The matrix is ", matrix[z],"and Z is: ", i)
                v += 1
                x += x + 11
                if x >= 700:
                    x = 0
                    y += 11
                
                if v == 4:
                    i += 1
                    z+=1
                    if z >= 4:
                        z = 0
                    v = 0
                self.createSquare(x,y)
            w+1
                
pS = pygameSetup()
pS.createDisplay()
pS.visualizeGrid()

Answer 1

Your visualizeGrid function is a lot more than you actually need. I am not sure why you have all those variables (v,w,x,y,z), you only need an x and a y coordiante. If you only want to display the grid, here is a simple working solution:

import pygame

gridDisplay = pygame.display.set_mode((200, 200))
pygame.display.get_surface().fill((200, 200, 200))  # background

matrix = [[1 ,1 ,0 ,1],
          [1 ,0 ,0 ,1],
          [1 ,1 ,0 ,1],
          [1 ,1 ,1 ,1]]
# we use the sizes to draw as well as to do our "steps" in the loops. 
grid_node_width = 10  
grid_node_height = 10

def createSquare(x, y, color):
    pygame.draw.rect(gridDisplay, color, [x, y, grid_node_width, grid_node_height ])



def visualizeGrid():
    y = 0  # we start at the top of the screen
    for row in matrix:
        x = 0 # for every row we start at the left of the screen again
        for item in row:
            if item == 0:
                createSquare(x, y, (255, 255, 255))
            else:
                createSquare(x, y, (0, 0, 0))

            x += grid_node_width # for ever item/number in that row we move one "step" to the right
        y += grid_node_height   # for every new row we move one "step" downwards
    pygame.display.update()


visualizeGrid()  # call the function    
while True:
    pass  # keeps the window open so you can see the result.

Concerning

get the Grid/grid.node() information from the pathfinder

the docs mention that you can get a node from your grid with grid.node(index_x, index_y):

matrix = [
  [1, 1, 1],
  [1, 0, 1],
  [1, 1, 1]
]

grid = Grid(matrix=matrix)

start = grid.node(0, 0)  # getting the first node in the 3x3 Matrix
end = grid.node(2, 2)  # getting the last node in the 3x3 Matrix