Interactive Graphics w/ Javascript, HTML5 and CSS3
Download as KEY, PDF0 likes975 views
This document describes a course on interactive graphics using JavaScript, HTML5, and CSS3, led by Lee Lundrigan and Sarah Allen from Blazing Cloud, Inc. It covers essential topics such as animation, collision detection, sound, and keyboard movement, providing tools and resources for development. The document also includes a laboratory session focused on simple animation and game creation.
Interactive Graphics w/ Javascript, HTML5 and CSS3
- 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