Lecture 2 - CPSC170 Setup and CPSC120 Review

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 thing about Tk is that it can be used to create "professional" looking windows, complete with file menu's, 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/pyGame.

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 centered 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
Pong (Part 1)

Back to the old classics! Now that you know how to draw to a Tk canvas, we can start manipulating the object you draw to the canvas. Instead of re-drawing a rectangle every time, we can actually update its location!

Pong is a slightly larger program. So today, we are just going to worry about the paddles. The rest of the program (with the animated ball) will come on Friday.

Details

Create a program in a file called pong.py, that allows two different player to control two different pong paddles. Each pong paddle will be represented by a single rectangle on either side of the window.

One of the players paddles will be controlled with the mouse, while the other will be controlled by the keyboard. The keyboard player should use the up and down arrow keys to change the position of their paddle, while the mouse player should change the y location of the paddle by moving the mouse as the left button is depressed.

Make sure you keep both paddles on the screen at all times!

Hint

  • Remember, the create_rectangle method returns an ID that can be used to later change the created object. So you'll need to keep track of one for each of the paddles.

  • You will need to bind both the <B1-Motion> and the <Key> events, and you will need an event handler for each one of them.

    The event object for the mouse will have x and y attributes, the coordinates of the mouse in the canvas. The event object for the keyboard will have a keysym attribute, which will describe which key was pressed.

  • The keyboard controlled player can change the paddle by using the move method, but the mouse controlled player will have to use the coords method to update their paddle's position.

 

Challenge

Using rectangles is fine, but kind of a bit boring. A "real" pong game wouldn't use a simple rectangle for the paddle. Instead, they would use images for the paddles!

Search on google, or use GIMP to create your own paddle images. Then, look at the documentation for the Tk Canvas object, as well as the PhotoImage documentation. Load your images in, instead of using the rectangles. Can you make the paddle images you are using the same size as the rectangles, without manipulating the image manually?

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 cseval.roanoke.edu. You should see an available assignment called Lab Assignment 2. Make sure you include a header listing the authors of the file.

In-class Notes

Last modified: Thu Jan 16 14:02:02 EST 2014