Your SlideShare is downloading. ×
0
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

I Can't Believe It's Not Flash

73,974

Published on

My talk at Webstock 2010 about up and coming open web technologies.

My talk at Webstock 2010 about up and coming open web technologies.

Published in: Technology, Art & Photos
18 Comments
91 Likes
Statistics
Notes
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
    ONLY THREE DAYS TO VOTE IN THE CONTEST!.. VOTING ENDS NOV.29/10..
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·. .
    Hello My Friend ♥
    ☀ We would very much appreciate if you would kindly take the time to view & vote for Doina’s two shows http://www.slideshare.net/doina/end-of-life-presentation-horror-story-contest-slideshare-2010 http://www.slideshare.net/doina/andante-slideshare-2010
    The shows are now on videos so you don’t have to download .. Thank you very much and enjoy a wonderful day ..
    Spiderwebb99 on Slideshare .. Vanessa ♥
    ●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.☀•჻¨●.·☀•჻¨●·.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here

  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • HTML5 vs Flash, it is really a funny war. From mashable votes, more people like HTML5 more than Flash. Flash is No.1 animation technology in the market for a long time. Now it is time to choose another big boss!
    G

    http://www.tophotdeal.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
73,974
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
681
Comments
18
Likes
91
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. I Can’t Believe It’s Not Flash! @thomasfuchs
  • 2. <omg  code="on  slides"/>
  • 3. Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
  • 4. Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
  • 5. Performance hit
  • 6. Performance hit JavaScript Reflow Rendering Paint
  • 7. Performance hit JavaScript Reflow Rendering Paint
  • 8. Performance hit JavaScript Reflow Rendering Paint
  • 9. Performance hit JavaScript Reflow Rendering Paint
  • 10. Performance hit JavaScript Reflow Rendering Paint
  • 11. Browser CSS animation/ transitions Timer Browser Reflow Rendering Paint updates CSS
  • 12. Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
  • 13. Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
  • 14. -webkit-transform Paint JavaScript or Browser sets CSS
  • 15. <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd"> <html  xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en"  lang="en"> <head>    <meta  http-­‐equiv="Content-­‐Type"  content="text/html;  charset=utf-­‐8"/>    <title>index</title>    <style  type="text/css"  media="screen">        div  {            position:  absolute;            border:  3px  solid  red;        }        #d1  {            left:  20px;  top:  20px;  width:  400px;  height:  400px;            -­‐webkit-­‐transform:translateZ(0px);        }        #d2  {            left:  100px;  top:  30px;  width:  150px;  height:  100px;            -­‐webkit-­‐transform:translateZ(-­‐100px);        }        #d3  {            left:  300px;  top:  40px;  width:  100px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐200px);        }        #d4  {            left:  320px;  top:  80px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐300px);        }        #d5  {            left:  280px;  top:  90px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐400px);        }        body  {            -­‐webkit-­‐transform-­‐style:  preserve-­‐3d;
  • 16.        #d2  {            left:  100px;  top:  30px;  width:  150px;  height:  100px;            -­‐webkit-­‐transform:translateZ(-­‐100px);        }        #d3  {            left:  300px;  top:  40px;  width:  100px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐200px);        }        #d4  {            left:  320px;  top:  80px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐300px);        }        #d5  {            left:  280px;  top:  90px;  width:  90px;  height:  50px;            -­‐webkit-­‐transform:translateZ(-­‐400px);        }        body  {            -­‐webkit-­‐transform-­‐style:  preserve-­‐3d;            -­‐webkit-­‐transform:rotateX(0deg)  rotateY(0deg)  rotateZ(0deg)  perspective(0);        }        body.stage2  {            -­‐webkit-­‐transition:  -­‐webkit-­‐transform  10s;            -­‐webkit-­‐transform:rotateX(30deg)  rotateY(-­‐50deg)  rotateZ(10deg)  perspective(0);        }    </style> </head> <body>    <div  id="d1"></div>    <div  id="d2"></div>    <div  id="d3"></div>    <div  id="d4"></div>    <div  id="d5"></div> </body> </html>
  • 17. Safari on Snow Leopard, or on Windows: Nokia’s Starlight browser (alpha) http://www.starlight-webkit.org/
  • 18. http://pepsicozeitgeist.com/
  • 19. Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames) http://jilion.com/sublime/video
  • 20. Canvas Timer JavaScript Paint uses Canvas APIs
  • 21. Physics engine with Canvas Timer 1) clear canvas Paint 2) physics iteration 3) draw shapes Box2D physics engine
  • 22. function  createBall(world,  x,  y)  {    var  ballSd  =  new  b2CircleDef();    ballSd.density  =  0.3;    ballSd.radius  =  20+Math.random()*20;    ballSd.restitution  =  0.1;    ballSd.friction  =  0.2;    var  ballBd  =  new  b2BodyDef();    ballBd.rotation  =  0.3;    ballBd.AddShape(ballSd);    ballBd.position.Set(x,y);    return  world.CreateBody(ballBd); }
  • 23.                    world.Step(ms,1);
  • 24. 3) draw shapes box2d objects/ positions canvas
  • 25. http://pepsicozeitgeist.com/
  • 26. Vector graphics SVG + VML JavaScript Reflow Rendering Paint creates vector graphics nodes
  • 27. http://raphaeljs.com/
  • 28. <path  fill="none"  stroke="#5cbfff"   d="M52.2,40.5L47.23,55.5L38.53,70.5L33.88,85.5L36.63,100.5L50.1 ,115.5L70.7,130.5L97.85,145.5L123.65,160.5L139.3,175.5L126.2,19 0.5L132.95,205.5L157.58,220.5L143.85,235.5L155.25,250.5L151.43, 265.5L149.05,280.5L104.5,295.5L103.6,310.5L97.85,325.5L94.58,34 0.5L86.7,355.5L78.95,370.5L69.35,385.5M56.4,440.5L42.3,455.5L32 .93,470.5L26.38,485.5L28.23,500.5L28.95,515.5L40.45,530.5L57.55 ,545.5L80.18,560.5L123.55,575.5L144.95,590.5L137.33,605.5L134.9 8,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L106.2 5,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,7 70.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L 25.63,900.5L24.05,915.5L33.05,930.5L48.3,945.5L65.35,960.5L115. 2,975.5L137.7,990.5L136.43,1005.5L102.28,1020.5L132.28,1035.5L1 37.5,1050.5L132.05,1065.5L155.83,1080.5L107.3,1095.5L95.98,1110 .5L94.73,1125.5L94.65,1140.5L86.25,1155.5L83.4,1170.5L70.48,118 5.5M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05,13 00.5L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L159.7 8,1375.5L176.05,1390.5L164.13,1405.5L139.48,1420.5L131.53,1435. 5L164.83,1450.5L161.15,1465.5L157.2,1480.5L112.68,1495.5L105.68 ,1510.5L103.83,1525.5L104.25,1540.5L92.5,1555.5L91.35,1570.5L70 .48,1585.5M54.05,1640.5L48.6,1655.5L35.02,1670.5L32.8,1685.5L36 .98,1700.5L41.75,1715.5L63.78,1730.5L90.6,1745.5L112.28,1760.5L 161.35,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65,1 835.5L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L10 4.68,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L6 8.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L3
  • 29. http://pepsicozeitgeist.com/
  • 30. WebGL shaders Timer JavaScript Paint
  • 31. WebGL <script  id="vshader"  type="x-­‐shader/x-­‐vertex">    uniform  mat4  u_modelViewMatrix;    uniform  mat4  u_modelViewProjMatrix;    uniform  mat4  u_normalMatrix;    uniform  vec3  lightDir;    attribute  vec3  vNormal;    attribute  vec4  vTexCoord;    attribute  vec4  vPosition;                    varying  float  v_Dot;    varying  vec2  v_texCoord;                    void  main()    {        gl_Position  =  u_modelViewProjMatrix  *  vPosition;        v_texCoord  =  vTexCoord.st;        vec4  transNormal  =  u_normalMatrix  *  vec4(vNormal,1);        v_Dot  =  max(dot(transNormal.xyz,  lightDir),  0.0);    } </script>
  • 32.    var  exampleScene  =  scene(        {},        /*  A  renderer  node  binds  subnodes  to  a  WebGL  canvas  element              defined  in  the  HTML  tab  then  clears  the  depth  and  colour  buffers          */        renderer({                                canvasId:  'theCanvas',                                clear  :  {  depth  :  true,  color  :  true}                        },                /*  A  simple  phong  GLSL  shader  to  render  sub-­‐nodes,  with                      a  single  light  source.  This  shader  type  only  supports                      a  one  light  source.                  */                shader(                    {  type:  'simple-­‐shader'  },                    lights( scenejs.org                        {                            lights:  [                                {                                    pos:  {  x:  -­‐30.0,  y:  30.0,  z:  -­‐30.0  }                                }                            ]},                        /*  Perspective  transformation                          */
  • 33. http://github.com/OneGeek/WebGLU
  • 34. http://learningwebgl.com/
  • 35. http://ftp.mozilla.org/pub/mozilla.org/ firefox/nightly/latest-trunk/
  • 36. JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL
  • 37. THANKS! @thomasfuchs

×