[Tutor] Mapping memory coordinate to screen coordinates

[Phil]

Thank you for looking at this lengthy example.

Over the years I've used this scheme to display a memory grid using C++ 
and more recently Python. The problem is that the x and y coordinates 
don't match the screen coordinates. The simple solution is to reverse 
either the grid or screen coordinates, however this leads to confusion. 
I'm currently working on, what to me, is a complex game board and I'm 
constantly running into bugs because I'm confusing the screen 
coordinates with the real coordinates and mental gymnastics is something 
the I'm struggling with as I age.

I came across the following example a couple of days ago and it shows 
the problem perfectly. Can anyone suggest a logical solution where 
memory grid[x][y] is the same as screen grid[x]y]?


"""
  Example program to show using an array to back a grid on-screen.

  Sample Python/Pygame Programs
  Simpson College Computer Science
  http://programarcadegames.com/
  http://simpson.edu/computer-science/

  Explanation video: http://youtu.be/mdTeqiWyFnc
"""
import pygame

# Define some colors
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
GREEN = (0, 255, 0)
RED = (255, 0, 0)

# This sets the WIDTH and HEIGHT of each grid location
WIDTH = 20
HEIGHT = 20

# This sets the margin between each cell
MARGIN = 5

# Create a 2 dimensional array. A two dimensional
# array is simply a list of lists.
grid = []
for row in range(10):
     # Add an empty array that will hold each cell
     # in this row
     grid.append([])
     for column in range(10):
         grid[row].append(0)  # Append a cell

# Set row 1, cell 5 to one. (Remember rows and
# column numbers start at zero.)

'''
****************************************************

This demonstrates the problem ; x and y are reversed

****************************************************
'''
grid[1][5] = 1

# Initialize pygame
pygame.init()

# Set the HEIGHT and WIDTH of the screen
WINDOW_SIZE = [255, 255]
screen = pygame.display.set_mode(WINDOW_SIZE)

# Set title of screen
pygame.display.set_caption("Array Backed Grid")

# Loop until the user clicks the close button.
done = False

# Used to manage how fast the screen updates
clock = pygame.time.Clock()

# -------- Main Program Loop -----------
while not done:
     for event in pygame.event.get():  # User did something
         if event.type == pygame.QUIT:  # If user clicked close
             done = True  # Flag that we are done so we exit this loop
         elif event.type == pygame.MOUSEBUTTONDOWN:
             # User clicks the mouse. Get the position
             pos = pygame.mouse.get_pos()
             # Change the x/y screen coordinates to grid coordinates
             column = pos[0] // (WIDTH + MARGIN)
             row = pos[1] // (HEIGHT + MARGIN)
             # Set that location to one
             grid[row][column] = 1
             print("Click ", pos, "Grid coordinates: ", row, column)

     # Set the screen background
     screen.fill(BLACK)

     # Draw the grid
     for row in range(10):
         for column in range(10):
             color = WHITE
             if grid[row][column] == 1:
                 color = GREEN
             pygame.draw.rect(screen,
                              color,
                              [(MARGIN + WIDTH) * column + MARGIN,
                               (MARGIN + HEIGHT) * row + MARGIN,
                               WIDTH,
                               HEIGHT])

     # Limit to 60 frames per second
     clock.tick(60)

     # Go ahead and update the screen with what we've drawn.
     pygame.display.flip()

# Be IDLE friendly. If you forget this line, the program will 'hang'
# on exit.
pygame.quit()

-- 
Regards,
Phil