GTA East Academy

PY-1.2-BP3-MQ58

Draw and Resize Shapes

We will make a Pygame window where you can draw shapes and change their size:

  • Left-click: Draw a red circle.
  • Right-click: Draw a blue square.
  • Scroll up: Make the last drawn shape bigger.
  • Scroll down: Make the last drawn shape smaller.

See What's Not Working

Run this command to see what parts of your code are not working yet.

pytest module-1.2/blueprint-3/quest-58

Here's what we expect to see:

  • ❌ test_left_click_draws_circle
  • ❌ test_right_click_draws_rectangle
  • ❌ test_scroll_up_increases_size
  • ❌ test_scroll_down_decreases_size
  • ❌ test_size_change_without_shape_does_nothing

Write Your Code

Now it's your turn to write the code in main.py!

Your program needs to draw a red circle for a left-click and a blue square for a right-click. It should also change the size of the last drawn shape when you scroll your mouse up or down.

Here are some examples of how Pygame works. These examples show different ways to handle mouse clicks, scrolls, and draw shapes.

import pygame

# Example: Checking for a left mouse click
def check_left_click(event):
    if event.type == pygame.MOUSEBUTTONDOWN and event.button == 1:
        print("Left button clicked!")
        return True
    return False

# Example: Checking for a right mouse click
def check_right_click(event):
    if event.type == pygame.MOUSEBUTTONDOWN and event.button == 3:
        print("Right button clicked!")
        return True
    return False

# Example: Handling mouse scroll events
def handle_mouse_scroll(event, current_size):
    if event.type == pygame.MOUSEWHEEL:
        if event.y > 0: # Scrolled up
            return current_size + 5 # Increase size
        elif event.y < 0: # Scrolled down
            return max(1, current_size - 5) # Decrease size, but not below 1
    return current_size # No change

# Example: Drawing a circle at a position
def draw_red_circle(surface, position, radius=50):
    pygame.draw.circle(surface, (255, 0, 0), position, radius)

# Example: Drawing a square at a position (adjusting for center)
def draw_blue_square(surface, position, size=100):
    top_left_x = position[0] - size // 2
    top_left_y = position[1] - size // 2
    pygame.draw.rect(surface, (0, 0, 255), (top_left_x, top_left_y, size, size))

See If It Works

Run this command again to see if your code works.

pytest module-1.2/blueprint-3/quest-58

Here's what we want to see:

  • ✅ test_left_click_draws_circle
  • ✅ test_right_click_draws_rectangle
  • ✅ test_scroll_up_increases_size
  • ✅ test_scroll_down_decreases_size
  • ✅ test_size_change_without_shape_does_nothing

Documentation

Pygame Mouse Input and Drawing: Reference

This document provides a quick reference for key concepts and functions related to handling mouse input and drawing basic shapes in Pygame.

The Anatomy of a Game Loop

A typical Pygame application uses a main loop that repeats continuously. This loop is often structured into distinct phases to manage the flow of the program.

  1. Process Input: Check for user actions (events) like mouse clicks, key presses, or closing the window.
  2. Update State: Modify variables and game elements based on the input and game logic.
  3. Render (Draw): Clear the screen and draw all visual elements in their current state.
# Basic structure of a Pygame game loop
running = True
while running:
    # Phase 1: Process Input
    for event in pygame.event.get():
        # Handle events here (e.g., check event.type)
        pass

    # Phase 2: Update State
    # Modify game variables here

    # Phase 3: Render
    screen.fill(BACKGROUND_COLOR) # Clear screen
    # Draw game elements here
    pygame.display.flip() # Update the display

# After the loop exits
pygame.quit()

Diagram showing the cyclical nature of a game loop

Handling Events

Pygame collects all user actions and window events in an event queue. You access these events using pygame.event.get(), which returns a list of all events that have occurred since the last call.

# Inside the main loop
for event in pygame.event.get():
    # Check the type of the event
    if event.type == pygame.QUIT:
        # Handle window closing
        pass
    # Check for other event types...

Handling Mouse Events

Mouse actions generate specific types of events.

Common Mouse Events

  • pygame.MOUSEMOTION: Occurs when the mouse cursor moves over the window.
  • pygame.MOUSEBUTTONDOWN: Occurs when a mouse button is pressed down.
  • pygame.MOUSEBUTTONUP: Occurs when a mouse button is released.
for event in pygame.event.get():
    if event.type == pygame.MOUSEMOTION:
        # Code to run when the mouse moves
        pass
    
    if event.type == pygame.MOUSEBUTTONDOWN:
        # Code to run when a mouse button is pressed
        pass
        
    if event.type == pygame.MOUSEBUTTONUP:
        # Code to run when a mouse button is released
        pass

Reading Event Data

Event objects contain attributes that provide details about the event.

  • event.pos: A tuple (x, y) representing the mouse coordinates at the time the event occurred.
  • event.button: An integer indicating which mouse button was pressed or released (only for MOUSEBUTTONDOWN and MOUSEBUTTONUP events).
    • 1: Left button
    • 2: Middle button
    • 3: Right button
    • 4: Scroll wheel up
    • 5: Scroll wheel down
# Example of accessing event attributes
for event in pygame.event.get():
    if event.type == pygame.MOUSEMOTION:
        mouse_position = event.pos
        # Use mouse_position (e.g., print it, draw something there)
        # print(mouse_position) # Example from MQ10

    if event.type == pygame.MOUSEBUTTONDOWN:
        click_position = event.pos
        button_number = event.button
        # Use click_position and button_number
        # print(button_number) # Example from MQ55
        
        # Check which button was pressed
        if event.button == 1:
            # Code for left-click
            pass
        elif event.button == 3:
            # Code for right-click
            pass

GIF showing mouse tracking coordinates printing to console GIF showing mouse button numbers printing to console

State Management

State management involves using variables to keep track of information that persists between frames or events. Boolean flags and position variables are common examples.

The Boolean Flag

A boolean variable (True or False) is useful for tracking simple on/off states, such as whether a drawing action is currently active.

# Initialize state outside the loop
is_drawing = False

# Inside the event loop:
for event in pygame.event.get():
    if event.type == pygame.MOUSEBUTTONDOWN:
        # Set the flag when drawing starts
        is_drawing = True
        # print("State changed: is_drawing is now True") # Example from MQ30

    if event.type == pygame.MOUSEBUTTONUP:
        # Unset the flag when drawing stops
        is_drawing = False
        # print("State changed: is_drawing is now False") # Example from MQ30

# Inside the update or render phase:
# Use the flag to control behavior
if is_drawing:
    # Perform drawing actions only when the flag is True
    pass

GIF showing console output for state changes on mouse down/up

Storing Positions

Variables can store coordinate tuples (x, y) to remember locations, such as the starting point of a line or the position of the last click.

# Initialize state outside the loop
last_pos = None # Use None to indicate no position is stored initially

# Inside the event loop:
for event in pygame.event.get():
    if event.type == pygame.MOUSEBUTTONDOWN:
        # Store the position when the button is pressed
        last_pos = event.pos

    if event.type == pygame.MOUSEBUTTONUP:
        # Reset the position when drawing stops
        last_pos = None

    if event.type == pygame.MOUSEMOTION:
        # If drawing is active and a last position exists
        if is_drawing and last_pos is not None:
            current_pos = event.pos
            # Draw something using last_pos and current_pos
            # pygame.draw.line(screen, COLOR, last_pos, current_pos, WIDTH) # Example from MQ50
            # Update last_pos for the next motion event
            last_pos = current_pos

GIF showing continuous line drawing

Drawing Basic Shapes

Drawing in Pygame happens on a Surface object, typically the main screen surface.

Drawing Circles

Draws a circle on a surface.

pygame.draw.circle(surface, color, center_pos, radius)

  • surface: The Surface object to draw on.
  • color: An RGB tuple (e.g., (255, 0, 0) for red).
  • center_pos: A tuple (x, y) for the center of the circle.
  • radius: The radius of the circle in pixels.
# Example: Draw a red circle at (100, 150) with radius 20
RED = (255, 0, 0)
center = (100, 150)
radius = 20
pygame.draw.circle(screen, RED, center, radius) # Example from MQ35

GIF showing a red dot appearing on click

Drawing Rectangles

Draws a rectangle on a surface. This function requires a pygame.Rect object to define the rectangle's position and size.

pygame.draw.rect(surface, color, rect_object)

  • surface: The Surface object to draw on.
  • color: An RGB tuple.
  • rect_object: A pygame.Rect object defining (left, top, width, height).

pygame.Rect(left, top, width, height)

# Example: Draw a blue rectangle at (50, 50) with width 100 and height 50
BLUE = (0, 0, 255)
rect_x = 50
rect_y = 50
rect_width = 100
rect_height = 50
my_rect = pygame.Rect(rect_x, rect_y, rect_width, rect_height)
pygame.draw.rect(screen, BLUE, my_rect) # Example from MQ70 (body)

Simple robot made of shapes

Drawing Lines

Draws a line connecting two points on a surface.

pygame.draw.line(surface, color, start_pos, end_pos, width)

  • surface: The Surface object to draw on.
  • color: An RGB tuple.
  • start_pos: A tuple (x, y) for the starting point.
  • end_pos: A tuple (x, y) for the ending point.
  • width: The thickness of the line in pixels.
# Example: Draw a black line from (10, 10) to (200, 50) with thickness 3
BLACK = (0, 0, 0)
start = (10, 10)
end = (200, 50)
thickness = 3
pygame.draw.line(screen, BLACK, start, end, thickness) # Example from MQ50

GIF showing continuous line drawing

Combining Concepts

By combining event handling, state management, and drawing functions, you can create interactive drawing programs. Events like MOUSEBUTTONDOWN, MOUSEBUTTONUP, and MOUSEMOTION can trigger changes in state variables (like is_drawing or last_pos), and the drawing phase uses these state variables to determine what and where to draw on the screen. Checking event.button allows for different actions or drawing styles based on which mouse button is used.