Students new to games and computer graphics fall into two camps: ones that think mathematics is a real bore and of no real use, and others that realize it is akin to breathing. The fact is that if you want to be successful (and stay alive) in the domain, then you can’t deny the importance of mathematics. This doesn’t mean that learning about it should be a grind. What we find most exciting about teaching and learning about mathematics in the computer games and graphics space is that the equations and numbers come alive through visual representations that remain otherwise unseen in other fields. Throughout this book, you will learn the essential mathematics in games and graphics by exploring the theory surrounding each topic and then utilizing it in real-world applications.
To this end, throughout this book, you will not only gain an understanding of the essential mathematics that is used throughout games and graphics, but also apply its principles in one of today’s hottest programming languages: Python.
Note
As the content of this book relates to both computer graphics and computer games, rather than continually typing out the laborious phrase “computer graphics and computer games,” we will endeavor to refer to both collectively as graphics.
“Why Python?” we hear you ask. “Why not some fancy game’s engine?” Well, besides having Python programming as a great skill under your belt when it comes to applying for a job, Python with the assistance of PyCharm (our Integrated Development Environment – IDE), Pygame (a graphics interface), and PyOpenGL (a Python/OpenGL API) reveals much of the underlying technical processes hidden by game engines and brings you face to face with direct calls to the graphics APIs that access OpenGL and DirectX. It’s a more challenging way to learn about mathematics if you remove all the high-level methods available to you that hide how your applied mathematics programming skills are working.
Learning about the mathematics of computer games and graphics at this level is essential in your learning journey. In this ever-changing domain, as technology progresses, your theoretical level of the how’s and why’s of the topic can remain constant and make you a highly skilled and adaptive programmer. A deep-seated knowledge of the algorithms and equations running the APIs of contemporary games and graphics engines is critical and transferable knowledge that developers can take from one platform to another and from one API to another. It not only provides extra insight while troubleshooting and debugging, but also gives a programmer an intuitive understanding of what functionality an API might contain without actually knowing that API. It’s akin to understanding all the tools in Adobe Photoshop and being able to perceive what tools will be available in Affinity Photo without ever using it. Having good math skills blurs the line between what is possible and what is not.
Now that you know why you are learning about mathematics in the way presented throughout this book, it’s time to dive into getting your own development environment set up and exploring the anatomy of a simple graphics window that will become the basis of all our exercises moving forward. We will begin with a guided exercise in getting your own development environment setup using PyCharm. This will allow you to jump right into coding with as little fuss as possible. It removes the need to manually download and install packages and plugins that usually require knowledge of command-line install procedures, which can become laborious and vary between desktop machine setups. This means more time spent on coding to start using Python to open windows and explore the range of fundamental graphics drawing methods that will set you up for graphics development success.
In this chapter, we will cover the following topics:
As mentioned in the introduction, we will be using the programming language, Python, along with an editor called PyCharm and a plugin/graphics library called Pygame. You should be a programmer to embark on the content of this course but not necessarily a Python programmer, as someone with working knowledge in any procedural language will pick up Python quickly enough.
These are all cross-platform tools and can be used on Windows, macOS, and Linux. We’ll leave it up to you to find the relevant versions of the software for your machine, however, to get you started, download Python from python.org. As shown in Figure 1.1, under the Downloads tab, you can get the latest version of the software. At the time of writing, it is Python 3.10.0. It is highly recommended that you follow along with the exercises in this book using the versions shown in the book to reduce any errors you may come across in replicating the code. If you are reading this and there is a later version of Python available, you can find version 3.10.0 under the All releases option as follows:
Figure 1.1: The Downloads tab at python.org
Thus, the steps to get Python installed on your machine are as follows:
In order to code and compile with Python, we require an editor; for this, we will be using PyCharm. The same advice stands for version numbers of this software. At the time of writing this book, PyCharm is on version 2021.3. There is a Profession and a free Community version of PyCharm, but we will only require the free version for this book. To install PyCharm on your machine, do as follows:
Now that you have the fundamental software installed, we will proceed to create a basic graphics window before learning how to draw on the screen.
In this section, we will go through the process of setting up PyCharm and rendering a graphics window on the screen. To do this, follow these steps:
Figure 1.2: The opening PyCharm screen on an Apple Mac (the screen on other platforms will look similar but not the same)
You may want to take some time to look at the Customize section. This will allow you to set up colors, fonts, and other visual components. There are also many different settings and customizations you can make within PyCharm, and if you ever want to explore these, then we recommend a visit to the manual at www.jetbrains.com/help/PyCharm/quick-start-guide.html.
Figure 1.3: PyCharm’s New Project window and settings
Figure 1.4: The PyCharm interface and package installation window
Python, PyCharm, and Pygame are now set up, and you are ready to create your first graphics window.
For those new to Python
If you are new to Python but not programming, it is a straightforward language to pick up. To get up to speed quickly, any newbies are encouraged to read over the beginner’s documentation at https://wiki.python.org/moin/BeginnersGuide.
It’s time to create your first basic graphics window in PyCharm. To do this, perform the following steps:
Figure 1.5: Creating a new Python script file (steps 1-5)
import pygame
pygame.init()
screen_width = 1000
screen_height = 800
screen = pygame.display.set_mode((screen_width,
screen_height))
The preceding code imports the Pygame library, so you can access the methods provided by Pygame to set up graphics windows and display images. The specific method used in this case is set_mode(), which creates and returns a display surface object.
Tool tip
There are no semi-colons at the end of lines in Python. Although, if you accidentally use one because it’s second nature to you as a programmer, then it’s very forgiving and ignores them.
The editor will also insist on variables and methods being written in snake_case (www.codingem.com/what-is-snake-case/) where separate works are joined by a delimiter, such as an underscore. You can see this format in the previous code in the variable named screen_width.
When complete, the window will look like Figure 1.6.
Figure 1.6: Code entered into PyCharm to generate a basic graphics window
It is not the aim of this book to teach you Python or the ins and outs of the Pygame library as we want to focus on mathematics; however, short explanations will be given as we add new features. In this case, the first line ensures that the functionality of the Pygame package is included with the code, which allows us to use the methods embedded inside Pygame. Next, we initialize the Pygame environment on line 2. Finally, we create a screen (a graphics window or surface also known as a display). The width of this window is 1,000 pixels by 800 pixels in height.
If you are unsure of what the parameters of a method are, simply mouse over/hover your cursor the method and PyCharm will pop open a hint box with more information about the method.
Figure 1.7: Running code for the first time
If you’ve typed in the code correctly, a window with dimensions of 1,000 x 800 will pop open and then immediately close. It might be too fast to see, so try running it again. You will know the program has been completed without error as the console now visible at the bottom of the PyCharm window will display an exit code of 0, as shown in Figure 1.8:
Figure 1.8: When a program runs without error, it will return an exit code of 0
Note that once you’ve run code for the first time, it becomes available as a run option in the top toolbar and can be easily run again using the green play button at the top of the PyCharm window. Ensure that the filename next to the button is the one you want to run, as shown in Figure 1.9:
Figure 1.9: Running the previous code again
import pygame
pygame.init()
screen_width = 1000
screen_height = 800
screen = pygame.display.set_mode((screen_width,
screen_height))
done = False
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
pygame.display.update()
pygame.quit()
Tool tip
Instead of relying on braces, for example, ‘{‘ and ‘}’ to segment code blocks, Python relies on indentation, and at the end of a line with a Boolean expression, you will always find a full colon (:).
You’ve just created an endless loop that will keep running until the window is manually closed by the user. The done variable is initially set to false, and only when it becomes true can the loop end. pygame.event.get() returns a list of events the window has received since the last loop. These can be keystrokes, mouse movements, or any other user input. In this case, we are looking for pygame.QUIT to have occurred. This event is signaled by the attempted closing of the window. The final pygame.quit() method safely closes down all Pygame processes before the window closes.
Figure 1.10: Creating a new directory inside PyCharm
And that’s it. Your first basic graphics window. Keep a copy of this code handy as you will need to use it as the basis of all projects from this point forward. Whenever we ask you to create a new Python file in PyCharm, this code will be the jumping-off point.
Hints
To further help you with creating a window, consider the following points:
- If you haven’t used Python before but are familiar with other programming languages, the absence of brackets and braces for the sectioning of code will feel a little odd at first. Instead of brackets, Python uses indentation. You can read more about this at www.geeksforgeeks.org/indentation-in-python/.
- Python does not need semicolons at the end of lines.
- Whenever you encounter methods or properties used in the code that you are unfamiliar with, it is a good exercise for your own independent learning to investigate these in the Python and Pygame API listings as follows:
- For Pygame, see www.pygame.org/docs/genindex.html.
- For Python, see docs.python.org/3/library/index.html.
- As you may have noticed as you were typing out the code, Python can be fussier than other programming languages when it comes to formatting and syntax. PyCharm will give you suggestions for most formatting issues by showing warning symbols at the end of problem lines or drawing a rippled line under methods and variables. A right-click on these will reveal suggestions for fixes. For a more extensive list, however, see www.python.org/dev/peps/pep-0008/.
This section has been a whirlwind of an introduction to opening a basic graphics window. Knowing how to achieve this is fundamental to the exercises in the remainder of this book or the start of your own graphics or game projects, as it is the key mechanic that supports all these types of applications. In the next section, we will expand on your knowledge of the graphics window by exploring its coordinates and layout.
Remember drawing an x- and y-axis on paper in school and then plotting a point based on its x and y value? This was the beginning of your journey into the Cartesian coordinate system. You likely use it every day to locate positions on maps, in drawings, or on your computer screen. Fundamentally, it is a way of uniquely representing a location with a single value on a line, a pair of numerical coordinates on a plane (2D), or with a triplet of values in 3D. In fact, Cartesian coordinates even extend into four, five, and upward dimensions, though they aren’t relevant here.
The axes of the system have evenly spaced measurements, much like a ruler, and are used to determine where a location made up of coordinates is placed. For example, in one dimension there is only one axis, and going with popular convention, we will call this x. To plot x = 5 is to locate the value of 5 on the axis and place a point there. In two dimensions with the axes, x and y, and the coordinate (2, 3) where x is the first value and y is the latter, a point is placed where these values intersect. These examples are illustrated in Figure 1.11.
Figure 1.11: Cartesian plots of x = 5 in one dimension (a) and (2,3) in two dimensions (b)
The majority (if not all) of graphics applications work in two and three dimensions and as such we will reduce our discussion in this book to those with most applications in 3D. While the computer screen is 2D, it is also used to fake 3D; however, the mathematics applied still occurs within 3D calculations with the x-, y-, and z- axes. In working with graphics, we must therefore be aware of different ways of viewing Cartesian coordinates. In the next exercise, we will show the plotting of points in 2D and how Cartesian coordinates work in graphics.
To create a window with some plotted points defined by Cartesian coordinates, we perform the following steps:
import pygame
pygame.init()
screen_width = 1000
screen_height = 800
screen = pygame.display.set_mode((screen_width,
screen_height))
done = False
white = pygame.Color(255,255,255)
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
screen.set_at((100, 100),white)
pygame.display.update()
pygame.quit()
screen.set_at((200, 200),white)
The resulting screen image is shown in Figure 1.12 (note that the pixel locations have been enhanced with white squares so you can see them in print).
Figure 1.12: Pixel locations when plotted in a default window
What did you notice about the location of the pixels? Based on their position, where would you conclude the origin (0,0) of the window to be?
If you said the upper-left corner of the window, you would be correct. We all learn in school that the positive Cartesian coordinate system runs for positive x values to the right along the page and for positive y values up the page. However, in computer graphics, this isn’t true, and the coordinate systems will follow different conventions depending on the platform and tools. In this case, the x coordinates run as you would expect but the y values are inverted with positive y values going down the page.
Why? Because early graphics displays used physical, electron scan lines beginning in the upper-left corner of the display, scanning across, and then down. It doesn’t need to be like this anymore, but it just is.
Most game engines transform these coordinates so that the y-axis faces up.
However, as the astute computer graphics programmer that you are, it’s always best to figure out which way is up according to the coordinate system you are working with, either through the documentation or by running a few experiments of your own.
import pygame
pygame.init()
screen_width = 1000
screen_height = 800
screen = pygame.display.set_mode((screen_width,
screen_height))
done = False
white = pygame.Color(255, 255, 255)
def to_pygame_coordinates (display, x, y):
return x, display.get_height() - y
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
screen.set_at(to_pygame_coordinates
(screen, 100,100),
white)
screen.set_at(to_pygame_coordinates
(screen, 200,200),
white)
pygame.display.update()
pygame.quit()
In the preceding code, the new to_pygame_coordinates() method flips the y coordinate based on the screen height and returns a new set of (x, y) values for plotting the pixel basing the origin of the screen in the lower-left corner of the window. Though, after you’ve worked with graphics for a while, you’ll get used to the upper-left origin and as such we will assume the origin of the coordinates (0,0) to be the upper-left of the graphics window, unless stated otherwise.
Drawing rectangles
In the preceding figure, we used rectangles to enhance the size of the pixels to make them visible. To draw a point in a location in the window that is larger than a single pixel, we can draw a small rectangle or square instead. To do this, the code is as follows:
import pygame
pygame.init()
screen_width = 1000
screen_height = 800
screen = pygame.display.set_mode((screen_width, screen_height))
done = False
white = pygame.Color(255, 255, 255)
def to_pygame_coordinates(display, x, y):
return x, display.get_height() - y
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
position = to_pygame_coordinates
(screen, 100, 100)
pygame.draw.rect(screen, white,
(position[0],position[1],
10, 10))
pygame.display.update()
pygame.quit()
The definition of pygame.draw.rect can be found at https://www.pygame.org/docs/ref/draw.html#pygame.draw.rect. In short, a rectangle requires a screen, color, a starting location (identified by position in the code), and a width and height (we are using 10 in this example).
This task has shown you how to work with a window and the coordinates used within it. It’s a valuable skill as pixel-by-pixel is how every graphics application is written. It’s the nature of the display devices we use.
Note
After most code-along exercises in the Let’s do it… sections of this book, you will find a section like this that encourages you to apply the skills you’ve learned thus far. The answers to these exercises can be found at the end of the chapter.
Exercise A.
Find an image of the constellation representing the Leo star sign and draw those series of stars on the screen. An example of its layout is shown in Figure 1.13. Notice that we have also included a size factor for each star based on its relative brightness, where we used rectangles of different sizes to draw each one.
Figure 1.13: The constellation of Leo
When you have completed this and reviewed the answer at the end of the chapter, why not try and recreate your own star sign?
You are now an expert at opening graphics windows and have new-found skills at plotting pixels in that window using Cartesian coordinates. This skill is the essential underpinning of everything that gets drawn on a computer screen; it’s through the understanding of mathematics that you will gain throughout this book that you will be able to expand that single pixel into a world of complex 3D structures, colors, and animations. Some of these basic graphics primitives will be explored in the following chapter.
Exercise A:
import pygame
pygame.init()
screen_width = 900
screen_height = 500
screen = pygame.display.set_mode((screen_width, screen_height))
done = False
white = pygame.Color(255, 255, 255)
def draw_star(x, y, size):
pygame.draw.rect(screen, white, (x, y, size, size))
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
draw_star (121, 320, 15)
draw_star (327, 324, 15)
draw_star (691, 431, 20)
draw_star (697, 317, 10)
draw_star (626, 246, 30)
draw_star (343, 212, 10)
draw_star (653, 165, 10)
draw_star (773, 102, 10)
draw_star (822, 153, 10)
pygame.display.update()
pygame.quit()
18.191.234.62