Blazing Cloud Interactive Graphics w/ Javascript, HTML5 and CSS3 Taught by Lee Lundrigan and Sarah Allen http://blazingcloud.net

1. Interactive Graphics
w/ Javascript,
HTML5 and CSS3
Lee Lundrigan
Sarah Allen

2. Class Materials
• You will want to get:
• https://github.com/blazingcloud/
simple_animation
• git@github.com:blazingcloud/
simple_animation.git

3. Who are we?
• Blazing Cloud, Inc.
• Product Development Consultancy
• Training
• Lean Startup, Customer Development
• Languages: HTML, CSS, Javascript,
Ruby, Objective-C, Java

4. Who are we?
• Lee Lundrigan
• iOS, Mac and Mobile Web specialist
• Wrote a cross mobile browser CSS
framework that ran on iPhone,
Android, Blackberry and WinMo
• Sarah Allen
• 20 years of Product Experience
• After Effects, Shockwave, Flash
video, Open Laszlo, Lean Startup

5. Who are YOU?

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

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

8. 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

9. 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.

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

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

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

13. Lab - Simple Animation

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

15. 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

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

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

18. Lab - Game time