Interactions with the Keyboard and Mouse for Dynamic Graphics Programs

For computer games, graphics applications, and mobile applications, the mouse is a key way of interacting with graphics windows. In this case, by mouse, I also include finger touches as they are processed in almost the same way. The mouse is a pointer that moves across the screen and represents a pixel location (usually at the tip of the arrow if that is the cursor you are using). This location is represented as an (x, y) coordinate in the 2D plane, that is, the graphics window.

Although technically you could create graphics applications without the need for interaction, having these peripherals available becomes useful when testing out an application, moving around in the virtual world, and interacting with models and user interface objects. Hence, I’m adding this chapter early to allow the ability to explore graphics concepts in later chapters with such input. This knowledge will also serve you well...

Technical requirements

In this chapter, we will be using Python, PyCharm, Pygame, and PyOpenGL, as used in the previous chapters. Before you begin coding, create a new folder in the PyCharm project for the contents of this chapter called Chapter 7.

The solution files containing the code can be found on GitHub at https://github.com/PacktPublishing/Mathematics-for-Game-Programming-and-Computer-Graphics/tree/main/Chapter07in the Chapter07 folder.

Working with mouse interactions

The position of the mouse on the screen is recorded as a pixel location based on the screen coordinate system. As you discovered in earlier chapters, the screen coordinate system by default has its origin in the upper-left corner of the graphics window.

The actions that can be taken with a mouse include the following:

• Pressing down any of the mouse buttons with a finger, including the left, right, and middle buttons
• Releasing a finger press on any of the mouse buttons
• Moving the mouse without pressing any buttons
• Dragging, which is moving the mouse while a button is being held
• Scrolling, in which the user’s finger turns the mouse wheel, or on a touchpad or touch mouse, gliding the finger over the surface either vertically or horizontally

The mouse can be used for selecting objects, moving objects, clicking on buttons or input fields, moving the camera, and drawing on the screen. Many of these functions will be...

Adding keyboard commands

Once you’ve worked with mouse events, keyboard events are a breeze. In fact, key presses have fewer events associated with them than a mouse, though you can use multiple keys at a time for complex commands. But basically, a key possesses the down and up events. With respect to graphics environments, keys are used to influence what is going on in the scene. The most common keys in games, for example, are the arrow keys or WASD for moving an object and the spacebar for jump or fire. An example of combination keys would be holding down the Shift key while using the arrows to make the object move faster.

In the following exercise, you will program keys to move an object in the 3D environment.

Let’s do it…

To move a 3D object, we can use the Transform class and modify the position of the model when a key is pressed. To achieve this, follow these steps:

1. In the Transform class, we will be adding a new function that will move an...

Summary

In this chapter, we have focused on using the mouse and keyboard to interact with a graphics application. The basic functions available in Pygame have been explored to assist you in getting up and running with these commands. While not all principal components are required to understand mathematics in graphics, knowing these input methods does make the programs we can create to investigate mathematics more engaging. As you progress through the chapters, you will find that the mouse and keyboard will come in handy to demonstrate various key aspects presented in this book. As we move forward, other ways of using these input devices will be explored.

In the next chapter, the mathematics will step up a gear as we start getting into the fundamental concepts underlying most of the mathematics in graphics and games: vectors.

Answers

Exercise A:

..
green = pygame.Color(0, 255, 0)
mouse_down = False
last_mouse_pos = (0, 0)
button = (0, 0, 100, 30)
while not done:
    pygame.draw.rect(screen, green, button)
    for event in pygame.event.get():
        ..
        elif event.type == MOUSEMOTION:
            mpos = pygame.mouse.get_pos()
            if button[0] < mpos[0] < 
                     (button[0] + button[2]) and \
                button[1] < mpos[1] < (button[1] + button[3]):
                print("Mouse Over")
    pygame.display.update()
pygame.quit()

Exercise B...