Bibliography & Appendixes Can new web technologies HTML5 & CSS3 kill Flash? Dissertation by Jeremie Charlet, 12/2010

Uploaded on

Dissertation on HTML5, CSS3 and Adobe Flash performed from July to December 2010 while doing an MSc in Computer Science at Staffordshire University, England …

Dissertation on HTML5, CSS3 and Adobe Flash performed from July to December 2010 while doing an MSc in Computer Science at Staffordshire University, England

this pdf includes the bibliography and appendixes missing in the main report available here:

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. 1 Bibliography.Net   Magazine   2010,   ‘Web   Design   for   mobile!   .   Net   Magazine,   01   September,  pp.47-­‐51.  Abhijeet  Bhattacharya,  K,  S  2007,  ‘Memory  leak  patterns  in  JavaScript  ,  From  IBM  DeveloperWorks   <­‐memleak/>  Adobe   nd,   ‘Products’,   accessed   15   October   2010   from   Adobe  <>  ADOBE 2009, ‘Photoshop online’, accessed 15 December 2009 from<>ADOBE 2009, ‘Learn Flash CS4 Professional’, in Adobe Developer Connection,accessed 15 December 2009 from<>Adobe   2010,   ‘Flash   penetration   Rate,   From   Adobe   products  <>  Adobe   2010,   ‘Flash   platform   Runtimes,   From   Adobe   products  <>  Alexa   2010,   ‘Youtube’,   accessed   23-­‐09   from   Alexa  <>  Allaire,   J   2010,   ‘The   Future   of   Web   Content  –   HTML5,   Flash   &   Mobile  Apps,   From  Tech   Crunch   <­‐future-­‐of-­‐web-­‐content-­‐html5-­‐flash-­‐mobile-­‐apps/>  Apple nd, ‘Photo Transitions’, accessed 15 October 2010 from Safari TechnologyDemos <>Arah,   T   2009,   ‘Flash   penetration   <the   truth,   From   PC   Pro  <­‐penetration-­‐the-­‐truth/>  Arvidsson,  E  2010,  ‘Explorer  Canvas  Overview’,  accessed  14  October  2010  from  Explorer  Canvas  <>  Ates,   F   2010,   ‘Modernizr’,   accessed   28   October   2010   from   Modernizr  <>  CALZADILLA,   A   2010,   ‘Pure   CSS3   Spiderman   Cartoon   w/   jQuery   and   HTML5   –  Look   Ma,   No   Flash!   Accessed   15   October   2010   from   Optimum   7  <­‐marketing/web-­‐development/pure-­‐css3-­‐spiderman-­‐ipad-­‐cartoon-­‐jquery-­‐html5-­‐no-­‐flash.html>  MSc Dissertation - Jérémie Charlet – CW002436 0
  • 2. Charlet,  J  2010,  ‘Canvas  <Solar  System’,  accessed  15  October  2010  from  HTML5  and   CSS3   Experiments  <>  Charlet,   J   2010,   ‘Home’,   accessed   15   October   2010   from   HTML5   and   CSS3  Experiments  <>  CHERNY, R 2009, ‘HTML 5 starts looking real’, InformationWeek <analytics, 31August, pp.35-38.Chewing  Com  2010,  ‘BMW  Cinetique’,  accessed  15  October  2010  from  TheFWA  <­‐cin-­‐tique-­‐/c=SOTM>  Cold   Hard   Flash   2005,   ‘The   Kenn   Commandments,   Part   1,   An   interview   with  Kenn   Navarro,   co-­‐creator   of   "Happy   Tree   Friends",   From   Cold   Hard   Flash  <­‐commandments-­‐part-­‐1.html>  Cold   Hard   Flash   2005,   ‘The   Kenn   Commandments,   Part   2,   An   interview   with  Kenn   Navarro,   co-­‐creator   of   "Happy   Tree   Friends",   From   Cold   Hard   Flash  <­‐commandments-­‐part-­‐2.html>  Computer  Literacy  nd,  ‘Macromedia  Flash  Version  Release  History’,  accessed  15  October   2010   from   Computer   Literacy  <>  David,  M  2003,  ‘Online  Games  Development  in  Flash  -­‐  A  Brief  History’,  accessed  15   October   2010   from   Sitepoint   <­‐brief-­‐history>  Deep  Blue  Sky  2010,  ‘HTML5  AND  CSS3  SUPPORT’,  accessed  13  November  2010  2010  from  findmebyip  <>   2010,   ‘Rich   Internet   Applications   Statistics’,   accessed   13-­‐08  from  RiaStats  <>  DEUTSCH, S 2009, ‘HTML5 Canvas Experiment’, in, accessed15 December 2009 from <>Deveria,  A  2010,  ‘Compatibility  tables  for  support  of  HTML5,  CSS3,  SVG  and  more  in   desktop   and   mobile   browsers’,   accessed   20   October   2010   from   When   can   I  use...  <>  Enjin   Inc   2008,   ‘The   eco   zoo’,   accessed   15   October   2010   from   The   FWA  <­‐eco-­‐zoo/c=SOTYPCA>  F1LT3R   nd,   ‘UI   Dial   With   Snaps’,   accessed   12   October   2010   from   Processing.js  Samples   <­‐js/docs/?page=UI%20Dial%20with%20Snaps>  Firth,   D   nd,   ‘Interview   with   Salad   Fingers   Creator   David   Firth’,   accessed   15  October   2010   from   Semantikon  <>  
  • 3. FWA   2010,   ‘Introduction’,   accessed   14   October   2010   from   the   FWA  <>  Gallagher,   N   nd,   ‘Pure   CSS   speech   bubbles’,   accessed   15   October   2010   from   Pure  CSS   speech   bubbles   <­‐css-­‐speech-­‐bubbles/demo/>  gartner  2010,  ‘Gartner  Says  Worldwide  Mobile  Phone  Sales  Grew  35  Percent  in  Third   Quarter   2010;   Smartphone   Sales   Increased   96   Percent’,   accessed   20  November   2010   from   gartner  <>  Gaudino,   E   2005,   ‘Salad   Fingers’   Stream   Of   Consciousness   Entertains   Viewers’,  accessed   15   October   2010   from   The   daily   Campus  <­‐fingers-­‐stream-­‐of-­‐consciousness-­‐entertains-­‐viewers-­‐1.1062606>  Gay,   J   nd,   ‘The   history   of   Flash’,   accessed   15   October   2010   from   Adobe   showcase  <>  Goodby   2010,   ‘Battle   of   Cheetos’,   accessed   15   October   2010   from   theFWA  <­‐of-­‐the-­‐cheetos/c=SOTM>  Goodby   2007   20-­‐03,   ‘Get   the   glass’,   accessed   15   October   2010   from   The   FWA  <­‐the-­‐glass-­‐/c=SOTYPCA>  Google   2008,   ‘Multi   Process   Architecture,   From   The   Chromium   Projects  <­‐documents/multi-­‐process-­‐architecture>  GOOGLE 2009, Google Docs’, accessed 15 December 2009 from<>GOOGLE 2009, ‘Explorer Canvas’, in Google Code, accessed 15 December 2009from < >Google   2010,   ‘Chromabrush’,   accessed   16   October   2010   from   Chromabrush  <>   nd,   ‘graphtk   an   online   and   open-­‐source   graphing   utilli’,   accessed   15  October  2010  from  <>    Grigsby,  J  2009,  ‘HTML5  from  a  mobile  perspective’,  accessed  13  November  2010  from   Cloud   Four   <­‐from-­‐a-­‐mobile-­‐perspective/>  Gyulabo   nd,   ‘3D   on   2D   Canvas   Demo’,   accessed   12   October   2010   from   Gyulabo  <>  HAROLD, E 2007, ‘New elements in HTML 5’, in IBM Developer Works, accessed15 December 2009 from < >Haustein,  S  2010,  ‘Quake  2  WGT  Port’,  accessed  21  November  2010  from  Google  Code  <­‐gwt-­‐port/>  
  • 4. Hickson,  I  2009,  ‘Interview  with  Ian  Hickson,  editor  of  the  HTML5  specification’,  accessed   09   October   2010   from   Web   Standards  <­‐with-­‐ian-­‐hickson-­‐editor-­‐of-­‐the-­‐html-­‐5-­‐specification/>  HICKSON, I 2008, ‘HTML 5 Demos from September 2008’, in WHATWG Website,accessed 15 December 2009 from <>Hutt,   T   nd,   ‘a   canvas   slippy   map’,   accessed   14   October   2010   from   Concentric  Livers  <>  ICO  partners  2009  04-­‐10,  ‘KGC09  Online  Games  market  in  Europe  ‘,  accessed  15  October  2010  from  Slideshare  <­‐online-­‐games-­‐market-­‐in-­‐europe>  Jobs,   S   2010,   ‘Thoughts   on   Flash,   From   Apple   hotnews  <­‐on-­‐flash/>  Joffe,   B   2005,   ‘Canvascape   -­‐   "3D   Walker"‘,   accessed   14   October   2010   from   Ben  Joffe  <>  Joffe,   B   nd,   ‘Earth   3D   Canvas’,   accessed   13   October   2010   from   Ben   Joffe  <>  Jobs,   S   2010   04,   ‘Thoughts   on   Flash,   From   Apple   hotnews  <­‐on-­‐flash/>  Kjaer,   M   2009,   ‘HTML   5   and   CSS   3   <The   Techniques   You’ll   Soon   Be   Using’,  accessed   15   October   2010   from   nets   tuts+  <­‐css-­‐techniques/html-­‐5-­‐and-­‐css-­‐3-­‐the-­‐techniques-­‐youll-­‐soon-­‐be-­‐using/>  Kokokaka   2010,   ‘Blue   Bell   Jeans’,   accessed   15   October   2010   from   TheFWA  <­‐blue-­‐bell-­‐spring-­‐summer/c=SOTM>  Khronos  Group  2010,  ‘WebGL  -­‐  OpenGL  ES  2.0  for  the  Web’,  accessed  14  October  2010  from  Khronos  Group  <>  KRILL, P 2009, ‘HTML 5 <Could it kill Flash and Silverlight’, in Computer WorldDeveloment, accessed 15 December 2009 from<>Lawson,  B  2010,  ‘A  minimal  HTML5  document’,  accessed  15  October  2010  from  Bruce   Lawsons   personal   Site   <­‐minimal-­‐html5-­‐document/>  LAWSON, B 2009, ‘Archive for the HTML 5 Category’, in Bruce Lawson Blog,accessed 15 December 2009 from<>LAWSON, B 2009,’The future of HTML 5’, in Vimeo, accessed 15 December 2009from <>
  • 5. Lipsman,  A  2010,  ‘Flash  and  Rich  Media  Ads  Represent  40  Percent  of  U.S,  Online  Display   Ad   Impressions   ‘,   accessed   15   October   2010   from   comScore  <>    Lovell,   N   2010,   ‘ARROGANT,   SNOBBISH   AND   ELITIST   –   WHY   ATTITUDES   TO  ZYNGA   SUCK’,   accessed   15   October   2010   from   Gamesbrief  <­‐snobbish-­‐and-­‐elitist-­‐why-­‐attitudes-­‐to-­‐zynga-­‐suck/  >  Lovell,   N   2009,   ‘SIX   SECRETS   OF   FARMVILLE’S   SUCCESS   –   AND   33   MILLION  PEOPLE   AGREE’,   accessed   15   October   2010   from   GamesBrief  <­‐secrets-­‐of-­‐farmvilles-­‐success-­‐and-­‐33-­‐million-­‐people-­‐agree/>  MadCap   Studios,   Inc   2010,   ‘Home’,   accessed   13   October   2010   from   Digital  Comics  for  ipad  and  iphone  <!home  Media  College  nd,  ‘Flash  Player  Version  History  ‘,  accessed  15  October  2010  from  Media  College  <  >  Mediati,  N  2010,  ‘Google  anouces  webm  video  format  <the  future  of  html5  video?  Accessed   14   October   2010   from   PC   World  <>  Microsoft  2006,  ‘How  to  identify  memory  leaks  in  the  common  language  runtime  ,  From  Microsoft  Support  <>  Middleton,   J   2010,   ‘As   smartphone   users   rocket,   Android   ousts   Symbian   ‘,  accessed   16   October   2010   from   telecoms  <­‐smartphone-­‐users-­‐rocket-­‐android-­‐ousts-­‐symbian/>  Mill,   B   nd,   ‘Introduction’,   accessed   15   October   2010   from   Canvas   Tutorial  <  >  Miniwatts   Marketing   Group   2010,   ‘TOP   20   COUNTRIES   WITH   THE   HIGHEST  NUMBER  OF  INTERNET  USERS’,  accessed  14  October  2010  from  Internet  World  Stats  <>  Mitchell,  A  2010,  ‘an  introduction  to  CSS3’,  accessed  15  October  2010  from  Zen  elements  <­‐introduction/>  Momolog   2009,   ‘Momoflow’,   accessed   15   October   2010   from   Momolog  <>  Mozilla   nd,   ‘Basic   Usage’,   accessed   15   October   2010   from   Mozilla   Developer  Network  <>  Mozilla  nd,  ‘Canvas  Tutorial’,  accessed  15  October  2010  from  Mozilla  Developer  Network  <>  
  • 6. MOZILLA 2009, ‘HTML 5 Support in Mozilla’, in Mozilla developer Center,accessed 15 December 2009 from<>Odvarko,   J   2009,   ‘Introduction   to   Firebug   <Net   Panel,   Consulté   le   10   15,   2010,  sur   Software   is   hard  <­‐to-­‐firebug-­‐net-­‐panel/>  Office of Communications 2010, ‘The Ofcom Broadcasting Code - Section 1Protecting the Under-Eighteen, From Ofcom<>Ogilvy   2010,   ‘An   encounter   with   greatness’,   accessed   15   October   2010   from  theFWA  <­‐encounter-­‐with-­‐greatness/c=SOTM>  Ogilvy   2010,   ‘Perrier   by   Dita’,   accessed   15   October   2010   from   theFWA  <­‐perrier-­‐mansion/c=SOTM>  Oldrin,   E   nd,   ‘Zynga   and   the   rise   of   social   gaming   on   the   web’,   accessed   15  October   2010   from   Edge  <>  Opera   2010,   ‘Opera   browsers   exceed   100   million   users   ‘,   accessed   15   October  2010   from   Opera   Press   Releases  <>  Orange   Honey   nd,   ‘Darkroom’,   accessed   22   October   2010   from   Mugtug  <>  Orange   Honey   nd,   ‘Sketchpad’,   accessed   21   October   2010   from   Mugtug  <>  Owen,  R  2010,  ‘A  Very  Very  Brief  History  of  Flash  and  the  Open  Web  ‘,  accessed  15   October   2010   from   Inside   RIA   <­‐very-­‐very-­‐brief-­‐history-­‐of-­‐f.html>  PAPAKIPOS, M 2009, ‘Googles HTML 5 Work <Whats Next?’, in Google I/ODeveloper Conference, accessed 15 December 2009 from<>Peachpite 2006, ‘A Brief History of Flash’, accessed 15 October 2010 from FlashReference Guide<>Perkins,   T   2010,   ‘Learn   Flash   Professional   CS5,   From   Adobe   TV  <­‐flash-­‐professional-­‐cs5/>  Pichai,   S   2010,   ‘Google   I/O   May   19   -­‐   20,   2010,   From   Google   I/O   Day   1   keynote  <­‐FR/events/io/2010/>  
  • 7. Pilgrim,   M   2010,   ‘Video   on   the   web’,   accessed   13   October   2010   from   Dive   into  HTML5  <>  pl4n3   2010,   ‘bullet.js   -­‐   Javascript   Physics   Engin’,   accessed   13   October   2010   from  Planes   World   <­‐javascript-­‐physics-­‐engine.html>   2009,   ‘A   Quick   History   of   Web   Video,   From  <­‐quick-­‐history-­‐of-­‐web-­‐video/>  RAGGETT, D 1998, Raggett on HTML 4, Addison Wesley, Harlow, England.REDMOND, W 2009, ‘Microsoft Web Apps <Office Goes to the Web’, in MicrosoftPressPass, accessed 15 December 2009 from <>refsnes   Data   2010,   ‘Browser   Statistics’,   accessed   25   October   2010   from  w3Schools  <>  Resig,   J   2010,   ‘About   Processing.js’,   accessed   19   November   2010   from  processing.js  <>  RGraph   2010,   ‘RGraph   <HTML5   canvas   graph   library   based   on   the   HTML5  canvas   tag’,   accessed   27   November   2010   from   RGraph  <>  Russel,  A  2009,  ‘Google  Chrome  Frame’,  accessed  15  October  2010  from  Google  Code  <>  Rutgers,   A   n.d.,   ‘HTML5,   A   GREAT   MOBILE   INTERNET   CATALYST?   From  <>  Ryall,   M   2008,   ‘comments’,   accessed   16   October   2010   from   matt   ryall’s   weblog  <­‐vis/comments/>  Sands,  A  nd,  ‘Think  -­‐  a  Free  Mind  Mapping  Web  App’,  accessed  16  October  2010  from  Think  <http://think-­‐>  Seidelin,   J   2008,   ‘Javascript   Wolfenstein   3D’,   accessed   12   October   2010   from  Nihilogic  <­‐wolfenstein-­‐3d.html>  Shankland,  Stephen  2010,  ‘Why  Apple  Banned  Flash’,  accessed  15  October  2010  from  <­‐501465_162-­‐20003744-­‐501465.html>  SHARP, R 2009, ‘HTML 5 Demos and Examples’, in HTML 5 Demos, accessed 15December 2009 from <>  Sharp,   R   nd,   ‘HTML5   shiv’,   accessed   16   October   2010   from   HTML5   shiv  <>  Sharp,   R,   P   2007,   ‘Interaction   Design   beyond   human-­‐computer   Interaction   2nd  Edition’,  Chichester,  England  John  Wiley  &  Sons  Ltd.Silk  Tricky  2010,  ‘Bank  Run  Game’,   accessed   15   October   2010   from   The   FWA  <­‐run-­‐game/c=SOTM>  
  • 8. Smith,   A   nd,   ‘Canvas   Games’,   accessed   13   October   2010   from   Canvas   Demos  <>  Stewart,   R   2008,   ‘Flash   Gaming   Summit   <Ryan   Stewart   on   The   Future   of   Flash,  From  Slideshare  <­‐1245617>  Stink   Digital   2010,   ‘Lexus   Dark   Ride’,   accessed   15   October   2010   from   theFWA  <­‐dark-­‐ride/c=SOTM>  Sucan,  M  2009,  ‘HTML  5  canvas  -­‐  the  basics’,  accessed  15  October  2010  from  Dev  Opera  <­‐5-­‐canvas-­‐the-­‐basics/>  Team   Cloudkick   2010,   ‘Real-­‐time   server   visualization   with   canvas   and  processing.js’,   accessed   14   October   2010   from   Cloud   Click  <>  templates   blog   2010,   ‘10   html5   video   players’,   accessed   10   October   2010   from  templates  blog  <­‐html5-­‐video-­‐players/>  The   Martin   Agency   2009,   ‘We   choose   the   moon’,   accessed   15   October   2010   from  The  FWA  <>  tomteAndGoat  2009,  ‘Canvas  Animation’,  accessed  12  October  2010  from  Tomte  and   Goat  <>  Toxicgonzo   nd,   ‘User   Demos   -­‐   3D   .OBJ   Viewer’,   accessed   12   October   2010   from  Canvas   Demos  <>  Triolo,   H   2006,   ‘Flash,   what   and   how,   From   Flash   creations   <http://flash-­‐>  Valdes,   Ray   2010,   ‘HTML5   and   the   future   of   Adobe   Flash’,   accessed   15   October  2010   from   <­‐and-­‐flash/>     VUKICEVIC, V 2006, ‘SVG and Canvas <Graphics for Web Apps’, in XTech 2006,accessed 15 December 2009 from <>W3D  Consortium  2010,  ‘X3D  and  HTML5’,  accessed  13  October  2010  from  W3D  Consortium  <>  Wannemacher,   W   2007,   ‘Terms   and   Definitions’,   accessed   13   October   2010   from  Wantii  <>  Webflux   nd,   ‘CSS3   Previews’,   accessed   15   October   2010   from  <>  Winnie,  D  2010,  ‘Actionscript  1:1  with  Doug  Winnie’,  accessed  15  October  2010  from   Adobe   TV   <­‐11-­‐with-­‐doug-­‐winnie/>  
  • 9. Yasushi,   A   2008,   ‘Box2D   JS’,   accessed   13   October   2010   from   Box2D   JS  <http://box2d-­‐>  ZDNet   Research   2004,   ‘Macromedia   Flash   market   penetration,   From   ZDNet  <­‐flash-­‐market-­‐penetration/6005>  Zeldman, J 2010, ‘The future of Web Standards’, Net Magazine, 01 September,pp.41-45.
  • 10. 2 Appendixes2.1 Appendixes of Research on HTML5 and CSS32.1.1 HTML5 and CSS3 Availability: Complete HTML5 & CSS3 Availability tables (Deep Blue Sky, 2010)
  • 11. 2.1.2 Cartoons: CSS3 SPIDERMAN CodeCSS3 SPIDERMAN: HTML5 code (CALZADILLA 2010)<div id="screen-02"> <div class="spiderman-complete" style="opacity: 1; "> <div class="web-shot" style="opacity: 1; "> <img src="img/02-spiderman-web.png" width="30" alt="02 Spiderman Web"/> </div> <div class="spiderman-torso" style="opacity: 1; "> <img src="img/02-spiderman-torso.png" width="25" alt="02 Spiderman Torso"/> <div class="spiderman-legs" style="opacity: 1; "> <div class="spiderman-leg-02" style="opacity: 1; "> <img src="img/02-spiderman-thigh.png" width="20" alt="02 SpidermanThigh"/> <div class="spiderman-shin-02" style="opacity: 1; "> <img src="img/02-spiderman-foot.png" width="20" alt="02 SpidermanFoot"/> </div> </div> <div class="spiderman-leg-01" style="opacity: 1; ">
  • 12. CSS3 SPIDERMAN: CSS3 code (CALZADILLA 2010)the-screen #screen-02 { -webkit-animation-delay:10s; -webkit-animation-duration:10s; -webkit-animation-iteration-count:1; -webkit-animation-name:screen_two_city; -webkit-animation-timing-function:ease-in-out;}#the-screen #screen-02 .spiderman-complete { -webkit-animation-delay:10s; -webkit-animation-duration:7s; -webkit-animation-iteration-count:1; -webkit-animation-name:spiderman_complete; -webkit-animation-timing-function:ease-in-out; -webkit-transform-origin-x:50%; -webkit-transform-origin-y:0;}#the-screen #screen-02 .spiderman-legs { left:-1px; position:relative; top:-10px; width:26px;}#the-screen #screen-02 .spiderman-legs .spiderman-leg-01, #the-screen #screen-02.spiderman-legs .spiderman-leg-02 { left:6px; position:absolute; top:0;}2.1.3 Games: 3D Samples2. Monk head Figure 1 - MOnk Head (Toxicgonzo not dated)This shows a 3D Model consisting of hundreds of triangles and drawn on a 640*4802D Canvas. The model represents a rotating monk head whose surfaces are filled withrandom transparent and flat colours (Toxicgonzo not dated).The 3d .obj object is stored in a string in the JS file, informs about the vertex positionsand which vertices form the polygons; the polygons are then drawn on the canvaswith JS.
  • 13. This 3D animation is done through software rendering, which means that it is doneinside the browser due to canvas + JS and it does not require any hardwareacceleration. JS Cloth Figure 2 - Interactive Towel (Gyulabo not dated)This other animation presents a towel textured with an image that you can swing byclicking on it. Hence this is a 3D demo where you can interact with the model andmodify its shape in real time (Gyulabo not dated).It is probably done with 2D Canvas + JS, the canvas size is small, less than100polygons used, it is as complex as the previous 3D model and its animation issmooth. Wolf 3D Figure 3 - Javascript WOLFenstein 3D (Seidelin 2008)It is a JS port of the original Wolfenstein 3D (basic demo). It is developed with JS,canvas and Ajax (Seidelin 2008).The demo is basic: you can move in the map, open doors, get weapons and life on theground and shoot; there is no artificial Intelligence, soldiers stand, do not move andcan be killed; no collision detection (you can walk through soldiers). Still the game issmooth, big screen (640*480), software rendered, include textures and interaction. Itsframe rate varies according to the web-browser. It also includes music and sound(when you shoot, when a guard is killed). 3D Shooter from Ben Joff
  • 14. Figure 4 - 3D SHOOTER (Joffe, Canvascape - "3D Walker" 2005)It has less features (only a map, no GUI) but higher quality and bigger resolution. Ithas only 400lines of code (Joffe, Canvascape - "3D Walker" 2005). Earth Demo for special build of Opera Figure 5 - Earth 3D Canvas(Joffe, Earth 3D Canvas not dated) This is the first of this list to be done with the 3D Canvas API. Very smooth, bigscreen size, you can zoom in and out the surface. Quake 2 Figure 6 - Quake 2 WEBGL (Haustein 2010)Quake2 sample from Google Team is a very impressive sample of what can be donewith WebGL in a browser (Haustein 2010).
  • 15. 2.1.4 Web Applications2.1.4.1 JavaScript Libraries2. Box 2D JS: 2D physicsBOX 2D JS is the JS port of the physics engine BOX 2D. There are basic samples onits website, and a more complex sample of balls fallings on a random terrain. Ithandles collision detection, body joints, contact, friction, attraction, reaction forces,etc (Yasushi 2008).Its original engine has ports to Java, Flash, C#, Delphi, etc. So if this is a popularengine among developers, they should have no difficulty to move to this web Basedport on HTML5. Bullet.js: 3D physicsThis is a 3D physics engine that should be probably used with the 3D graphic enginefor HTML5: WebGL (pl4n3 2010).A benchmark of this engine on Firefox and Chrome shows that its performances arestill very low since it presents a very poor frame rate while displaying simplistic 3Delements. But browsers have not fully implemented 3D graphics in HTML5 yet sothese results are expected to improve. Processing.js: drawing, animation & interactionProcessing.js uses the canvas to draw shapes, create animation & interaction. It offersa complete environment to visualize data, create graphic user interface and developweb-based games (Resig 2010).The following reference commands are implemented and might be organized as itfollows: 1. Development/Organization   • To  structure  and  organize  the  application  (statements,  setup,  draw,   loop,  functions)   • To  handles  data,  objects   • To  control  functions  (for,  if,  while,  &&,  or)   • To  do  calculations   2. Interaction/events   • To  listen  to  input  events  (mouse  pressed,  keyboard)   • Time  and  space  (day,  hour,  coordinates)   3. Graphics   • To  create  shapes   • To  transform  shapes  (rotate,  scale)   • To  handle  images  (loadimage,  updatepixels)   • To  manipulate  fonts rGraph libraryThis is a canvas graph library. You can create line charts, pie charts, rose charts,meters, gantt charts, progress bar, etc (RGraph 2010).
  • 16. To present a data analysis with HTML5 and the Canvas, there are already manylibraries that offer all tools needed to perform charts and graphs. There also manysamples of analytical applications and you can use their source code. User Interface2. Digital comic app WebsiteIts user interface (MadCap Studios, Inc 2010) is created with canvas to createanimated transitions and Ajax to load dynamically the content: • animated  buttons,     • once  a  page  is  selected,  the  size  of  the  content  panel  adapts  dynamically  to   the  text,     • the  text  and  images  fade  in  and  out  to  create  nice  transitions  This website is the first attempt to create a full User Interface with canvas, as manyFlash websites exist, and is more other still accessible since the text loaded with Ajaxis embedded in div tags and not in the canvas.This website still presents some drawbacks concerning Search Engine Optimization(SEO): pages linked in the nav-bar are anchors. And some inner links (in the featurepage) make some div including text and image visible or not.Here the background of every button is animated with a Canvas, but text is insertedwith Ajax. It is very complicated to create simple animated transitions this way. Inthat case, CSS3 should be used instead. UI Dial with snaps  This UI dial is more a gadget/experiment and is not practically useful. It is developedwith processing.js and it attempts to offer an original UI element both graphical andinteractive (canvas for graphics and physics for a magnetic feel) that loads contentwith Ajax and jQuery (F1LT3R not dated).It is a dial where you snap to markers by simulating a magnetic field; buttons arelinked to markers and bip regularly. Once you snap to a marker, content is loaded nextto the dial.Here are used two other technologies (jQuery and Ajax) though developers shouldonly need to use the native HTML5 and CSS3 APIs to work simply on the userinterface. Momo FlowThis is a Mac Coverflow using jQuery and Canvas 2D that simulates 3D transitions(Momolog 2009). It works smoothly even when zoomed in. Many coverflows werecreated in pure JS but this is the only one being both smooth and beautiful. Howeverit is not created with JS only but jQuery. Photo Transition on SafariThis demonstration for Safari shows how you can make transitions between photoswith CSS3 2D & 3D transforms and CSS3 transitions (Apple not dated). Thesetransitions are worth a desktop slideshow. CSS3 animations can use hardware
  • 17. acceleration, which means that the complexity and the quality of animations can bebetter than with JS.In photo transitions, the best choice to make is using CSS3; almost all attempts inpure JS with canvas are not convincing at all. Utility, analytic and content Applications2. Slippy MapLike Google Map, this web application dynamically downloads content (pieces ofmap – tiles) from openStreetMap and displays it with HTML5 canvas (Hutt not dated).It is very smooth, works like GoogleMap: grab and slide the map + zoom in and out,statically here. But there is no other interaction: the user cannot look at a store, getadditional information on a place, etc. CloudKickThis application displays in real time a cloud monitoring system (Team Cloudkick2010). It intends to help administrators to manage server infrastructure and check thestate of their servers. It uses Canvas, JS & processing.js.It consists of a 3D space where servers are plotted in real time and are coloured orblink according to their status. You can click on them to get specific information ofthe selected server.This application is very smooth, the information is readable and accessible, and theonly drawback is the hardness to move in the 3D space. Comments on a blogThis graph shows dynamically when comments were posted on a blog (Ryall 2008).The HTML5 Canvas is used to display it dynamically. It uses processing.js library. Think AppIt is a real big web app allowing users to create and customize their mind maps (Sandsnot dated). It uses HTML5 canvas for the graphic interface and Django and GoogleApp Engine for the rest.The interface is very usable due to canvas, you can manipulate it graphically: dragyour spots, create links between them, etc. However its drawback is accessibility, notext even appears in the source code. Math toolIt draws all sorts of mathematic functions, solve differential equations; you candynamically resize the grid, grab and slide it. Its libraries are available and it uses JS& JSON ( not dated).This application is the best of its kind (draw mathematic functions) but is notextraordinary, it just shows that it can perform complex calculations and draws anysort of functions.
  • 18. Painting applicationsSketchpad (Orange Honey not dated) and Chromabrush (Google 2010) are two richpainting web applications and use Canvas 2D + Canvas 2D SVG + jQuery + JS .Sketchpad intends to offer a real painting web apps with many tools (brush, pencil,gradient, fill, textures, different shapes, text, color picker), customization of tools(size, hardness, opacity, flow), includes libraries of gradients, patterns and has also anhistory.Although Chromabrush is more a demonstration of HTML5 features (presented atGoogle I/O 2010) with less depth in the features offered (fewer customization, tinylibraries) but other interesting features for web apps: it includes audio, embeddedvideo, the notification API, photo edition (blurr), layers management (draw on a layer,define its order according to the others).Their source code is clearly readable and arises this question (heard at the Google I/OConference): how do you protect the source code of a web app? Although a Flash filecompiled cannot be studied nor copied.If drawing apps can be developed in HTML5 (+ other technologies) to offer a verycomplete drawing experience, how big is the step to get the same sort of designer’sapplication for animation?Those applications (and the following Darkroom for photo editing) being opensourceprovide moreothers many libraries to develop and their code is very clear and highlyusable.Note from the Google I/O conference: up to that point, SVG graphics were notpointed out though there is a Canvas 2D SVG API under development. BeforeHTML5, SVG graphics were the solution to create vector graphics in JS for the web,but their performances were terrible: for an animation developed in SVG, HTML5Canvas and Flash, SVG presented the lowest frame rate. Canvas is presented as thenew solution from HTML5, consists of pixel graphics and has indeed much betterperformances than former SVG attempts. However with SVG taking part in theHTML5 specs, its advancement should be followed. Photo Editing2. Darkroom from MugTugDarkRoom is a photo editing application implemented with jQuery and Canvas 2D(Orange Honey not dated).Upload an image, change its levels, white balance, exposure, enhance its contrast orsaturation or even apply preloaded filters (black and white, sharpen angles …). Itincludes a full spectrum analyzer and crop/rotate functions. It is intended tophotographers who want to adjust their photos quickly on a web app.As said above, the source code is accessible and many libraries are available.Darkroom uses Application Cache & local storage. This means that once loaded, itcan be used offline. The offline feature is necessary to get those web apps on thedesktop and for the mobile web.
  • 19. Suffer of a laggy experience in full screen, it is required to reduce the window size toget it smooth. Canvas pixel Manipulation for Safari web app is developed with Canvas 2D + JS. This web app allows you to applyvarious effects to photography (color effects, edge detection, and imagetransformation: distort). You cannot customize the effects, just basically apply themso it is more a demonstration of JS coding than a practical application.Another feature is “export as a PNG/GIF/JPG to the hard disk”. You can thereforesave the image file under different file types. Radikal fx Collage demo gets photos from Flicker and allows you to select the ones you want and to positionthem on the canvas and set their opacity to create a photo collage. This application isbasic: images are identified as different layers but you cannot change their position.These painting and photo editing applications made of HTML5, Canvas 2D + JS (atleast) cover altogether most of the features of Photoshop.2.2 Appendix of Research on Flash2.2.1 What is Flash used for: Full-flash website samplesperrier by dita (Ogilvy 2010)Purpose: promote Perrier drinksType: Interactive MovieKey features: HQ Video; filtered Video; Interactive VideoUser Interaction Type: Explore an environment; Instructing (select anoption); Manipulating: Interact with the video with the mouse (enlight, avoidtouching, take photo)Battle of Cheetos (Goodby 2010)Purpose: promote the Cheetos cerealsType: GameKey features: dynamic 3D environment; multiplayer; ranking systemUser Interaction Type: Instructing (Customize player’s army; browsemultiplayer ranking and select opponent player); Manipulating (play against aplayer)Louis Vuitton Journey: Legends (Ogilvy 2010)Purpose: discover and learn about famous celebritiesType: Interactive Video InterviewKey features: HQ Video; Accessible Video (captions); Interactive Video;Social Network embedded; Post commentsUser Interaction Type: Instructing with mouse or keyboard; Conversing(post comments on some video clips)
  • 20. Lexus Dark Ride (Stink Digital 2010)Purpose: promote the Lexus carType: Interactive MovieKey features: HQ Video; Interactive Video; 360° Video; Social NetworkembeddedUser Interaction Type: Instructing; Exploring: Interact with the mouse(choose where to look)BMW cinétique (Chewing Com 2010)Purpose: promote BMW carsType: Artistic authoring toolKey features: dynamic 3D environment; libraries of patterns; galleries; HQVideo; AnimationUser Interaction Type: Manipulate (move nodes to shape your own 3Dmodel)Bank Run Game (Silk Tricky 2010)Purpose: promote a game sold on the app store (apple)Type: Interactive movieKey features: HQ Video, Interactive VideoUser Interaction Type: InstructingBlue Bell Jeans (Kokokaka 2010)Purpose: promote jeansType: Multimedia website: embeds text, video transitionsKey features: HQ Video, Interactive VideoUser Interaction Type: Manipulate (play forward and backward in thevideo), Exploring (look at the different jeans )We choose the moon (The Martin Agency 2009)Purpose: EducativeType: Multimedia website: embeds text, video, audio, 3D animationKey features: HQ Video, video/audio/text galleryUser Interaction Type:exploringEcodazo (Enjin Inc 2008)Purpose: EducativeType: 3D educational application for young peopleKey features: 3D Animation, HQ VideoUser Interaction Type: exploringGet the glass (Goodby 2007)Purpose: promote a brandType: Board GameKey features: 3D, HQ Video, Mini gamesUser Interaction Type: Manipulate (dices, mini games)
  • 21. 2.3 Appendix of Preliminaries to Implementation and Benchmarks2.3.1 Canvas graphic API2.3.2 SYSTEM2.3.2.1 SAVING & RESTORING STATEsave()restore() COMPOSITINGglobalCompositeOperation = type to see clear definitionsof different typestype: "source-over, source-in, source-out, source-atop destination-over, destination-in, destination-out, destination-atop lighter, darker xor,copy"clip() TRANSFORMATIONStranslate(x, y)rotate(angle)scale(x, y)transform(m11, m12, m21, m22, dx, dy)2.3.3 DRAWING SHAPES2.3.3.1 MAIN FUNCTIONSstroke()fill()clip() DRAWING RECTANGLESfillRect(x,y,width,height) : Draws a filled rectanglestrokeRect(x,y,width,height) : Draws a rectangular outlineclearRect(x,y,width,height) : Clears the specified area and makes itfully transparent2.3.3.3 DRAWING PATHSbeginPath()
  • 22. closePath() LINESlineTo(x, y) ARCSarc(x, y, radius, startAngle, endAngle, anticlockwise) BESIER AND QUADRATIC CURVESquadraticCurveTo(cp1x, cp1y, x, y)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) RECTANGLESrect(x, y, width, height)2.3.4 APPLYING STYLES & COLORS2.3.4.1 COLORSfillStyle = colorstrokeStyle = colorThe valid strings developers can enter should, according to the spec, be CSS3 colorValues2. HTML4 color keywordsaqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,purple, red, silver, teal, white, and yellow. RGB Color valuesem { color: #f00 } #rgbem { color: #ff0000 } #rrggbbem { color: rgb(255,0,0) } integer range 0 - 255em { color: rgb(100%, 0%, 0%) } float range 0.0% - 100.0% RGBA Color values (with opacity)em { color: rgba(255,0,0,1) the same, with explicit opacityof 1em { color: rgba(100%,0%,0%,1) } the same, with explicit opacityof HSL Color valuesem { color: hsl(0, 100%, 50%) } redem { color: hsl(120, 100%, 50%) } green
  • 23. em { color: hsl(120, 100%, 25%) } light greenem { color: hsl(120, 100%, 75%) } dark greenem { color: hsl(120, 50%, 50%) } pastel green, and so onNote: Currently not all CSS 3 color values are supported in the Gecko engine. Forinstance the color values hsl(100%,25%,0) or rgb(0,100%,0) are not allowed. Ifdevelopers stick to the ones above, they wont run into any problems.Note: If developers set the strokeStyle and/or fillStyle property, the new valuebecomes the default for all shapes being drawn from then on. For every shapedevelopers want in a different color, they will need to reassign the fillStyle orstrokeStyle property. TRANSPARENCYglobalAlpha = O.O to 1.O; LINE STYLESlineWidth = value 1 (px) by defaultlineCap = type "butt", round or squarelineJoin = type round, bevel and "miter".miterLimit = value2.3.4.4 GRADIENTScreateLinearGradient(x1,y1,x2,y2)createRadialGradient(x1,y1,r1,x2,y2,r2)The createLinearGradient method takes four arguments representing the starting point(x1,y1) and end point (x2,y2) of the gradient.The createRadialGradient method takes six arguments. The first three argumentsdefine a circle with coordinates (x1,y1) and radius r1 and the second a circle withcoordinates (x2,y2) and radius r2.addColorStop(position, color)This method takes two arguments. The position must be a number between 0.0 and1.0 and defines the relative position of the color in the gradient. Setting this to 0.5 forinstance would place the color precisely in the middle of the gradient. The colorargument must be a string representing a CSS color (ie #FFF, rgba(0,0,0,1),etc).2.3.5 PATTERNS /*createPattern(image,type) type: repeat, repeat-x,repeat-y and no-repeat.*/
  • 24. 2.3.6 USING IMAGES2.3.6.1 GET THE IMG SOURCEvar img = new Image(); // Create new Image objectimg.onload = function(){ // execute drawImage statements here }img.src = myImage.png; // Set source path2.3.6.2 GET IMAGES ON THE SAME PAGE OR OTHER CANVAS ELEMENTSdocument.images collectiondocument.getElementsByTagName(name)document.getElementById(id name) DRAW IMAGESdrawImage(image, x, y)drawImage(image, x, y, width, height) //to scale it2.3.6.4 SLICING IMAGESdrawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) //s for Slicing Image & d for Destination Image2.3.7 TEXT TEXT PROPERTIES ON THE CONTEXT OBJECTfont: Specifies the font of the text, in the same manner as the CSSfont-family property)textAlign: Specifies the horizontal alignment of the text. Values:start, end, left, right, center. Default value: start.textBaseline: Specifies the vertical alignment of the text. Values:top, hanging, middle, alphabetic, ideographic, bottom. Default value:alphabetic.*/ TEXT METHODSfillText("text to draw", x, y)strokeText("text to draw", x, y)2.3.8 ANIMATION2.3.8.1 4 BASIC ANIMATION STEPSclearRect(0,0,width of canvas,height of canvas) //clear thecanvassave() //save the canvas state
  • 25. //draw animated shapes of the actual framerestore() //restore the canvas before drawing a new frame2.3.8.2 CONTROLLING AN ANIMATIONShapes (and their animation) are rendered once the script finished its execution.Hence for instance no way to do an animation within a loopsetInterval(animateShape,500); // the function executes every500mssetTimeout(animateShape,500); // the function exectutes after500ms