1. While your waiting...
• You will want to get:
• https://github.com/MacBoyPro/
simple_animation
• git@github.com:MacBoyPro/
simple_animation.git

2. Interactive Graphics
w/ Javascript,
HTML5 and CSS3
Lee Lundrigan

3. Who am I?
• Employer: Blazing Cloud, Inc.
• Job: Software Engineer
• Languages: HTML, CSS, Javascript,
Ruby, Objective-C, Java
• Gold star
• Wrote a cross mobile browser CSS
framework that ran on iPhone,
Android, Blackberry and WinMo

4. Who are YOU?

5. Tools of the trade
• Oxygen XML Editor
• http://www.oxygenxml.com
• Aptana
• http://www.aptana.com
• TextEdit (on Mac)
• TextPad (on Windows)

6. Course Topics
• Animation
• 2D and 3D / HTML5 Canvas
• Collision detection
• Sprites
• Sound
• Interaction
• Best practices

7. Vocab
vec·tor /ˈvektər/
Noun: A quantity having direction as
well as magnitude, esp. as determining
the position of one point in space
relative to another.
10
15

8. hertz (Hz)
a unit of frequency of one cycle per
second. Ex. 60Hz = 60 times per second
’tween/twēn/
Contraction: time between. The process
of creating in between frames.

9. Coordinate System
• Cartesian Coordinate System
• Starts in upper left
• Origin is (0,0)
0
0

10. Animation
• setInterval(code,millisec);
• repeats until cleared
• setTimeout(code, millisec);
• Fires the event once
• Note: There are 1000 milliseconds in
one second.

11. Animation Cont...
function draw() {
ball.x += 10;
}

12. Lab - Simple Animation

13. Collision Detection
• Bounding box
• Test using object’s center
• {x: 10, y: 10}

14. Sound
• HTML5 <embed> Tag
<embed src="pong.mp3" id=”pong
”width=”0” height=”0”
autostart=”false”/>
• Get the object by id
• Call the Play() method

15. Keyboard Movement
• document.onkeydown
• detect character code
• left: 37 right: 39
• set moving true
• document.onkeyup
• set moving false

16. Keyboard Movement
Cont...
• Webkit based browsers have a bug
• the keypress event doesn’t work for
the arrow keys

17. Lab - Game time