Python executes code quickly; programs that show animated graphics or take mouse or keyboard input spend quite a lot of time waiting for the human. For example, here is a Python program that counts from 1 to 1000; you can see that Python printing is much quicker than the eye.
What if you wanted to have the counting program pause one second in between each number? Here’s one way to do it. The browser version of cs1lib.py provides a function set_timeout that calls a function after a certain amount of time has expired:
The parameters are the name of the function, the number of milliseconds to wait between calls to that function, and the number of times to call the function. We call the function count a callback function, and we say that set_timeout registers a callback, because set_timeout records count as a function that should be called (back) later under some conditions.
You can think of the way that the program is being run is that somewhere, Python is running a while loop. That loop waits a long enough time, and then calls the specified function.
The call to clear_timeouts is needed because, in the browser, timeouts are set globally, for the entire browser; if you created new timeouts without first getting rid of the old timeouts, you’d have two sets of timeouts, causing some very strange behavior.
Objective: Use a callback to trigger a delayed call to a function you write.
In the browser version of Python, you can import a function called alert from the module browser. Alert takes a single string as a parameters. Try calling alert now with a sample string.
Now use set_timeout to display an alert with some text after 10 seconds. You should call set_timeout with only two parameters, since that’s the proper way to schedule a single event.
Hint. Notice alert takes a parameter, but set_timeout only works properly with functions that do not take any parameters. So you can’t call alert directly. Maybe you could define another function that didn’t take any parameters…
Here is a solution.
Callbacks are are very useful whenever you want to do something over and over again, with some delay between the calls. One example is a graphical animation. Here’s a flip book animation on YouTube. Think of how a flip-book animation works:
You can use a similar approach to draw an animation using Python:
Here’s an example, an animation of a growing circle.
There’s just one state variable, radius. It keeps track of how large the circle is in the current frame. At the end of each frame, the radius is increased by 1. There’s also a second parameter passed to start_graphics, the number of frames of the animation to draw. By default, the function to draw a frame will be called about 40 times per second (the frame rate).
We’ll often see a similar pattern to that in the growing_circle function when we create animations. There’s a loop to draw each frame of the animation, and there are state variables that indicate how to draw each frame (such as the radius of the circle in animate_circle). Before entering the loop, we give the state variables initial values. Within the body of the loop, we do five things to produce each frame of the animation:
clear() to clear the graphics window, erasing the previous frame.Here’s a larger example:
Before continuing, go through this code and make sure that you understand how it works.
Here’s one of Tom Cormen’s favorite animations. Psychedelic!
Try figuring out why it does what it does.
Objective: Create a simple animation using a global variable to represent state.
Write an animation of a ball of radius 10 that moves from the left side of the screen to the right side of the screen at a speed of 1 pixel per frame.
It’s often necessary for graphics programs to get mouse and/or keyboard input from the user. In start_graphics, you can give a named parameter mouse_press that gives the name of a function to be called when the mouse button is pressed, like this:
We’ll see more about named parameters soon, but for now it’s enough to know that instead of placing the value for the named parameter in the correct location in the function call, we can use the name of the formal parameter and = to assign the desired value to a particular formal parameter.
In the example above, clicked is the callback function. The header for a callback function for the mouse press event should take two parameters that represent the x and y coordinates of the mouse, and one parameter that is a reference to an object holding some data. When clicked is called by cs1lib, the values of the mouse coordinates will be copied into these formal parameters.
You should not call drawing functions from within mouse or keyboard callbacks. Instead, you should change state variables within the callbacks, in such a way that the drawing function changes its behavior appropriately. There’s a good reason for this; in software that allows the window to be resized, the drawing code might be called to redisplay the window at a larger size, and that drawing process might overwrite anything not drawn using that function.
The drawing approach described here is a simple example of what is sometimes called a model-view-controller design pattern. The global variables contain a model of the world or system that we are interested in. The drawing function takes that model, and draws, or views that information. The callbacks provide control by allowing the model (the state) to be changed. Separating the drawing and control code from the model allows the model to be saved to disc or transmitted over the network: it’s just data.
The mouse_press function is only called once when a mouse button is pressed. Unless you release the button and press it again, the callback won’t get called again. We need a callback that triggers whenever the mouse is moved, whether or not the button is pressed. Here’s an example:
Notice that the mouse_move callback function that you write takes three parameters: the x and y coordinates of the mouse location.
To compute the distance d between two points with coordinates (x1, y1) and (x2, y2), we use the Pythagorean theorem: $d =\sqrt{(x_2 - x_1) ^2 + (y_2 - y_1)^2}$. In Python, how do you square a number? We use a special technique, known to only a few highly trained mathematicians. The technique is called “multiply the number by itself.”
The following example shows how to drag out a circle as you would if you were writing a graphical editor.
cs1lib.py also provides a mechanism to set callback functions for key press events. You can set a function that will be run when a key is pushed down (key_down), or when the key is released (key_up).
Here’s an example of using a key_press function.
Your key_press function may fire multiple times if you keep holding the key; this is called key repeat and it is why you can hold the spacebar to get multiple spaces in a text editor.
If you’d like to keep track of when a key is pressed, you can watch for both key down and up events. For example, if you’d like a character on the screen to move upwards while the ‘w’ key is pressed, you could record when the ‘w’ was first pressed, and keep moving the character upwards as long as the ‘w’ key has not been released.
Objective: Edit complex code to add behavior that depends on keyboard input.
Imagine you would like to write a game where a smiley face chases a bouncing ball. Let’s write the keyboard control for the smiley face. Pressing ‘w’ should cause the smiley to move upwards, ‘a’ to the left, ‘s’ downwards, ‘d’ to the right.
I’ve written much of the code, but you’ll still need to do a few things. You’ll need to set keyup as a callback to be run when the key is released. Once you do that, the left and right controls should work; add the up and down controls by editing keydown, keyup, and draw_frame.