SlideShare a Scribd company logo

Heart & Sole - An introduction to HTML5 canvas

1 of 43
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas
Heart & Sole - An introduction to HTML5 canvas

Recommended

2012.04.26 Informational Workshop: HAA Capacity Building Initiative
2012.04.26 Informational Workshop: HAA Capacity Building Initiative2012.04.26 Informational Workshop: HAA Capacity Building Initiative
2012.04.26 Informational Workshop: HAA Capacity Building Initiativejvielman
 
2012.09.27 Learning Sessions 3 - Houston Center for Photograhy
2012.09.27 Learning Sessions 3 - Houston Center for Photograhy2012.09.27 Learning Sessions 3 - Houston Center for Photograhy
2012.09.27 Learning Sessions 3 - Houston Center for Photograhyjvielman
 
Learning Sessions #6 Residency Incubator: InterActive Theater Company
Learning Sessions #6 Residency Incubator: InterActive Theater CompanyLearning Sessions #6 Residency Incubator: InterActive Theater Company
Learning Sessions #6 Residency Incubator: InterActive Theater Companyjvielman
 
中国功夫03z
中国功夫03z中国功夫03z
中国功夫03zyangbqada
 
021113 Ila Presentation
021113 Ila Presentation021113 Ila Presentation
021113 Ila PresentationDov Winer
 
2012 06 28 learning sessions #2 Presentations
2012 06 28 learning sessions #2 Presentations2012 06 28 learning sessions #2 Presentations
2012 06 28 learning sessions #2 Presentationsjvielman
 

More Related Content

Viewers also liked

Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011LeslieOflahavan
 
งานนำเสนอ1
งานนำเสนอ1งานนำเสนอ1
งานนำเสนอ1wannis
 
Learning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperioLearning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperiojvielman
 
Wikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemWikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemLeslieOflahavan
 
WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?julia135
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideSharehkohort
 
Itec545slideshow
Itec545slideshowItec545slideshow
Itec545slideshowmrbayne
 
060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation Minerva060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation MinervaDov Winer
 
Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...Dov Winer
 
Styc Report
Styc ReportStyc Report
Styc Reportstyc
 
061019archives Oct06 Ch Digitisation Policy Xy
061019archives Oct06 Ch Digitisation Policy   Xy061019archives Oct06 Ch Digitisation Policy   Xy
061019archives Oct06 Ch Digitisation Policy XyDov Winer
 
Blue Rose Jf
Blue Rose JfBlue Rose Jf
Blue Rose Jfyangbqada
 

Viewers also liked (20)

Reflections
ReflectionsReflections
Reflections
 
Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011Session3_WMU_Plain_Language_Online_31May2011
Session3_WMU_Plain_Language_Online_31May2011
 
งานนำเสนอ1
งานนำเสนอ1งานนำเสนอ1
งานนำเสนอ1
 
Math presentation
Math presentationMath presentation
Math presentation
 
Learning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperioLearning sessions #5 pre incubator - aperio
Learning sessions #5 pre incubator - aperio
 
Wikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use ThemWikis and Blogs: When, Why, and How to Use Them
Wikis and Blogs: When, Why, and How to Use Them
 
WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?WOLLEN SIE Q1 SCHAUEN?
WOLLEN SIE Q1 SCHAUEN?
 
Re Final
Re FinalRe Final
Re Final
 
香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
 
EL ORIGEN DEL UNIVERSO
EL ORIGEN DEL UNIVERSOEL ORIGEN DEL UNIVERSO
EL ORIGEN DEL UNIVERSO
 
Itec545slideshow
Itec545slideshowItec545slideshow
Itec545slideshow
 
Epos Gilgamesh
Epos Gilgamesh Epos Gilgamesh
Epos Gilgamesh
 
060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation Minerva060426 Beit Berl Explanation Minerva
060426 Beit Berl Explanation Minerva
 
Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...Creating a shared educational space through Learning Objects: Israel particip...
Creating a shared educational space through Learning Objects: Israel particip...
 
Styc Report
Styc ReportStyc Report
Styc Report
 
Extreme Time Management
Extreme Time ManagementExtreme Time Management
Extreme Time Management
 
LOS ASTRONOMOS-3
LOS ASTRONOMOS-3LOS ASTRONOMOS-3
LOS ASTRONOMOS-3
 
061019archives Oct06 Ch Digitisation Policy Xy
061019archives Oct06 Ch Digitisation Policy   Xy061019archives Oct06 Ch Digitisation Policy   Xy
061019archives Oct06 Ch Digitisation Policy Xy
 
Blue Rose Jf
Blue Rose JfBlue Rose Jf
Blue Rose Jf
 
Ramadan 2008
Ramadan 2008Ramadan 2008
Ramadan 2008
 

More from Robin Hawkes

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone cameraRobin Hawkes
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataRobin Hawkes
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationRobin Hawkes
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLRobin Hawkes
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Robin Hawkes
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldRobin Hawkes
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTCRobin Hawkes
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLRobin Hawkes
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersRobin Hawkes
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSRobin Hawkes
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSRobin Hawkes
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeRobin Hawkes
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside RawketsRobin Hawkes
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformRobin Hawkes
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationRobin Hawkes
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptRobin Hawkes
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileRobin Hawkes
 

More from Robin Hawkes (20)

ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3DViziCities - Lessons Learnt Visualising Real-world Cities in 3D
ViziCities - Lessons Learnt Visualising Real-world Cities in 3D
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
Calculating building heights using a phone camera
Calculating building heights using a phone cameraCalculating building heights using a phone camera
Calculating building heights using a phone camera
 
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big DataWebVisions – ViziCities: Bringing Cities to Life Using Big Data
WebVisions – ViziCities: Bringing Cities to Life Using Big Data
 
Understanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisationUnderstanding cities using ViziCities and 3D data visualisation
Understanding cities using ViziCities and 3D data visualisation
 
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGLViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
ViziCities: Creating Real-World Cities in 3D using OpenStreetMap and WebGL
 
Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3Beautiful Data Visualisation & D3
Beautiful Data Visualisation & D3
 
ViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real WorldViziCities: Making SimCity for the Real World
ViziCities: Making SimCity for the Real World
 
The State of WebRTC
The State of WebRTCThe State of WebRTC
The State of WebRTC
 
Bringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGLBringing Cities to Life Using Big Data & WebGL
Bringing Cities to Life Using Big Data & WebGL
 
Mobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & HelpersMobile App Development - Pitfalls & Helpers
Mobile App Development - Pitfalls & Helpers
 
Boot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a PlatformBoot to Gecko – The Web as a Platform
Boot to Gecko – The Web as a Platform
 
Mozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JSMozilla Firefox: Present and Future - Fluent JS
Mozilla Firefox: Present and Future - Fluent JS
 
The State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JSThe State of HTML5 Games - Fluent JS
The State of HTML5 Games - Fluent JS
 
HTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions CodeHTML5 Technologies for Game Development - Web Directions Code
HTML5 Technologies for Game Development - Web Directions Code
 
MelbJS - Inside Rawkets
MelbJS - Inside RawketsMelbJS - Inside Rawkets
MelbJS - Inside Rawkets
 
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a PlatformMelbourne Geek Night - Boot to Gecko – The Web as a Platform
Melbourne Geek Night - Boot to Gecko – The Web as a Platform
 
Hacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and CustomisationHacking with B2G – Web Apps and Customisation
Hacking with B2G – Web Apps and Customisation
 
MDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScriptMDN Hackday London - Open Web Games with HTML5 & JavaScript
MDN Hackday London - Open Web Games with HTML5 & JavaScript
 
MDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of MobileMDN Hackday London - Boot to Gecko: The Future of Mobile
MDN Hackday London - Boot to Gecko: The Future of Mobile
 

Recently uploaded

SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...JIT KUMAR GUPTA
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city JodhpurSreyaseeNath1
 
EXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNSEXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNSROHISIVAM
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryDarshiniPatel16
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionNityaSharma77
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignAlbany Glass
 
Copy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffffCopy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffffschell
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and OptionsJIT KUMAR GUPTA
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfLizShek
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfLizShek
 
VSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf characterVSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf characterschell
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfUla Academics
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm22nvatafu
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfLizShek
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--characterschell
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfLizShek
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptAr. TANIA BERA
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdfSanjivanisShirodkar
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv22nvatafu
 
Ergonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities DesignErgonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities DesignRienaMacapagal1
 

Recently uploaded (20)

SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
 
urban design case study of old city Jodhpur
urban design case study of  old city Jodhpururban design case study of  old city Jodhpur
urban design case study of old city Jodhpur
 
EXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNSEXPLORING VARIOUS UI INTERACTION PATTERNS
EXPLORING VARIOUS UI INTERACTION PATTERNS
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industry
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features Extraction
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel Design
 
Copy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffffCopy of VSST102 Digital Portfolio.pdffff
Copy of VSST102 Digital Portfolio.pdffff
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and Options
 
Passing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdfPassing Strange Lighting Plot AS BUILT).pdf
Passing Strange Lighting Plot AS BUILT).pdf
 
HTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdfHTM Example Layouts Freedman Theatre.pdf
HTM Example Layouts Freedman Theatre.pdf
 
VSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf characterVSST103 - Digital Portfolio.pdf character
VSST103 - Digital Portfolio.pdf character
 
Task Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdfTask Pack 1- Nature - Ula Academics KIDS.pdf
Task Pack 1- Nature - Ula Academics KIDS.pdf
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
 
Heathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdfHeathers Symbols for Gerald Freedman Theatre.pdf
Heathers Symbols for Gerald Freedman Theatre.pdf
 
acervus process book no cover--character
acervus process book no cover--characteracervus process book no cover--character
acervus process book no cover--character
 
Mother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdfMother Courage and Her Children Shop Order.pdf
Mother Courage and Her Children Shop Order.pdf
 
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.pptsustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
sustainable-interior-design-strategy-with-case-study_TANIA-BERA.ppt
 
impact of packaging on consumer buying behaviour project report pdf.pdf
impact of packaging on consumer buying behaviour project  report pdf.pdfimpact of packaging on consumer buying behaviour project  report pdf.pdf
impact of packaging on consumer buying behaviour project report pdf.pdf
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
 
Ergonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities DesignErgonomics - Chapter 3 - Workstation Facilities Design
Ergonomics - Chapter 3 - Workstation Facilities Design
 

Editor's Notes

  1. - So, as you probably already know, I’m here to get you excited about HTML5 canvas.\n- Specifically, my job is to convince you to start playing with it today. Well, tomorrow…\n
  2. First, there are a couple of things you should be aware of…\n- I’ve made this talk as simple as possible, but there is still going to be some JavaScript involved. I can’t avoid that, I’m afraid! It’s nothing crazy though, as you’ll soon see.\n- Regardless, there are plenty of pretty pictures, so there’s something for the graphic designers in the room as well.\n- I promise you, canvas isn’t scary. :)\n
  3. - Reminisce briefly about how I started, at Redweb.\n
  4. \n
  5. - No plugins\n- Uses a JavaScript API\n
  6. \n
  7. \n
  8. - A bit like the old Microsoft Paint, but also nothing like it at the same time.\n- They’re both bitmap-based 2D drawing platforms.\n- It’s also been described by Christian Heilmann as an Etch-a-Sketch within the browser. I kinda like that comparison.\n- 3D will be achieved via WebGL.\n
  9. - SVG is another drawing platform that is available within the browser.\n- Canvas is bitmap, SVG is vector.\n- In canvas everything is drawn as a single flat image (ala. old MS Paint), which means you can’t edit something once it’s drawn; you’d have to erase it and draw it again (like an Etch-a-Sketch).\n- In SVG everything is drawn as a separate DOM element, which allows you to edit individual elements without affecting anything else.\n- SVG isn’t part of HTML5, but it is supported by most browsers.\n
  10. - Most modern browsers support canvas.\n- If you want to use it in IE8 and under you’ll need to include something like the ExplorerCanvas script in your page.\n- ExplorerCanvas is really cool and has been made by a bunch of crazy people at Google.\n- However, it’s not a perfect solution – you’ll experience performance issues and the like.\n- Fortunately IE9 beta supports canvas out of the box, and it’s seriously fast.\n
  11. \n
  12. \n
  13. * This is a 3D game, which is using tech not available in all browsers yet.\n
  14. \n
  15. http://weavesilk.com/\n
  16. http://rawkes.com/lab/google-balls-logo\n
  17. http://rawkets.com\n
  18. http://playbiolab.com/\n
  19. You can even use canvas to detect nudity. It’s pretty fucking cool!\n\nhttp://www.monocubed.com/lab/\nhttp://www.patrick-wied.at/static/nudejs/\nhttps://github.com/liuliu/ccv/tree/current/js/\n
  20. \n
  21. - Height and width need to be set in the element.\n- Using CSS will just scale the canvas and will not produce the effect you want.\n
  22. - The 2d rendering context is where everything is drawn.\n- The canvas element is actually a wrapper for the 2d rendering context, providing an API.\n- To be clear, you draw on to the 2d rendering context, not the canvas element.\n- You access the 2d rendering context through the canvas element.\n
  23. - The origin (0, 0) is at the top left\n- X moves positively right, and negatively left\n- Likewise, Y moves positively down and negatively left\n
  24. - First you must access the canvas element, this way uses pure JavaScript.\n- The 2D rendering context can then be accessed by calling the getContext method.\n
  25. - There is nothing to stop you using a library like jQuery to access the canvas element and the 2d rendering context.\n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. - There are a whole bunch of other things we haven’t covered, like text, shadows, line styles, saving the drawing state, and transformations (rotate, scale, translate).\n- You could write a book detailing every little thing that you can do in canvas. Which is pretty lucky, considering that’s exactly what I’ve done! I’ll leave the pimping till the end, though, I promise…\n
  33. - Technically pixel manipulation is part of the drawing features, but it deserve to be treated separately.\n- There is just too much cool stuff you can do with it.\n
  34. - Drawing an image on the canvas can be as simple of complex as you like\n- You can transpose an entire image element onto the canvas\n- Or you can crop out part of an image and place just that on the canvas\n- You can even resize the image when you place it on the canvas\n- The coolest thing is that you can use a video as the source image via the HTML5 video tag\n- When you use a video the current frame will be used as the source image\n
  35. - getImageData is definitely one of my favourite features of canvas. Possibly even my favourite feature overall!\n- It allows you to access the pixel data values of an image on the canvas, whether that is a basic image or a still from a HTML5 video.\n- The pixel data returned is in the format of an array.\n- On it’s own it’s nothing more than a gimmicky colour picker, but when used as part of something larger it starts to get cool.\n- One thing to note is that you can’t normally get the pixel data for images not on the same domain as the canvas.\n- This is to protect against all kinds of nasty things.\n- However, there are ways to get around it.\n
  36. - Canvas ambilight is an experiment designed to show off the integration between canvas and HTML5 video.\n- It utilises the drawImage and getImageData methods to grab a frame from the video every few seconds and average its colour values.\n- This in turn allows for a linear gradient to be drawn that matches those colours.\n- Add an image mask over the top of the canvas and you have yourself an impressive looking dynamic ambilight system.\n- Close pixelate works in a similar way to the ambilight example, in that it averages colour values in particular areas of the image, resulting in a pixelated effect.\n
  37. - We’ve had my favourite feature of canvas, now for my favourite use of canvas – animation.\n- Drawing shapes is great and all, but it’s when you start to move them that things get fun.\n- If you then make those moving shapes interact somehow then you’ve got yourself a pretty powerful system.\n
  38. - Thankfully it's not too complicated to construct an animation engine in canvas.\n- You just need a method of remembering what shapes are on the canvas and a way of redrawing them really quickly.\n
  39. - Drawable elements are stored as objects.\n- By treating these elements as JavaScript objects you can store and edit an unlimited amount of custom values; be that position, size, colour, weight, friction, anything!\n- All objects are stored in an array.\n- Run a timeout function every 33ms (roughly equal to 30fps).\n- Make any changes to the objects.\n- Clear the canvas.\n- Loop through and redraw every shape.\n- Simplified example, but it’s the gist of what happens.\n
  40. - There is much debate about wether HTML5 is going to be a Flash killer.\n- My opinion is to use the right tool for the right job. Stop comparing them.\n- Canvas does some stuff, Flash does others.\n- The missing piece for canvas to go mainstream is a GUI for developing canvas applications, but these are starting to appear, like the Radi app and Adobe integrating canvas support into the Flash editor.\n
  41. - Canvas has a bright future, it’s already being championed by companies like Microsoft, Apple, Opera, and Mozilla.\n- Easy integration with other HTML5 technologies is a killer feature. For example, WebSockets.\n- It’s already flexible and powerful, but we’re no where near witnessing it’s full potential.\n- Hardware acceleration.\n
  42. - Twitter @robhawkes\n- Rawkes (blog) http://rawkes.com\n- Book (pre-order on Amazon) http://www.amazon.co.uk/gp/product/1430232919/\n
  43. - Before I finish, I’d just like to thank Tom, Alex and the rest of the team for inviting me along and giving me the chance to speak to you guys. They’ve all put incredible amounts of time into organising this for you, the whole evening is going to be amazing.\n- I’d love to answer any questions that you might have, either about the talk, or canvas in general. So fire away!\n