An Introduction to Interactive Programming in Python (Part 2) -- Week 7 More Classes & Sprites

Programming tips

This is the best course by John

• sound example

import simplegui
sound = simplegui.load_sound("http://commondatastorage.googleapis.com/codeskulptor-assets/Epoq-Lepidoptera.ogg")
sound.play()            # play sound
sound.pause()           # pause sound
sound.rewind()          # rewind sound
sound.set_volume(.5)    # set volume ( 0 - 1 )

http://www.codeskulptor.org/#examples-tips7.py

• coding tips : Avoid repetition
  
  • Avoiding repetition with functions
  • Avoiding repetition with classes and methods

    ########################
    # Incomplete code from Pong
    # Avoiding repetition with classes and methods

    class Paddle:
        def __init__(self, loc, pos, vel):
            self.loc = loc
            self.pos = pos
            self.vel = vel
            self.width = 80

        def move(self):
            if self.width/2 <= self.pos + self.vel <= width - self.width/2:
                self.pos += self.vel

        def draw(c, self):
            c.draw_line([self.loc, self.pos-self.width / 2], PADDLE_THICKNESS, "White")

    def draw(c):
        paddle1.move()
        paddle2.move()

        c.draw_line([width / 2, 0],[width / 2, height], 1, "White")

        paddle1.draw(c)
        paddle2.draw(c)

        ...
 

• coding tips : Avoid long if/elif chain (keydown_handler)
  
  • Avoiding long if/elif chain with dictionary mapping values to actions
  • Avoiding long if/elif chain with dictionary mapping values to action arguments

    ########################
    # Incomplete code from Pong
    # Avoiding long if/elif chain with dictionary mapping values to action arguments

    inputs = {"up": [1, -2],
              "down": [1, 2],
              "w": [0, -2],
              "s": [0, 2]}

    def keydown(key):
        for i in inputs:
            if key == simplegui.KEY_MAP[i]:
                paddle_vel[inputs[i][0]] += inputs[i][1]
 

• coding tips : Avoid unnamed constants
  
  • Naming constants and calculating other constants from those
  • Magic unnamed constants, repeated code, long expressions

    ########################
    # Incomplete code from Pong
    # Constants named and computed, repetition avoided, expressions broken into
    # named pieces

    width = 600
    height = 400


    def ball_init():
        pos = [width/2, height/2]

        vel_x = 3 + 3 * random.random()
        vel_y = 8 * (random.random() - 0.5)

        if random.randrange(0,2) == 1:
            vel_x = -vel_x

        return pos, [vel_x, vel_y]

Space ship basic concept (for week 7 mini project)

• Angle update

Spaceship class - two fields
    self.angle - ship orientation (scalar/float)
    self.angle_vel - ship angular velocity (scalar/float)

Update method
    self.angle += self.angle_vel

Key handler controls self.angle_vel

Draw method
    canvas.draw_image(self.image, ..., ..., ..., ..., self.angle)

• Add Friction
  
  • Friction limits the maximum speed of spaceship
  • Friction can slow spaceship when there is no thrust

Friction - let c be a small constant
    friction = -c * velocity

acceleration = thrust + friction

velocity = velocity + acceleration
velocity = velocity + thrust + friction
velocity = velocity + thrust - c * velocity
velocity = (1 - c) * velocity + thrust

# Position update
self.pos[0] += self.vel[0]
self.pos[1] += self.vel[1]

# Friction update
self.vel[0] *= (1 - c)
self.vel[1] *= (1 - c)

# Thrust update - acceleration in direction of forward vector
forward = [math.cos(self.angle), math.sin(self.angle)]
if self.thrust:
    self.vel[0] += forward[0]
    self.vel[1] += forward[1]

Sprites — Sprite class

• Most object-oriented game environments provide a class structure for 2D graphical/image objects called sprites.
• The Sprite class typically includes fields for quantities such as position, velocity, size and age.
• This class typically includes an initializer, an update method, a draw method and a collision method (collision is not introduced this week).
• For the Spaceship and Asteroids mini-projects, sprites have an associated ImageInfo class with fields that contain the center, size, radius, lifespan and animated flag for an image.
• Lecture examples - Sprite Example, Spaceship, Project Template
• More examples - Curling
• Lifespan example for missiles

    class Sprite:
        ...
        def update(self):
            # update lifespan
            self.lifespan -= 1

    def draw():             
        for a_missile in missiles:
            a_missile.update()
            if a_missile.lifespan == 0:
                missiles.remove(a_missile)

RGB colors and HTML color strings

• In the RGB color model, colors are represented as a triple of integers in the range of 0 to 255.
• Each component corresponds to red, green and blue, respectively. The value of the component corresponds to the intensity of the corresponding color, with 0 being no intensity and 255 being full intensity.
• HTML color strings encode RGB colors as a string "rgb(r,g,b)" where the three values lie in the range 0 to 255.
• An extra alpha channel may be added to control transparency. The HTML color string has the form "rgba(r,g,b,a)" where a is in the the range 0 (transparent) to 1 (opaque).
• More examples - Fading Dots
• http://www.w3schools.com/html/html_colors.asp

Sound — Sound

• The SimplGui function load_sound() loads a sound file, specified as a URL, into CodeSkulptor and returns a sound object.
• The method set_volume() controls the playback volume of the sound (0 - 1).
• The methods play(),pause(),rewind() control the playback of the sound object.
• Attempting to play several versions of the same sound object at the same time in not possible. However, different sounds objects can play on different channels simultaneously.
• Different browser support different sound formats. Short sounds are laggy in Firefox.
• Lecture examples - Sound
• More examples - Bouncing Ball

Space ship code (phase 1)

    # program template for Spaceship
    import simplegui
    import math
    import random

    # globals for user interface
    WIDTH = 800
    HEIGHT = 600
    score = 0
    lives = 3
    time = 0.5

    class ImageInfo:
        def __init__(self, center, size, radius = 0, lifespan = None, animated = False):
            self.center = center
            self.size = size
            self.radius = radius
            if lifespan:
                self.lifespan = lifespan
            else:
                self.lifespan = float('inf')
            self.animated = animated

        def get_center(self):
            return self.center

        def get_size(self):
            return self.size

        def get_radius(self):
            return self.radius

        def get_lifespan(self):
            return self.lifespan

        def get_animated(self):
            return self.animated


    # art assets created by Kim Lathrop, may be freely re-used in non-commercial projects, please credit Kim

    # debris images - debris1_brown.png, debris2_brown.png, debris3_brown.png, debris4_brown.png
    #                 debris1_blue.png, debris2_blue.png, debris3_blue.png, debris4_blue.png, debris_blend.png
    debris_info = ImageInfo([320, 240], [640, 480])
    debris_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/debris2_blue.png")

    # nebula images - nebula_brown.png, nebula_blue.png
    nebula_info = ImageInfo([400, 300], [800, 600])
    nebula_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.f2014.png")

    # splash image
    splash_info = ImageInfo([200, 150], [400, 300])
    splash_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/splash.png")

    # ship image
    ship_info = ImageInfo([45, 45], [90, 90], 35)
    #ship_info = ImageInfo([135, 45], [90, 90], 35)
    ship_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/double_ship.png")

    # missile image - shot1.png, shot2.png, shot3.png
    missile_info = ImageInfo([5,5], [10, 10], 3, 50)
    missile_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/shot2.png")

    # asteroid images - asteroid_blue.png, asteroid_brown.png, asteroid_blend.png
    asteroid_info = ImageInfo([45, 45], [90, 90], 40)
    asteroid_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/asteroid_blue.png")

    # animated explosion - explosion_orange.png, explosion_blue.png, explosion_blue2.png, explosion_alpha.png
    explosion_info = ImageInfo([64, 64], [128, 128], 17, 24, True)
    explosion_image = simplegui.load_image("http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/explosion_alpha.png")

    # sound assets purchased from sounddogs.com, please do not redistribute
    soundtrack = simplegui.load_sound("http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/soundtrack.mp3")
    missile_sound = simplegui.load_sound("http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/missile.mp3")
    missile_sound.set_volume(.5)
    ship_thrust_sound = simplegui.load_sound("http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/thrust.mp3")
    explosion_sound = simplegui.load_sound("http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/explosion.mp3")

    # helper functions to handle transformations
    def angle_to_vector(ang):
        return [math.cos(ang), math.sin(ang)]

    def dist(p,q):
        return math.sqrt((p[0] - q[0]) ** 2+(p[1] - q[1]) ** 2)


    # Ship class
    class Ship:
        def __init__(self, pos, vel, angle, image, info):
            self.pos = [pos[0],pos[1]]
            self.vel = [vel[0],vel[1]]
            self.thrust = False
            self.angle = angle
            self.angle_vel = 0
            self.image = image
            self.image_center= info.get_center()
            self.image_size = info.get_size()
            self.radius = info.get_radius()

        def draw(self, canvas):
            ship_center = ship_info.get_center()
            ship_size = ship_info.get_size()
            if self.thrust:
                ship_thrust_sound.play()
                canvas.draw_image(ship_image, [ship_center[0] + ship_size[0], ship_center[1]], ship_size, self.pos, self.image_size, self.angle)
            else:
                ship_thrust_sound.rewind()
                canvas.draw_image(ship_image, ship_info.get_center(), ship_info.get_size(), self.pos, self.image_size, self.angle)

        def update(self):
            # Angle update
            self.angle  += self.angle_vel

            # Postition update
            self.pos[0] = (self.pos[0] + self.vel[0]) % WIDTH
            self.pos[1] = (self.pos[1] + self.vel[1]) % HEIGHT

            # Friction update
            friction = 0.01
            self.vel = map(lambda x: x * (1 - friction), self.vel)

            # Thrust update
            if self.thrust:
                thrust = 0.1
                forward = angle_to_vector(self.angle)
                self.vel[0] += forward[0] * thrust
                self.vel[1] += forward[1] * thrust

        def set_angle_vel(self, value):
            self.angle_vel = value

        def set_thrust(self, value):
            self.thrust = value

        def shoot(self):
            global missiles
            # cannan position
            forward = angle_to_vector(self.angle)
            missile_pos = map(lambda x, y: x + self.radius * y, self.pos, forward)
            missile_vel = map(lambda x, y: x + self.radius * .1 * y, self.vel, forward)
            a_missile = Sprite(missile_pos, missile_vel, 0, 0, missile_image, missile_info, missile_sound)
            missiles.append(a_missile)


    # Sprite class
    class Sprite:
        def __init__(self, pos, vel, ang, ang_vel, image, info, sound = None):
            self.pos = [pos[0],pos[1]]
            self.vel = [vel[0],vel[1]]
            self.angle = ang
            self.angle_vel = ang_vel
            self.image = image
            self.image_center = info.get_center()
            self.image_size = info.get_size()
            self.radius = info.get_radius()
            self.lifespan = info.get_lifespan()
            self.animated = info.get_animated()
            self.age = 0
            if sound:
                sound.rewind()
                sound.play()

        def draw(self, canvas):
            canvas.draw_image(self.image, self.image_center, self.image_size,
                              self.pos, self.image_center, self.angle)

        def update(self):
            self.pos[0] = (self.pos[0] + self.vel[0]) % WIDTH
            self.pos[1] = (self.pos[1] + self.vel[1]) % HEIGHT
            self.angle  += self.angle_vel

            # update lifespan
            self.lifespan -= 1


    def draw(canvas):
        global time, missiles

        # animiate background
        time += 1
        wtime = (time / 4) % WIDTH
        center = debris_info.get_center()
        size = debris_info.get_size()
        canvas.draw_image(nebula_image, nebula_info.get_center(), nebula_info.get_size(), [WIDTH / 2, HEIGHT / 2], [WIDTH, HEIGHT])
        canvas.draw_image(debris_image, center, size, (wtime - WIDTH / 2, HEIGHT / 2), (WIDTH, HEIGHT))
        canvas.draw_image(debris_image, center, size, (wtime + WIDTH / 2, HEIGHT / 2), (WIDTH, HEIGHT))

        # draw ship and sprites
        my_ship.draw(canvas)
        for a_rock in rocks:
            a_rock.draw(canvas)
        for a_missile in missiles:
            a_missile.draw(canvas)

        # update ship and sprites
        my_ship.update()
        for a_rock in rocks:
            a_rock.update()
        for a_missile in missiles:
            a_missile.update()
            if a_missile.lifespan == 0:
                missiles.remove(a_missile)

        # draw score and life
        ship_life_size = map(lambda x: x / 3, ship_info.get_size())
        for dummy_idx in range(lives):
            ship_life_pos = [WIDTH / 20 + dummy_idx * ship_life_size[0], HEIGHT / 20]
            canvas.draw_image(ship_image, ship_info.get_center(), ship_info.get_size(),
                              ship_life_pos, ship_life_size, math.pi * 1.5)
        #canvas.draw_text("Lives",    [WIDTH / 20, HEIGHT / 20], HEIGHT / 25, "White")
        #canvas.draw_text(str(lives), [WIDTH / 20, HEIGHT / 10], HEIGHT / 25, "White")
        canvas.draw_text("Score",    [WIDTH * 0.85, HEIGHT / 20], HEIGHT / 25, "White")
        canvas.draw_text(str(score), [WIDTH * 0.85, HEIGHT / 10], HEIGHT / 25, "White")


    # timer handler that spawns a rock    
    def rock_spawner():
        global a_rock
        # rock position
        a_rock_pos = [WIDTH * random.random(), HEIGHT * random.random()]

        # rock velocity
        magnitude = random.random() * .3 + .2
        angle = random.random() * (math.pi * 2)
        a_rock_vel = [magnitude * math.cos(angle), magnitude * math.sin(angle)]

        # rock angle velocity
        a_rock_angle_vel = random.randrange(50, 100) * random.choice([-1, 1]) * .0001
        a_rock = Sprite(a_rock_pos, a_rock_vel, 0, a_rock_angle_vel, asteroid_image, asteroid_info)

        if len(rocks) < 10:
            rocks.append(a_rock)

    # initialize frame
    frame = simplegui.create_frame("Asteroids", WIDTH, HEIGHT)

    # initialize ship and two sprites
    my_ship = Ship([WIDTH / 2, HEIGHT / 2], [0, 0], 0, ship_image, ship_info)
    #a_rock = Sprite([WIDTH / 3, HEIGHT / 3], [1, 1], 0, 0, asteroid_image, asteroid_info)
    rocks = []
    missiles = []

    # handlers definition
    downs = {"up":    [my_ship.set_thrust, True],
             "space": [my_ship.shoot],
             "left":  [my_ship.set_angle_vel, -0.02],
             "right": [my_ship.set_angle_vel, 0.02]}

    def keydown(key):
        """
        keyboard control functions:   
        """
        for i in downs:
            if key == simplegui.KEY_MAP[i]:
                if len(downs[i]) > 1:
                    downs[i][0](downs[i][1])
                else:
                    downs[i][0]()

    ups = {"up":    [my_ship.set_thrust, False],
           "left":  [my_ship.set_angle_vel, 0],
           "right": [my_ship.set_angle_vel, 0]}

    def keyup(key):
        for i in ups:
            if key == simplegui.KEY_MAP[i]:
                ups[i][0](ups[i][1])


    # register handlers
    frame.set_draw_handler(draw)

    timer = simplegui.create_timer(1000.0, rock_spawner)

    frame.set_keydown_handler(keydown)
    frame.set_keyup_handler(keyup)

    # get things rolling
    timer.start()
    frame.start()