SlideShare a Scribd company logo
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:blazingcloud/
    simple_animation.git
Who are we?

• Blazing Cloud, Inc.
  • Product Development Consultancy
  • Training
• Lean Startup, Customer Development
• Languages: HTML, CSS, Javascript,
  Ruby, Objective-C, Java
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
Who are YOU?
Tools of the trade
• Oxygen XML Editor
 • http://www.oxygenxml.com
• Aptana
 • http://www.aptana.com
• TextEdit (on Mac)
• TextPad (on Windows)
Course Topics
• Animation
  • 2D and 3D / HTML5 Canvas
  • Collision detection
  • Sprites
  • Sound
• Interaction
• Best practices
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
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.
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: There are 1000 milliseconds in
  one second.
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
• Call the Play() method
Keyboard Movement
• document.onkeydown
 • detect character code
   • left: 37 right: 39
 • set moving true
• document.onkeyup
 • set moving false
Keyboard Movement
        Cont...


• Webkit based browsers have a bug
 • the keypress event doesn’t work for
   the arrow keys
Lab - Game time
Ad

Recommended

Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3
Lee Lundrigan
 
Iagc2
Iagc2
Lee Lundrigan
 
Practical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
 
HTML5 Graphics
HTML5 Graphics
Murillo Grubler
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Animation programming
Animation programming
Stanley Fok
 
Back To The Future.Key 2
Back To The Future.Key 2
gueste8cc560
 
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
Felix Faber
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
livedoor
 
Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
 
HTML5 for Rich User Experience
HTML5 for Rich User Experience
Mahbubur Rahman
 
Html5
Html5
Ahmed Jadalla
 
Back To The Future
Back To The Future
Bill Scott
 
Intro to HTML5 Game Programming
Intro to HTML5 Game Programming
James Williams
 
HTML5
HTML5
Maurice De Beijer [MVP]
 
Web Apps
Web Apps
Tim Wray
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
 
Javascript Animation with Canvas - Gregory Starr 2015
Javascript Animation with Canvas - Gregory Starr 2015
Gregory Starr
 
Google tools for webmasters
Google tools for webmasters
Rujata Patil
 
HTML5: An Overview
HTML5: An Overview
Nagendra Um
 
[arra]stre Tech Talk
[arra]stre Tech Talk
Genevieve Smith-Nunes
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
Best Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented Reality
Zugara
 
ART169_tut_flash
ART169_tut_flash
Márcio Antônio Moraes Reyes
 
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
FITC
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 games
Changhwan Yi
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
Dave Balmer
 
Improving Game Performance in the Browser
Improving Game Performance in the Browser
FITC
 
Rails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_many
Blazing Cloud
 
Active Record Introduction - 3
Active Record Introduction - 3
Blazing Cloud
 

More Related Content

Similar to Interactive Graphics w/ Javascript, HTML5 and CSS3 (20)

HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
livedoor
 
Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
 
HTML5 for Rich User Experience
HTML5 for Rich User Experience
Mahbubur Rahman
 
Html5
Html5
Ahmed Jadalla
 
Back To The Future
Back To The Future
Bill Scott
 
Intro to HTML5 Game Programming
Intro to HTML5 Game Programming
James Williams
 
HTML5
HTML5
Maurice De Beijer [MVP]
 
Web Apps
Web Apps
Tim Wray
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
 
Javascript Animation with Canvas - Gregory Starr 2015
Javascript Animation with Canvas - Gregory Starr 2015
Gregory Starr
 
Google tools for webmasters
Google tools for webmasters
Rujata Patil
 
HTML5: An Overview
HTML5: An Overview
Nagendra Um
 
[arra]stre Tech Talk
[arra]stre Tech Talk
Genevieve Smith-Nunes
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
Best Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented Reality
Zugara
 
ART169_tut_flash
ART169_tut_flash
Márcio Antônio Moraes Reyes
 
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
FITC
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 games
Changhwan Yi
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
Dave Balmer
 
Improving Game Performance in the Browser
Improving Game Performance in the Browser
FITC
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
livedoor
 
HTML5 for Rich User Experience
HTML5 for Rich User Experience
Mahbubur Rahman
 
Back To The Future
Back To The Future
Bill Scott
 
Intro to HTML5 Game Programming
Intro to HTML5 Game Programming
James Williams
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
 
Javascript Animation with Canvas - Gregory Starr 2015
Javascript Animation with Canvas - Gregory Starr 2015
Gregory Starr
 
Google tools for webmasters
Google tools for webmasters
Rujata Patil
 
HTML5: An Overview
HTML5: An Overview
Nagendra Um
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
Best Practices for Webcam Augmented Reality
Best Practices for Webcam Augmented Reality
Zugara
 
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
FITC
 
W3C HTML5 KIG-The complete guide to building html5 games
W3C HTML5 KIG-The complete guide to building html5 games
Changhwan Yi
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
Dave Balmer
 
Improving Game Performance in the Browser
Improving Game Performance in the Browser
FITC
 

More from Blazing Cloud (20)

Rails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_many
Blazing Cloud
 
Active Record Introduction - 3
Active Record Introduction - 3
Blazing Cloud
 
Rails Class Intro - 1
Rails Class Intro - 1
Blazing Cloud
 
Your first rails app - 2
Your first rails app - 2
Blazing Cloud
 
RSpec Quick Reference
RSpec Quick Reference
Blazing Cloud
 
Extending rails
Extending rails
Blazing Cloud
 
2day Ruby Class Intro
2day Ruby Class Intro
Blazing Cloud
 
Mobile Lean UX
Mobile Lean UX
Blazing Cloud
 
Interactive Graphics
Interactive Graphics
Blazing Cloud
 
Form helpers
Form helpers
Blazing Cloud
 
Intro to Ruby (and RSpec)
Intro to Ruby (and RSpec)
Blazing Cloud
 
What you don't know (yet)
What you don't know (yet)
Blazing Cloud
 
Introduction to Rails
Introduction to Rails
Blazing Cloud
 
ActiveRecord
ActiveRecord
Blazing Cloud
 
Ruby on Rails Class intro
Ruby on Rails Class intro
Blazing Cloud
 
Ruby on rails toolbox
Ruby on rails toolbox
Blazing Cloud
 
Routes Controllers
Routes Controllers
Blazing Cloud
 
Test Driven Development
Test Driven Development
Blazing Cloud
 
Active Record
Active Record
Blazing Cloud
 
Enumerables
Enumerables
Blazing Cloud
 
Rails ORM De-mystifying Active Record has_many
Rails ORM De-mystifying Active Record has_many
Blazing Cloud
 
Active Record Introduction - 3
Active Record Introduction - 3
Blazing Cloud
 
Rails Class Intro - 1
Rails Class Intro - 1
Blazing Cloud
 
Your first rails app - 2
Your first rails app - 2
Blazing Cloud
 
RSpec Quick Reference
RSpec Quick Reference
Blazing Cloud
 
2day Ruby Class Intro
2day Ruby Class Intro
Blazing Cloud
 
Interactive Graphics
Interactive Graphics
Blazing Cloud
 
Intro to Ruby (and RSpec)
Intro to Ruby (and RSpec)
Blazing Cloud
 
What you don't know (yet)
What you don't know (yet)
Blazing Cloud
 
Introduction to Rails
Introduction to Rails
Blazing Cloud
 
Ruby on Rails Class intro
Ruby on Rails Class intro
Blazing Cloud
 
Ruby on rails toolbox
Ruby on rails toolbox
Blazing Cloud
 
Test Driven Development
Test Driven Development
Blazing Cloud
 
Ad

Recently uploaded (20)

Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
revolcs10
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
 
The Future of AI Agent Development Trends to Watch.pptx
The Future of AI Agent Development Trends to Watch.pptx
Lisa ward
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
ReSTIR [DI]: Spatiotemporal reservoir resampling for real-time ray tracing ...
revolcs10
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
 
The Future of AI Agent Development Trends to Watch.pptx
The Future of AI Agent Development Trends to Watch.pptx
Lisa ward
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdf
AmirStern2
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
Ad

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 • [email protected]: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
  • 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.
  • 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

Editor's Notes