Graph these Graphics

🔗 Hello, Rectangle

First, let’s import the pygame package and initialize its modules.

import pygame

pygame.init()

Let’s set up the game screen.

screen = pygame.display.set_mode([1200, 800])
pygame.display.set_caption("Game Name")

Let’s define some colors using RGB codes (red, green, blue). Each color is a three-item list where the intensity of each hue is described from 0 (low intensity) to 255 (high intensity).

RED = [255, 0, 0]
WHITE = [255, 255, 255]
BLACK = [0, 0, 0]

Comprehension Question What would the code for GREEN be? For BLUE?

In the coordinate system you know from math class, the origin is on the bottom left.

  ^
5 |
4 |
3 |      (3,2)
2 |     *
1 |
0 +------------->
  0 1 2 3 4 5

The coordinates in pygame are a little different: the origin is on the top left.

   0 1 2 3 4 5
0 +------------->
1 |
2 |      *
3 |       (3,2)
4 |
5 |
  V

The x-axis works exactly like you’re used to, but now larger y values mean closer to the bottom of the screen.

We’ve got color and coordinates figured out, so we’re ready to draw our rectangle. First, we define the rectangle shape. The arguments, in order, represent left, top, width, and height. The arguments left and top say where the

first_rect = pygame.Rect(
    100, # left
    200, # top
    30,  # width
    150  # height
  )

pygame.draw.rect(screen, RED, first_rect)

pygame.display.flip() # refresh the screen

Note that we have to call pygame.display.flip() to get pygame to draw our changes to the screen. This is so we can make a whole mess of changes one-by-one and then render them all at once efficiently.

Challenge: Can you draw

• a red rectangle in the top left quarter of the screen,
• a blue rectangle on the top right quarter of the screen,
• a green rectangle on the bottom half of the screen?

🔗 Getting in Shape

We can use pygame to draw a line connecting a start point to an end point.

pygame.draw.line(
    screen,     # where to draw the line
    WHITE,      # line color
    [0, 0],     # x,y start point
    [100, 100], # x,y end point
    5           # line width
  )

To draw a circle or an ellipse (a squished circle), we specify a bounding rectangle. Then, we draw the ellipse inside that rectangle.

ellipse_rect = pygame.Rect(
    400, # left
    400, # top
    40,  # width
    80   # height
  )
pygame.draw.ellipse(
  screen,       # where to draw ellipse
  RED,          # color
  ellipse_rect  # rectangle to draw inside
)
pygame.display.flip() # refresh the screen

Mathematically, a polygon is defined by series of straight paths between vertices. For example, triangles, squares, and pentagons are all polygons.

In pygame, we define a polygon just like in math: using a list of (x,y) vertex coordinates.

pygame.draw.polygon(
    screen,                     # where to draw the polygon
    RED,                        # color
    [[0,0], [200,200], [100,0]] # x,y coordinates of vertices
  )
pygame.display.flip() # refresh the screen

Challenge: Can you draw a simple house using pygame shapes?

🔗 The Cat’s Meow

We’ve got cat scratch fever and want to render a cat in PyGame. We could try to use shapes, but drawing even just a recognizable cat would be a lot of work — lots of ellipses and lines! A better idea is just to draw an image of a cat.

To make this next code work, you need to have the image cat.png saved into the same folder as your Python file.

First, we have to load the image from file. (Note: in a game, we usually only want to do this once.) Then, we ask for the pygame rectangle the same size as our image and recenter it to the x,y coordinates where we’d like it to go. Finally, we blit the image into the rectangle we set up and refresh the screen.

cat_image = pygame.image.load('cat.png')
cat_rect = cat_image.get_rect()
cat_rect.center = [100, 400]

screen.blit(cat_image, cat_rect)

pygame.display.flip() # refresh the screen

Challenge:

1. Can you draw the cat in your house’s window?
2. Download another image from the interwebs and add it to your house.