Interactive Graphics   w/ Javascript,  HTML5 and CSS3      Lee Lundrigan       Sarah Allen
Class Materials• You will want to get:  • https://github.com/blazingcloud/    simple_animation  • git@github.com:blazingcl...
Who are we?• Blazing Cloud, Inc.  • Product Development Consultancy  • Training• Lean Startup, Customer Development• Langu...
Who are we?• Lee Lundrigan • iOS, Mac and Mobile Web specialist • Wrote a cross mobile browser CSS    framework that ran o...
Who are YOU?
Tools of the trade• Oxygen XML Editor • http://www.oxygenxml.com• Aptana • http://www.aptana.com• TextEdit (on Mac)• TextP...
Course Topics• Animation  • 2D and 3D / HTML5 Canvas  • Collision detection  • Sprites  • Sound• Interaction• Best practices
Vocabvec·tor /ˈvektər/Noun: A quantity having direction aswell as magnitude, esp. as determiningthe position of one point ...
hertz (Hz)a unit of frequency of one cycle persecond. Ex. 60Hz = 60 times per second’tween/twēn/Contraction: time between....
Coordinate System• Cartesian Coordinate System • Starts in upper left • Origin is (0,0)                   0               0
Animation• setInterval(code,millisec);  • repeats until cleared• setTimeout(code, millisec);  • Fires the event once• Note...
Animation Cont...function draw() {    ball.x += 10;}
Lab - Simple Animation
Collision Detection• Bounding box• Test using object’s center  • {x: 10, y: 10}
Sound• HTML5 <embed> Tag  <embed src="pong.mp3" id=”pong  ”width=”0” height=”0”  autostart=”false”/>• Get the object by id...
Keyboard Movement• document.onkeydown • detect character code   • left: 37 right: 39 • set moving true• document.onkeyup •...
Keyboard Movement        Cont...• Webkit based browsers have a bug • the keypress event doesn’t work for   the arrow keys
Lab - Game time
Upcoming SlideShare
Loading in …5
×

Interactive Graphics w/ Javascript, HTML5 and CSS3

1,782 views

Published on

Blazing Cloud

Interactive Graphics w/ Javascript, HTML5 and CSS3

Taught by Lee Lundrigan and Sarah Allen

http://blazingcloud.net

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Interactive Graphics w/ Javascript, HTML5 and CSS3

  1. 1. Interactive Graphics w/ Javascript, HTML5 and CSS3 Lee Lundrigan Sarah Allen
  2. 2. Class Materials• You will want to get: • https://github.com/blazingcloud/ simple_animation • git@github.com:blazingcloud/ simple_animation.git
  3. 3. Who are we?• Blazing Cloud, Inc. • Product Development Consultancy • Training• Lean Startup, Customer Development• Languages: HTML, CSS, Javascript, Ruby, Objective-C, Java
  4. 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. 5. Who are YOU?
  6. 6. Tools of the trade• Oxygen XML Editor • http://www.oxygenxml.com• Aptana • http://www.aptana.com• TextEdit (on Mac)• TextPad (on Windows)
  7. 7. Course Topics• Animation • 2D and 3D / HTML5 Canvas • Collision detection • Sprites • Sound• Interaction• Best practices
  8. 8. Vocabvec·tor /ˈvektər/Noun: A quantity having direction aswell as magnitude, esp. as determiningthe position of one point in spacerelative to another. 10 15
  9. 9. hertz (Hz)a unit of frequency of one cycle persecond. Ex. 60Hz = 60 times per second’tween/twēn/Contraction: time between. The processof creating in between frames.
  10. 10. Coordinate System• Cartesian Coordinate System • Starts in upper left • Origin is (0,0) 0 0
  11. 11. Animation• setInterval(code,millisec); • repeats until cleared• setTimeout(code, millisec); • Fires the event once• Note: There are 1000 milliseconds in one second.
  12. 12. Animation Cont...function draw() { ball.x += 10;}
  13. 13. Lab - Simple Animation
  14. 14. Collision Detection• Bounding box• Test using object’s center • {x: 10, y: 10}
  15. 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. 16. Keyboard Movement• document.onkeydown • detect character code • left: 37 right: 39 • set moving true• document.onkeyup • set moving false
  17. 17. Keyboard Movement Cont...• Webkit based browsers have a bug • the keypress event doesn’t work for the arrow keys
  18. 18. Lab - Game time

×