Interactive Graphics using Javascript, HTML5 and CSS3
- 1. While your waiting... • You will want to get: • https://github.com/MacBoyPro/ simple_animation • [email protected]: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