Syllabus 20091103

Live Loops with PyGame

We are using pygame today!

Installing PyGame

sudo apt-get install python-pygame

Checking that PyGame is installed, start python from the command-line, then type:

import pygame

Save the following to a file, do not name your file "pygame.py" or you will prevent yourself from importing the pygame module!

import sys, pygame
pygame.init()

width, height = (640, 480)
screen = pygame.display.set_mode((width, height))
clock = pygame.time.Clock()

while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT or \
          (event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE):
            sys.exit()

    mx, my = pygame.mouse.get_pos()
    c = min(mx, 255)
    screen.fill((c, 0, 0))

    pygame.display.flip()
    clock.tick(30)

Try adding the following 2 lines to the code, and see what it does:

    mx, my = pygame.mouse.get_pos()

    slider = float(mx) / width
    print slider

    c = min(mx, 255)

By dividing the mouse position by the width (notice the use of float), we create a "slider value", or a fractional number that goes from 0 to 1. A "slider" value works like the sliding control of an audio or lighting mixer, when you multiply it by another number, the result goes from 0 until that number. In this way you can translate a number from one range to another. In this case we can translate the x-position of the mouse into the amount of red drawn to the screen. We simply multiply by 255 (the maximum color value), and use the int function to force the result to be an integer (which a color value is expected to be).

    mx, my = pygame.mouse.get_pos()
    slider = float(mx) / width
    c = int(slider * 255)
    print slider, c
    screen.fill((c, 0, 0))

Note that the print command is useful for debugging (though removing, or commenting help the code run faster).

Here two sliders are used to translate both the x and y position of the mouse to red and blue components of the color.

    mx, my = pygame.mouse.get_pos()
    xslider = float(mx) / width
    red = int(xslider * 255)
    yslider = float(my) / height
    blue = int(yslider * 255)
    screen.fill((red, blue, 0))

PyGame also supports a number of drawing commands, such as rectangles, try the following (insert *before* the display.flip command):

    p = int(xslider * (width - 50))
    pygame.draw.rect(screen, (0, 0, 0), (p, my, 50, 50), 0)
    p = int((1.0 - xslider) * (width - 50))
    pygame.draw.rect(screen, (0, 0, 0), (p, my, 50, 50), 0)

Look at the full list of drawing commands for more ideas.

Exercises for next week

Complete a "live drawing" that uses the "slider" technique above to translate the mouse position into (moving) visual elements. Make sure you understand how the code above works. In particular, variables: how they can be named and assigned, and used. Also make sure you understand the use of int and float. Try to give your variables names that are meaningful to your drawing.

ThinkPython

From ThinkPython: Chapter 3 (you can skip Exercise 5 if you want as I find it a bit strange)... and try...

Additional Exercise

In the last set of exercises, you wrote an expression to convert the parts of a time code into seconds. Write a function that takes hours, minutes, seconds, and fraction as parameters and returns the total number of seconds.

Hint: Start with your python expression from the previous exercise; replace "hard-coded" numbers with variables for the parameters listed above. Wrap this new expression inside a function definition (name it, list the parameters), and finally remember to use the return keyword to pass the result back out when the function gets called. From ThinkPython: Chapter 3 (you can skip Exercise 5 if you want as I find it a bit strange)...