< Back

Lecture 2- Tkinter Introduction

As usual, create a directory to hold today's activities: 

$ cd ~/cs170/labs
$ mkdir lab2 
$ cd lab2

Or, you can do it the slightly more efficient way: 

$ mkdir ~/cs170/labs/lab2 
$ cd ~/cs170/labs/lab2

Tkinter Overview

The Tk toolkit is an open source mechanism for creating graphical windows. As a matter of fact, it was used extensively for creating windows in the Linux environment, although most variants have moved away from this setup. The nice think about Tk is that it can be used to create "professional" looking windows, complete with file menus, buttons, etc.

Today, you are going to get an overview on how you can use Tk to create drawings, similar to your original introduction to Turtle.

Lab Activity 1
Drawing Fish (Again!)

Yes, I know you've drawn fish before. However, it is different not only in every language, but also in every graphical toolkit. So, You're doing it again!

Details

In a file called gone_fishing.py, create a function draw_fish(canvas, x, y), which draws a fish on the canvas, with the center of the fish placed on the specified coordinates. Your fish should look like the one featured below:

Use this function to draw some fish on the canvas

Hint

  • You will have to create a canvas, and pack that into your root window. All of the drawing methods belong to the canvas object, so you need a reference to that canvas in order to draw.

  • You only need to draw two arcs to complete a fish: one for the tail, and another for the head. You will need to use some math to figure out what coordinates to specify for the bounding rectangle.

 

Challenge

This is probably a little boring looking. Spruce it up a bit. You should be able to figure out how to change the background color of the canvas (maybe to blue, for water?). Add some details to the fish, such as eyes or gills. Get creative!

Lab Assignment 2
Bouncing Ball

Now that you know how to draw shapes in Tkinter, we can start performing animations in Tkinter as well. In Turtle, animations were easy because of the Turtle mainloop. With the graphics module, we had to manage our own animation loop. This is the same thing that we have to do in Tkinter. To practice with this, let's make a simple bouncing ball program.

Details

In a file called bouncing_ball.py, write a program that displays a ball that bounces around the screen. The ball should start in the upper left corner of the screen, and should move towards the bottom right section of the screen. The ball should not be able to leave the screen. If the ball is about to leave the screen, make the ball bounce away from the edge it was going to leave.

Hint

  • You will have to create a canvas, and pack that into your root window. All of the drawing methods belong to the canvas object, so you need a reference to that canvas in order to draw.

  • Remember that the create_oval method returns a tag that can be used to refer to the object that is drawn on the canvas. This means that instead of clearing the entire canvas, you can just move the ball you have drawn using the move method of the canvas.

  • You can use the coords method of the canvas to get the position of an element on the canvas. Remember that this returns 4 values, the upper-left x and y coordinates, as well as the lower-right x and y coordinates.

  • Your ball will basically be invisible unless you slow down the animation speed. in the Graphics module, we set the framerate to determine this. You will have to perform this step manually. You can use the sleep function of the time module to slow down the loop, and thus slow down the animation.

 

Challenge

My guess is that you used straight line movements for the bouncing ball program. This works for something like a pong game, but isn't very interesting. Change the movement of the ball so that it is non-linear.

Submission

When you have finished, create a tar file of your lab2 directory. To create a tar file, execute the following commands:

cd ~/cs170/labs
tar czvf lab2.tgz lab2/

To submit your activity, go to inquire.roanoke.edu. You should see an available assignment called Lab Assignment 2. Make sure you include a header listing the authors of the file.