• Home
  • Textbooks
  • Mathematics for Game Programming and Computer Graphics: Explore the essential mathematics for creating, rendering, and manipulating 3D virtual environments
  • Interactions with the Keyboard and Mouse for Dynamic Graphics Programs

Mathematics for Game Programming and Computer Graphics: Explore the essential mathematics for creating, rendering, and manipulating 3D virtual environments

Penny de Byl

Chapter 7

Interactions with the Keyboard and Mouse for Dynamic Graphics Programs - all with Video Answers

Educators


Section 1

Working with mouse interactions

Problem 1

Create a new Python script called MouseDrawing . py and start with the following code:
import pygame
from pygame.locals import *
pygame.init ()
screen_width $=800$
screen_height $=800$
screen = pygame.display.set_mode ( (screen_width,
screen_height))
done $=$ False
white $=$ pygame. $\operatorname{Color}(255,255,255)$
while not done:
for event in pygame.event.get ():
if event. type $==$ pygame. QUIT:
done $=$ True
elif event. type $==$ MOUSEBUTTONDOWN :
pygame.draw.rect (screen, white,
(pygame.mouse.get_pos (),
$(5,5)))$
pygame.display.update ()
pygame.quit ()
When run, this script will allow you to draw a small square at the location of the mouse when you click a mouse button.

Check back soon!
11:13

Problem 2

Modify the code to only draw squares when the left mouse button is pressed with the following:
elif event.type $==$ MOUSEBUTTONDOWN :
if event.button $==1$ :
pygame.draw.rect (screen, white,
(pygame.mouse.get_pos (),
$(5,5)))$
Be sure to add an indent after checking for the button value. In this case, you'll be checking for a left-click.

Jordan Gassaway
Jordan Gassaway
Numerade Educator

Problem 3

You can also check for other buttons using the values from 2 to 5 , as follows:
$\bullet$ 1: Left-click
$\bullet$ 2: Middle-click
$\bullet$ 3: Right-click
$\bullet$ 4: Scroll up
$\bullet$ 5: Scroll down
Try it out for yourself.

Check back soon!

Problem 4

We will now modify the code to draw when the mouse is moved and the left mouse button is pressed down. Change your code like this:
mouse_down $=$ False
while not done:
for event in pygame.event.get ():
if event.type $==$ pygame.QUIT:
done $=$ True
elif event.type $==$ MOUSEBUTTONDOWN and \
event. button $==1$ :
mouse_down $=$ True
elif event.type $==$ MOUSEBUTTONUP and \
event. button $==1$ :
mouse_down $=\mathrm{False}$
elif event.type $==$ MOUSEMOTION and \
mouse_down is True:
pygame.draw.rect (screen, white,
(pygame.mouse.get_pos (),
$(5,5)))$
pygame.display.update ()
In the preceding code, a Boolean is created to keep track of the state of the mouse button. Then, the if-else statement is expanded to set the mouse_down value to True when the mouse button is pressed down and then to False when it is released. When you run this, you will be able to draw in the window with the mouse. Notice, though, that if you draw quickly, there will be large gaps between the squares, as shown here:
(Figure can't copy)
The reason for the large gaps is that you can update the position of the mouse faster than the main loop can keep up with your movements.

Check back soon!
03:35

Problem 5

To draw a continual line in the window, instead of single squares, we need to draw a line between the last position of the mouse and the next position of the mouse. This will then draw the line to bridge any gaps if the mouse moves too fast for the main loop. This means storing the position of the mouse in the last loop and then drawing a line from the last position of the mouse to the position of the mouse in the current loop. You can do it like this:
last_mouse_pos $=(0,0)$
while not done:
for event in pygame.event.get () :
elif event.type == MOUSEBUTTONDOWN and \
event.button == 1:
mouse_down = True
last_mouse_pos = pygame.mouse.get_pos()
..
elif event.type == MOUSEMOTION and \
mouse_down is True:
pygame.draw.line(screen, white,
last_mouse_pos,
pygame.mouse.get_pos(),
5)

last_mouse_pos = pygame.mouse.get_pos()
pygame.display.update()
Instead of drawing the square as a point under the mouse, a line is created with the pygame. draw. line () function. It takes as parameters the screen, line color, starting pixel position, ending pixel position, and line width.
You will now have the ability to scrawl in white on the window, as shown in Figure 7.2:
(Figure can't copy)
Often, when using a mouse in a graphics environment, the user will want to click on a button or object. This involves calculating whether the mouse position is inside the visual boundaries of the object. For a button, which is basically a rectangle, the mouse position must be inside the range of the button's top-left and bottom-right coordinates, as shown in Figure 7.3:
(Figure can't copy)
Given these values, the logic to determine whether the mouse is inside the button boundaries is as follows:
if $x<m x<(x+$ width $)$ and $y<m y<(y+h e i g h t)$

Jordan Gassaway
Jordan Gassaway
Numerade Educator