HTML5 Canvas @SuperMondays, Newcastle

1,804 views

Published on

A 5 minute presentation introducing HTML5's canvas element for Super Mondays.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,804
On SlideShare
0
From Embeds
0
Number of Embeds
165
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Canvas @SuperMondays, Newcastle

  1. 1. HTML5 Canvas Here there be cool stuff! 27 / 04 / 2010 www.supermondays.org / www.byrichardpowell.co.uk @ byrichardpowell
  2. 2. What is Canvas ? <ul><li>2d drawing platform </li></ul><ul><li>HTML5 </li></ul><ul><li>JavaScript </li></ul><canvas width=“20&quot; height=“20“></canvas> var context = canvas.getContext( '2d' ); context.clearRect(0,0, 100, 100); byrichardpowell.co.uk @byrichardpowell
  3. 3. What is Canvas For? <ul><li>Data Visualisation </li></ul><ul><li>Dynamic Animation & Games </li></ul><ul><li>Complex interaction, UI’s & applications </li></ul><ul><li>Plugging gaps in browser support </li></ul><ul><li>Pseudo 3D & 3D ‘Proper’ with WebGL </li></ul><ul><li>Integration with other HTML5 technologies </li></ul><ul><li>Think Big & Have Fun! </li></ul>byrichardpowell.co.uk @byrichardpowell
  4. 4. The Bad News? <ul><li>SVG: http:// mzl.la/svg_intro </li></ul><ul><li>Explorer Canvas: http:// bit.ly /ex-canvas </li></ul>byrichardpowell.co.uk @byrichardpowell
  5. 5. Canvas in the wild <ul><li>Weaves Silk: </li></ul><ul><li>http:// bit.ly /silk-canvas </li></ul><ul><li>Radiohead: </li></ul><ul><li>http:// www.radiohead.com / </li></ul><ul><li>Cufon: </li></ul><ul><li>http://bit.ly/cufon-canvas </li></ul><ul><li>Sinuous: </li></ul><ul><li>http:// bit.ly /sinuous-canvas </li></ul><ul><li>Biolab Disater: </li></ul><ul><li>http://bit.ly/biolab-canvas </li></ul><ul><li>Wildernessdowntown: </li></ul><ul><li>http:// bit.ly /wilderness-canvas </li></ul>byrichardpowell.co.uk @byrichardpowell
  6. 6. Animating some particles run loop 25 times a second loop { // Clear the last frame draw a white box over the screen // Create a new particle create new particle with random x & y velocity with x & y positions of 0 add the new particle to the particles array // Be Kind to the computer if there are more than 250 particles in the array delete the first one // Update each particle for each particle in particles array { // Simulate Bounce, velocity, gravity & drag if the particle is past screens edges reverse its x + y velocity add x & y velocity to x & y position reduce y velocity to simulate gravity reduce x & y velocity to simulate drag // Render the particle render the particle using its x & y position } } byrichardpowell.co.uk @byrichardpowell
  7. 7. Can I have Libraries? <ul><li>Three.js: http://bit.ly/three-canvas </li></ul><ul><li>Raphael: http://bit.ly/raphael-canvas </li></ul><ul><li>ZingChart: http://bit.ly/zing-canvas </li></ul><ul><li>Peity: http://bit.ly/peity-canvas </li></ul><ul><li>Processing.js: http://bit.ly/processing-canvas </li></ul><ul><li>Easel: http:// bit.ly/easel_canvas </li></ul>byrichardpowell.co.uk @byrichardpowell
  8. 8. Resources <ul><li>Follow </li></ul><ul><li>@seb_ly, @mrdoob, @robhawkes </li></ul><ul><li>Visit </li></ul><ul><li>http://bit.ly/bundles/byrichardpowell/3 </li></ul><ul><li>http://byrichardpowell.co.uk </li></ul><ul><li>Read </li></ul><ul><li>Foundation Canvas: http://amzn.to/foundation-canvas </li></ul><ul><li>Get In Touch </li></ul><ul><li>@byrichardpowell, [email_address] </li></ul>byrichardpowell.co.uk @byrichardpowell

×