Computer Science
Grade 9
20 min
4. Drawing Shapes and Colors
Learn how to draw basic shapes (rectangles, circles, lines) and use colors in Pygame.
What you'll learn
- Identify and differentiate between at least three shape drawing functions (e.g., rectangle, circle, line) and their corresponding parameters (e.g., coordinates, dimensions, radius) within a given programming environment with 100% accuracy.
- Apply color values represented in RGB or hexadecimal format to successfully change the fill and stroke colors of at least two different shapes drawn on a digital canvas.
- Explain the relationship between coordinate systems and shape placement by accurately predicting the position of a shape on a digital canvas when given its coordinates and dimensions in at least three different scenarios.
- Create a program that draws a complex scene consisting of at least five distinct shapes, each with a unique color, demonstrating the ability to combine shape drawing functions and color manipulation techniques.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Initialize a Pygame window and set its dimensions.
Define and use colors using the RGB tuple format.
Draw fundamental shapes like rectangles, circles, and lines onto the Pygame surface.
Correctly use functions from the `pygame.draw` module.
Explain and apply Pygame's coordinate system, where (0, 0) is the top-left corner.
Fill the background with a solid color and update the display to show their drawings.
Ever wondered how games like Pong or Snake are built from simple shapes? 🎮 Let's learn how to draw the basic building blocks of any 2D game!
This lesson introduces the fundamentals of drawing in Pygame. You will learn how to create a game window, define colors, and draw basic geometric shapes, which are the visual foundation for characters,...
2
Key Concepts & Vocabulary
TermDefinitionExample
SurfaceIn Pygame, a Surface is a blank canvas that you can draw on. The main window you see is the primary Surface, but you can create other Surfaces for images or text.`screen = pygame.display.set_mode((800, 600))` creates a main display Surface that is 800 pixels wide and 600 pixels high.
RGB Color ModelA method for creating colors by mixing Red, Green, and Blue light. In Pygame, colors are represented as a tuple of three numbers from 0 to 255.`(255, 0, 0)` is pure red, `(0, 255, 0)` is pure green, `(0, 0, 0)` is black, and `(255, 255, 255)` is white.
Coordinate SystemA 2D grid used to position items on the screen. In Pygame, the origin point (0, 0) is at the top-left corner. The x-value increases to the right, and the y-value increases downwards.A coordinate of `(...
3
Core Syntax & Patterns
Defining a Color
COLOR_NAME = (R, G, B)
Always define colors as a tuple of three integers, each between 0 and 255, representing Red, Green, and Blue. Assign them to variables with descriptive names for readability.
Drawing a Rectangle
pygame.draw.rect(surface, color, (x, y, width, height))
This is the standard function for drawing a filled rectangle. You must specify which surface to draw on, the color to use, and a tuple defining the rectangle's position (x, y) and size (width, height).
Drawing a Circle
pygame.draw.circle(surface, color, (center_x, center_y), radius)
This function draws a filled circle. You must provide the surface, the color, a tuple for the center's coordinates, and the radius (distance from the center to the edge).
The Basic Draw Lo...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
If a blue circle is drawn first, and then a smaller yellow circle is drawn at the same center point, what will be the visual outcome?
A.Only the blue circle will be visible.
B.The circles will be next to each other.
C.yellow circle with a blue ring around it.
D.Only the yellow circle will be visible.
Challenging
To perfectly center a rectangle with width `rect_w` and height `rect_h` on a screen with width `screen_w` and height `screen_h`, what is the correct formula for its top-left (x, y) coordinates?
A.x = (screen_w - rect_w) / 2, y = (screen_h - rect_h) / 2
B.x = screen_w / 2, y = screen_h / 2
C.x = (screen_w / 2) + (rect_w / 2), y = (screen_h / 2) + (rect_h / 2)
D.x = rect_w / 2, y = rect_h / 2
Challenging
A student's code is meant to draw a green circle on a white background. The window opens but stays black. Which of these single errors is the most likely cause? CODE: `screen.fill(255, 255, 255)`, `pygame.draw.circle(screen, (0, 255, 0), (100, 100), 50)`
A.The circle is being drawn off-screen.
B.The circle's color is defined incorrectly.
C.The `screen.fill` color is formatted incorrectly, causing a crash before the display can be updated.
D.The radius of the circle is too small to be seen.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeMore from VI. Game Development Basics with Pygame
Computer Science for other grades
Frequently asked questions
What grade level is "4. Drawing Shapes and Colors"?
4. Drawing Shapes and Colors is a Grade 9 Computer Science lesson on ExcelOS.
What will I learn in 4. Drawing Shapes and Colors?
You'll be able to: Identify and differentiate between at least three shape drawing functions (e.g., rectangle, circle, line) and their corresponding parameters (e.g., coordinates, dimensions, radius) within a given programming environment with….
Is "4. Drawing Shapes and Colors" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with 4. Drawing Shapes and Colors?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.