Last time we started talking about objects and methods.

Technically, almost everything in python is an object. Most objects have both data and functions (now called methods), together in one thing (the object).

Here are some simple examples of calling methods on a python list object:

The list methods used above are append() (add an item to the list), reverse() (reverse the order of the list), sort() (sort items from low to high), and count() (count how many are in list). There are other python list methods available.

Here are some string methods, acting on a string object:

The string methods used above are: upper() (return uppercase version of string), count() (count how many are in string), index() (show where char is in string), and isalpha() (return True if string in only alphabetic chars). There are many other python str methods available.

Note: strings are immutable, so even calling S.upper() doesn’t change what is stored in S (it just returns a new, uppercase, string). If you want to change what is stored in the variable S, you could use S = S.upper().

Using objects in your programs is just a different way to organize your data, but also provides advantages as programs and programming teams get larger and more complex (divide and conquer, code reuse, easier to read/write/debug, etc).

The syntax for calling methods on objects is object.method(), where the method may or may not require arguments.

This week we will learn the Zelle graphics library, which is an excellent example of using objects (i.e., it’s easy to see the objects, because they are graphical objects, like circles and squares, drawn on the screen).

To use the Zelle graphics library, we need to import the classes and functions with this at the top of our programs:

(and don’t name your program graphics.py, because that’s what the Zelle graphics file you are importing is named).

This program creates a graphics window and draws a circle in the middle of the window:

Things to note:

And here’s the image:

Look through the documentation on the Zelle graphics library and learn about all of the possible objects (Circle, Rectangle, Text, etc), as well as the methods that go with each object (draw(), move(), setFill(), etc).

See if you can draw one of these simple graphics pictures

In the tictactoe.py file I gave you, I make a graphics window that is 600x600, then call the drawLines() function (which doesn’t work yet).

Instead of working with a graphics window that is 600x600, and trying to figure out where the vertical lines go (x=200 and x=400), we can simplify the math and change the coordinates of the window to be 0 to 3, so the vertical lines are at x=1 and x=2. This is what the setCoords() method does. It also flips the y axis, so the y coordinate increases from the bottom of the window to the top.

Here’s what the new code looks like:

And here’s what that does to the window coordinates:

If you run the above tictactoe.py code again, now the drawLines(gw) call correctly draws the first vertical line at x=1.

We can create points for the second vertical line, just as we did for the first one, or we can just copy (clone) the first line and move it over by 1 in the x direction. Here’s how clone() and move() are used:

Using clone() copies everything: the position, the color, and the line width.

Can you add to drawLines() to draw the horizontal lines?

Once we have the board drawn, it’s time to get clicks from the user and put Xs and Os on the board.

Let’s start with just getting 3 clicks and seeing where the user clicked (not what we ultimately want, but good for testing).

Back in main() let’s add a for loop to get the clicks:

If you run that, you should see the Point() objects (printed to the terminal) that are created with each click. Notice also that they have x and y coordinates, which we can use to figure out which square the user clicked.

For example, if the user’s click is this:

That means they clicked in the middle row (y=1.59), in the last column (x=2.37).

But we don’t want to put a mark (an X or an O) exactly where the user clicks. Instead, we want to make a mark in the center of the square they clicked. For the above click, we want to do something like this (put an X in the square in the middle row (y=1.5), in the far right column (x=2.5)).

So we need to change the x,y coordinates of the click into the x,y coordinates of the center of the square they clicked.

Here are three click points, all in the same square as the example above. Can you see how they are all similar? How can we get from those x,y coordinates to x=2.5,y=1.5?

The answer: truncate and add 0.5, and you should get the x,y coordinates of the square that was clicked.

So here’s the code to get a click from the user, pull out the x,y coordinates of the click point, truncate them (using int()), and then add 0.5 to get the square’s center point:

The above uses the getX() and getY() methods to pull out the x,y coordinates from the click point.

And instead of just printing the center point, we want to put some text there. We can do this by creating a Text() object:

The above should get 3 mouse clicks from the user, and whichever square they click, put a large "X" in the center of that square. Try it to make sure it works, then see if you can make it alternate Xs and Os (first click is an X, next an O, etc).

So far we’ve just been using simple colors, like "red", "yellow", and "green". The Zelle graphics library includes a color_rgb() function that allows us more control over the colors. Here’s a quick example of using color_rgb():

The color_rgb() uses three integer arguments, one for the amount of red, one for the amount of green, and one for blue. Each amount is an integer from 0-255, where 0 means none, and 255 means "as much as possible". So, for example, white would be color_rgb(255,255,255), and black would be color_rgb(0,0,0), and the green above would have some red and blue (50), but more green (205).

Both of these methods look for a key press, but getKey() pauses the whole program, waiting for a key press. This is not what we want during an animation, where things are moving, and we don’t want to pause the animation. Using checkKey() we can check if a key has been pressed, and do something if it has. However, if a key has not been pressed, the program just keeps going.

Here’s a simple while loop that, if a key has been pressed, prints out what key was pressed. Also, if the 'q' key was pressed, it quits the program:

We’re using the boolean flag variable done to control the loop. The flag is only set to True if the 'q' key is pressed, so that’s the only way to end the loop.

Also, checkKey() returns None if no key was pressed (it checks for key presses many times per second). So if the key variable is not None, we must have received a key press, so we print it.

If you try the above code you’ll see printouts for any keys you press. Here’s what I see in the terminal when I press these keys: z w Enter Esc Space q

We can use the loop above to animate an object. Inside the loop we will simply move() an object a very small amount (eg, x=1). This will move the object to the right in our graphics window:

If you run the above, the circle will quickly move off to the right. In fact, it moves so fast it may be hard to see. If we slow down the program, the animation looks better (smoother).

Python has a sleep() function in the time library we can use. Adding a sleep(0.01) call in the loop will pause the program for 0.01 seconds, making the animation much slower.

Finally, instead of just moving a circle to the right, we would like to turn it around when it gets to the right side of the graphics window. We can use the circle methods getCenter() and getRadius() to figure out the position of the circle (since it is moving all the time), then change it’s velocity when it "hits" the right wall.

Add to the above the ability to change direction when we hit the left wall.