{"id":2941,"date":"2010-07-01T03:26:44","date_gmt":"2010-07-01T09:26:44","guid":{"rendered":"http:\/\/www.josuepalma.com\/blog\/?p=2941"},"modified":"2010-07-02T07:48:11","modified_gmt":"2010-07-02T13:48:11","slug":"flash-vs-canvas","status":"publish","type":"post","link":"https:\/\/www.josuepalma.com\/blog\/flash-vs-canvas\/","title":{"rendered":"Flash VS < canvas >"},"content":{"rendered":"<p><strong>Video, Audio<\/strong> y <strong>Canvas.<\/strong> De todas las nuevas etiquetas agregadas a HTML5 est\u00e1s son las que han puesto en duda el futuro de Flash.<\/p>\n<p>Desde el inicio me qued\u00f3 clara la situaci\u00f3n de las primeras 2 (que ya expliqu\u00e9), pero con Canvas siempre he tenido mis dudas pues lo considero muy poderoso,\u00a0 a mi parecer es el \u00fanico que le dar\u00e1 batalla a flash, permitanme explicarles por qu\u00e9.<\/p>\n<p><strong>Rendimiento<\/strong><\/p>\n<p>Estaba conforme con los resultados\u00a0 del test de rendimiento que hizo The man in blue, donde con un sencillo sistema de part\u00edculas se med\u00edan los fps que pod\u00eda lograr Canvas, HTML, SVG y Flash.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/themaninblue.com\/writing\/perspective\/2010\/03\/22\/graph_osx_ff.png\" alt=\"\" width=\"381\" height=\"314\" \/><\/p>\n<p><a href=\"http:\/\/www.themaninblue.com\/writing\/perspective\/2010\/03\/22\/\" target=\"_blank\">http:\/\/www.themaninblue.com\/writing\/perspective\/2010\/03\/22\/<\/a><\/p>\n<p>El ganador indiscutible fu\u00e9 Flash, hice el test en win7 con firefox, chrome, ie8 y el resultado fu\u00e9 el mismo. El rendimiento era el mejor argumento para eliminar a canvas como competencia de flash.<\/p>\n<p><strong>Pero<\/strong>&#8230; (chan chan chan chaaaaan)<\/p>\n<p>En el siguiente video podemos ver a IE9, Firefox 4, Chrome 6 y Opera, todas estas nuevas versiones de navegadores tienen aceleraci\u00f3n por hardware, lo que cambia totalmente el panorama para Canvas.<\/p>\n<p><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"380\" height=\"300\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/OIZUdZdFzOo&amp;hl=es_MX&amp;fs=1&amp;\" \/><param name=\"allowfullscreen\" value=\"true\" \/><embed type=\"application\/x-shockwave-flash\" width=\"380\" height=\"300\" src=\"http:\/\/www.youtube.com\/v\/OIZUdZdFzOo&amp;hl=es_MX&amp;fs=1&amp;\" allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object><\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=OIZUdZdFzOo\">http:\/\/www.youtube.com\/watch?v=OIZUdZdFzOo<\/a><\/p>\n<p>El rendimiento es increible (Firefox 4 FTW!) aunque no estoy seguro si con estas versiones canvas superaria a Flash en el test anterior (pues no tengo ninguno de estos instalado)\u00a0creo que si tendr\u00edamos resultados similares.<\/p>\n<p><strong>Implementaci\u00f3n<\/strong><\/p>\n<p><a href=\"http:\/\/www.xs4all.nl\/~peterned\/3d\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2946\" title=\"flickr-canvas\" src=\"http:\/\/www.josuepalma.com\/blog\/wp-content\/uploads\/2010\/06\/flickr-canvas.jpg\" alt=\"\" width=\"280\" height=\"275\" \/><\/a><\/p>\n<p>Canvas &amp; Flickr : <a href=\"http:\/\/www.xs4all.nl\/%7Epeterned\/3d\/\">http:\/\/www.xs4all.nl\/~peterned\/3d\/<\/a><\/p>\n<p>Este ejemplo utiliza el api de flickr para hacer un grid en 3d de fotografias, afortunadamente con canvas todo el trabajo lo hace Javascript, con el c\u00faal muchos flashers estamos familiarizados:<\/p>\n<pre lang=\"javascript\">\r\n\r\nvar stage = new Clay.Stage(640, 480, document.getElementById(\"canvas\"));\r\nvar world = stage.getWorld();\r\nvar camera = stage.getCamera();\r\n\r\ncamera.set(0, 0, 800);\r\ncamera.setTarget(Clay.Vector.ZERO);\r\n\r\nvar light = new Clay.Light(-2,-2, 1, 3, .5);\r\nlight.setColor(255, 255, 255)\r\nworld.addLight(light);\r\n\r\nstage.resizeTo(640, 480);\r\n\r\nvar palet = [\r\n    new Clay.Material(37,47,51, 1, stage),\r\n    new Clay.Material(65,92,79, 1, stage),\r\n    new Clay.Material(134,156,128, 1, stage),\r\n    new Clay.Material(147,194,204, 1, stage),\r\n    new Clay.Material(206,234,238, 1, stage)\r\n];\r\n\r\nvar rib = 256;\r\nvar amount = 3;\r\nvar offset = 266;\r\nfunction rand(range) { return Math.floor(Math.random() * range); };\r\n\r\nfor (var i=0; i<amount; i++) {\r\n    for (var j=0; j<amount; j++) {\r\n        for (var k=0; k<amount; k++) {\r\n        \r\n            var x = ((offset * i) - (offset * (amount-1))\/2)*1.5,\r\n                y = (offset * j) - (offset * (amount-1))\/2,\r\n                z = (offset * k) - (offset * (amount-1))\/2;\r\n\r\n            var m = palet[rand(palet.length)];\r\n            \r\n            var cube = new Clay.Cube(x, y, z, 4, rib, rib, m);\r\n            world.addShape(cube);\r\n        }\r\n    }\r\n}\r\n\r\nvar flickr = [];\r\nvar photos = document.getElementById(\"photos\").getElementsByTagName(\"img\");\r\n\r\nfor(var i=0; i<photos.length; i++) {\r\n    var photo = photos[i];\r\n    var parent = photo.parentNode;\r\n    if(\/^a$\/i.test(parent.nodeName)) {\r\n        flickr.push(\r\n            new Clay.Texture(photos[i].src, stage)\r\n        );\r\n    }\r\n}\r\n\r\n\r\n<\/pre>\n<p>Cabe mencionar que aunque tenemos CSS3 considero Canvas la mejor opci\u00f3n para graphics, animaci\u00f3n o hasta interacci\u00f3n, si bien hay alg\u00fan desquiciado que se atreve a hacerlo con CSS3 creo que no es una buena pr\u00e1ctica, pero ya har\u00e9 un post de CSS3 vs Canvas..<\/p>\n<p>Volviendo al versus, se me hace un poco injusto comparar el engine del ejemplo anterior contra un PV3d , porque canvas a\u00fan esta en pa\u00f1ales y tiene mucho por delante, si bien ya hay un gran avance creo que lo mejor esta por venir, me entusiasma pensar que pronto alguien sacara un framework 3d completo para\u00a0 JQuery.<\/p>\n<p>A mi parecer Canvas llega a suplir todo lo que le faltaba a Javascript para poder compararse con Actionscript3 en el terreno de graphics y al ser un lenguaje no tan ordenado como AS3 se vuelve m\u00e1s f\u00e1cil para algunos de implementar, que es un punto clave en el futuro de canvas<\/p>\n<p>Veamos Unos Ejemplos:<\/p>\n<p><strong>Dibujo de formas<\/strong><\/p>\n<pre lang=\"actionscript3\">\r\n\/\/ Actionscript 3\r\nvar sprite:Sprite = new Sprite();\r\n    sprite.graphics.beginFill(0x333333,1) \r\n    sprite.graphics.lineTo(10, 10) \/\/ lineas\r\n    sprite.graphics.drawRect(0, 0, 100, 100) \/\/ dibuja rect\u00e1ngulos\r\n    sprite.graphics.endFill()\r\naddChild(sprite)\r\n<\/pre>\n<pre lang=\"javascript\">\r\n\/\/HTML 5 Canvas\r\n<canvas id=\"canvas\">\r\nTu navegador chafa no soporta Canvas\r\n<\/canvas>\r\n<script>\r\nvar canvas = document.getElementById('canvas');  \r\nvar context = canvas.getContext('2d');  \r\n     context.fillStyle = \"#33\";\r\n     context.lineTo(10, 10) \/\/ dibuja lineas\r\n     context.fillRect(0,0,100,100); \/\/ dibuja rectangulo\r\n<\/script>\r\n\r\n<\/pre>\n<p><strong>Trabajo con Bitmaps<\/strong><\/p>\n<p>Carga de imagenes<\/p>\n<pre lang=\"actionscript3\">\r\n\/\/ Actionscript 3\r\nvar src:URLRequest = new URLRequest(\"image.jpg\")\r\nvar loader:Loader = new Loader();\r\n    loader.load(src);\r\n    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImage)\r\n                \r\nfunction onLoadImage(e:Event):void{\r\n    var image:Bitmap = Bitmap(e.target.content);\r\n    addChild(image)\r\n}\r\n<\/pre>\n<pre lang=\"javascript\">\r\n\/\/HTML5 Canvas\r\nvar image = new Image()\r\n     image.src= \"image.jpg\";\r\n     img.onload = function(){  \r\n          context.drawImage(image, 0, 0);\r\n         }  \r\n<\/pre>\n<p>Manipulaci\u00f3n de Pixeles<\/p>\n<pre lang=\"actionscript3\">\r\n\/\/Actionscript 3\r\nvar data:BitmapData = image.bitmapData;\r\nfor (var px:int=0; px<image.width; px++) {\r\n\tfor (var py:int=0; py<image.height; py++){\r\n\t\t \r\n               var pixel:uint = data.getPixel32(px , py)\t\/\/ obtiene pixeles\r\n               data.setPixel32(xx, yy, color);                \/\/escribe pixeles\r\n   \r\n\t}\r\n}\r\n<\/pre>\n<pre lang=\"javascript\">\r\n\/\/Canvas\r\n\r\nvar image = context.createImageData(50,50);\r\nvar data = image.data;\r\n\r\nfor (var i = 0; n = data.length, i < n; i +=4) {\r\n \/\/ obtiene pixeles\r\n  data [i  ] = 255 - pix[i  ]; \/\/ rojo\r\n  data [i+1] = 255 - pix[i+1]; \/\/ verde\r\n  data [i+2] = 255 - pix[i+2]; \/\/ azul\r\n}\r\n\r\ncontext.putImageData(image, 0,0);   \/\/escribe pixeles\r\n<\/pre>\n<p>Por supuesto la comparaci\u00f3n podr\u00eda ser m\u00e1s exhaustiva (texto, transformaciones, efectos, paths avanzados) pero les dejo estas para darse una  idea del alcance que canvas tiene (a\u00fan sigo aprendiendo el 2d Context por lo que puede que algo del c\u00f3digo canvas tenga errores). <\/p>\n<p>Pero todo lo que he escrito es para coders \u00bfque hay de todos aquellos que no hacen javascript y que odian tanto a flash que quieren moverse urgentemente a Canvas? aqui est\u00e1 la soluci\u00f3n:<\/p>\n<p><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"380\" height=\"300\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/v69S22ZBBqA&amp;hl=es_ES&amp;fs=1&amp;\" \/><param name=\"allowfullscreen\" value=\"true\" \/><embed type=\"application\/x-shockwave-flash\" width=\"380\" height=\"300\" src=\"http:\/\/www.youtube.com\/v\/v69S22ZBBqA&amp;hl=es_ES&amp;fs=1&amp;\" allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object><\/p>\n<p>Ya casi en la \u00faltima parte de este video (3:20) podemos ver una animaci\u00f3n en Canvas utilizando el smart Paste de Dreamweaver, se sorprender\u00e1n desde donde fu\u00e9 creada :D (FXG FTW!)<\/p>\n<p>Espero haber dejado en claro el panorama de Canvas, es la parte que mas me entusiasma de HTML5, tratar\u00e9 de meterme m\u00e1s pero tampoco dejar\u00e9 Flash, aun tiene\u00a0cosas interesantes como pixel Bender(que jamas he usado) y el acceso a la camara con el que puedes hacer cosas interesantes con graphics, Flartoolkit por ejemplo.<\/p>\n<p>Creo que en para este versus a comparacion de los anteriores declarar\u00e9 un empate :).<\/p>\n<p>Para terminar este post quiero aclarar algo: Jam\u00e1s ha sido culpa de Flash, si a la gente le das un lienzo en blanco pueden hacerte desde cosas increibles hasta asquerosidades,\u00a0 ya estoy ansioso por ver los primeros banners parpadeantes \u00f3\u00a0 los primeros intros animados en Canvas, solo que ahora ser\u00e1n intros estandares.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Video, Audio y Canvas. De todas las nuevas etiquetas agregadas a HTML5 est\u00e1s son las que han puesto en duda el futuro de Flash. Desde\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[104,30,103],"class_list":["post-2941","post","type-post","status-publish","format-standard","hentry","category-desarrollo","tag-canvas","tag-flash","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts\/2941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/comments?post=2941"}],"version-history":[{"count":40,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts\/2941\/revisions"}],"predecessor-version":[{"id":3022,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/posts\/2941\/revisions\/3022"}],"wp:attachment":[{"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/media?parent=2941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/categories?post=2941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.josuepalma.com\/blog\/wp-json\/wp\/v2\/tags?post=2941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}