Interactive Graphics using Javascript, HTML5 and CSS3

Interactive Graphics using Javascript, HTML5 and CSS3

• 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 thetrade • 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: Aquantity 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 unitof 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 • CartesianCoordinate 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 - SimpleAnimation
• 13.
  Collision Detection • Boundingbox • 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 - Gametime