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()