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:

1. Visit python.org and download a version of Python relevant to your operating system.
2. Run the downloaded file and follow the directions to install the software.

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:

1. Visit www.jetbrains.com/PyCharm/download.
2. Download a version of the installer relevant to your machine.
3. Run the installer to set up PyCharm.

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:

1. Open PyCharm. The first window will appear as shown in Figure 1.2.

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.

2. Next, select the New Project button on the Projects page of the startup window. A window like what is shown in Figure 1.3 will appear.

Figure 1.3: PyCharm’s New Project window and settings

3. Next, we need to set up our new project as follows:
   1. For Location (1), create a new folder for your files. Unlike a single source file such as what you might get with a Word document, a Python project can consist of many files. Therefore, instead of specifying a single file name, you must specify a folder. Call it Mathematics.
   2. In the field for Base interpreter (2), ensure that you select the version of Python that you downloaded and installed. It’s possible to have more than one version of Python installed on your machine. This is useful if you are working on different projects for clients as you can set the version when you create a new project.
   3. When you first open the New Project window, the Create a main.py welcome script tickbox (3) will be ticked. We don’t require a default main.py script and therefore you should untick it.
4. Once the project settings have been entered, click on the Create button.
5. As shown in Figure 1.4, after PyCharm opens the new project window, it will display a column on the left with the folder structure (1). By clicking on Python Packages at the bottom of the window (2), a new section will be revealed where you can search and install packages. In the search section (3), type Pygame. This will bring up a list of packages below the search area. Select the one at the top that says Pygame, and then on the right, click the Install button (4). Once Pygame has been installed, you can close the packages section (5).

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:

1. Right-click on the project folder (1), as shown in Figure 1.5.

Figure 1.5: Creating a new Python script file (steps 1-5)

2. Select New > Python File (2).
3. In the popup window, enter the name of your new Python script (3). In this case, it will be HelloWindow.py. There’s no need to add the .py suffix as PyCharm will add this for you. Hit the Enter/Return key.
4. Once the file has been created, you will see it in the Project section of PyCharm (4).
5. The file will also be open and displayed on the left as a tab title (5). The window below the tab is where you will type in your code as follows:

   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.

6. The code can now be run. To do this, right-click on the HelloWindow.py filename in the Project window and then select Run ‘HelloWindow’, as shown in Figure 1.7:

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

7. In its current state, the graphics window isn’t much help to us if it won’t stay open. Therefore, we need to force it to stay open. You see that as the code executes line by line, once it reaches the end, the compiler considers the program to be finished. All graphics windows need to be forced to stay open with an endless loop that runs until a specific condition is reached. Game engines inherently have this built in and call it the main game loop. As you will discover in Chapter 6, Updating and Drawing the Graphics Environment, the main loop is the heartbeat of all graphics programs. In this case, we must create our own. To do this, modify the code by adding the highlighted text to your program as follows:

   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.

8. Run the program again. This time, the graphics window will stay open. It can be closed using the regular window closing icons that appear on the top bar of the window (on the left in Mac OS and on the right in Windows).
9. Because code will be reused and updated from chapter to chapter, the best way to organize it all would be to place all the code for a chapter into its own folder. So, let’s create a folder for Chapter One. To do this, right-click on the Mathematics project folder at the top and then select New > Directory, as shown in Figure 1.10. Name the folder Chapter_One.
10. Drag and drop HelloWindow.py into the new folder. PyCharm will ask you to refactor the code and it’s fine to go ahead and do so. You can now keep all the code from any chapter in one place even when the same script names are used.
11. 

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.