Background

code found in 'background.py'

To understand every element of the screen we need to know... how does pygame work?

As you may know, a video is made out of many pictures put together. Depending on how fast the displayed picture changes, you'll see that video at a different speed. Depending on how many of these images you see in one second, you get you FRAMES PER SECOND (FPS). The bigger the FPS, the smoother the video looks like.

The same concept applies for pygame too. The 'simulation' is's just an infinite display of images (frames), which the game developer creates with the tools provided by the library. Each new frame is drawn on top of the last one. This is the reason we have a background color. After each frame, we fill the last image with it. On top of that, we draw, in this order, the:

• grid
• axis
• arrows
• names for each axis

# snippet from 'background.py'
def onScreen(self, screen: pygame.Surface):
    self.__drawGrid(screen)
    self.__drawAxis(screen)
    self.__drawArrows(screen)
    self.__drawXY(screen)

---

To draw the grid, we define the unit measure conversion (from decimeters to pixels). Knowing the screen size (in pixels), we can calculate how many lines with the desired unit measure are visible on the screen, vertically and horizontally. Starting from the origin, we go in the positive direction and draw each line and its symmetrical:

# snippet from 'background.py'
def __drawGrid(self, screen: pygame.Surface):
    # vertical lines, perpendicular on the X axis
    for line in range(self.units_on_screen_x + 1):
        point = Point(self.constants.screen_size.half_w + self.constants.HALF_UNIT_MEASURE_LINE, 
                      self.constants.screen_size.half_h + line * self.constants.PIXELS_2_DEC)
        negative_point = self.symmetrical(point, Axis.Y)

        pygame.draw.line(screen, self.constants.GRID_COLOR, # draw a vertical line on the positive side
            (0, point.y), (self.constants.screen_size.width, point.y), width = 1) 
        pygame.draw.line(screen, self.constants.GRID_COLOR, # draw a vertical line on the negative side
            (0, negative_point.y), (self.constants.screen_size.width, negative_point.y), width = 1)

    # horizontal lines are similar

The axis are pretty straightforward, just lines from the origin (middle of each dimension, in pygame's coordinates):

# snippet from 'background.py'
def __drawAxis(self, screen: pygame.Surface):
    pygame.draw.line(screen, self.constants.AXIS_COLOR, self.negative_x, self.positive_x, width = 4)
    pygame.draw.line(screen, self.constants.AXIS_COLOR, self.negative_y, self.positive_y, width = 4)

Knowing the edge points of the axis (the tip of the arrow) and coordinates for the the other point, defined by a constant, we can easily draw the arrows too:

# snippet from 'background.py'
def __drawArrows(self, screen: pygame.Surface):
    # on X field axis
    pygame.draw.line(screen, self.constants.AXIS_COLOR, 
            self.positive_x, self.x_arrow_point_left, width = 4)
    pygame.draw.line(screen, self.constants.AXIS_COLOR, 
            self.positive_x, 
            point2Tuple(self.symmetrical(tuple2Point(self.x_arrow_point_left), Axis.X)), 
            width = 4)

    # similar for the Y axis

And finally, the 'X' and 'Y' axis names are just texts rendered into images, displayed on the screen in a fixed position, relative to the axis:

# snippet from 'background.py'
def __drawXY(self, screen: pygame.Surface):
    screen.blit(self.x_coord, self.x_rectangle)
    screen.blit(self.y_coord, self.y_rectangle)

next page →

← previous page