flash_on Anuncios

Flash VS < canvas >

Video, Audio y Canvas. De todas las nuevas etiquetas agregadas a HTML5 estás son las que han puesto en duda el futuro de Flash.

Desde el inicio me quedó clara la situación de las primeras 2 (que ya expliqué), pero con Canvas siempre he tenido mis dudas pues lo considero muy poderoso,  a mi parecer es el único que le dará batalla a flash, permitanme explicarles por qué.

Rendimiento

Estaba conforme con los resultados  del test de rendimiento que hizo The man in blue, donde con un sencillo sistema de partículas se medían los fps que podía lograr Canvas, HTML, SVG y Flash.

http://www.themaninblue.com/writing/perspective/2010/03/22/

El ganador indiscutible fué Flash, hice el test en win7 con firefox, chrome, ie8 y el resultado fué el mismo. El rendimiento era el mejor argumento para eliminar a canvas como competencia de flash.

Pero… (chan chan chan chaaaaan)

En el siguiente video podemos ver a IE9, Firefox 4, Chrome 6 y Opera, todas estas nuevas versiones de navegadores tienen aceleración por hardware, lo que cambia totalmente el panorama para Canvas.

http://www.youtube.com/watch?v=OIZUdZdFzOo

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) creo que si tendríamos resultados similares.

Implementación

Canvas & Flickr : http://www.xs4all.nl/~peterned/3d/

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úal muchos flashers estamos familiarizados:

 
var stage = new Clay.Stage(640, 480, document.getElementById("canvas"));
var world = stage.getWorld();
var camera = stage.getCamera();
 
camera.set(0, 0, 800);
camera.setTarget(Clay.Vector.ZERO);
 
var light = new Clay.Light(-2,-2, 1, 3, .5);
light.setColor(255, 255, 255)
world.addLight(light);
 
stage.resizeTo(640, 480);
 
var palet = [
    new Clay.Material(37,47,51, 1, stage),
    new Clay.Material(65,92,79, 1, stage),
    new Clay.Material(134,156,128, 1, stage),
    new Clay.Material(147,194,204, 1, stage),
    new Clay.Material(206,234,238, 1, stage)
];
 
var rib = 256;
var amount = 3;
var offset = 266;
function rand(range) { return Math.floor(Math.random() * range); };
 
for (var i=0; i<amount; i++) {
    for (var j=0; j<amount; j++) {
        for (var k=0; k<amount; k++) {
 
            var x = ((offset * i) - (offset * (amount-1))/2)*1.5,
                y = (offset * j) - (offset * (amount-1))/2,
                z = (offset * k) - (offset * (amount-1))/2;
 
            var m = palet[rand(palet.length)];
 
            var cube = new Clay.Cube(x, y, z, 4, rib, rib, m);
            world.addShape(cube);
        }
    }
}
 
var flickr = [];
var photos = document.getElementById("photos").getElementsByTagName("img");
 
for(var i=0; i<photos.length; i++) {
    var photo = photos[i];
    var parent = photo.parentNode;
    if(/^a$/i.test(parent.nodeName)) {
        flickr.push(
            new Clay.Texture(photos[i].src, stage)
        );
    }
}

Cabe mencionar que aunque tenemos CSS3 considero Canvas la mejor opción para graphics, animación o hasta interacción, si bien hay algún desquiciado que se atreve a hacerlo con CSS3 creo que no es una buena práctica, pero ya haré un post de CSS3 vs Canvas..

Volviendo al versus, se me hace un poco injusto comparar el engine del ejemplo anterior contra un PV3d , porque canvas aún esta en pañales 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  JQuery.

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ás fácil para algunos de implementar, que es un punto clave en el futuro de canvas

Veamos Unos Ejemplos:

Dibujo de formas

// Actionscript 3
var sprite:Sprite = new Sprite();
    sprite.graphics.beginFill(0x333333,1) 
    sprite.graphics.lineTo(10, 10) // lineas
    sprite.graphics.drawRect(0, 0, 100, 100) // dibuja rectángulos
    sprite.graphics.endFill()
addChild(sprite)
//HTML 5 Canvas
<canvas id="canvas">
Tu navegador chafa no soporta Canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');  
var context = canvas.getContext('2d');  
     context.fillStyle = "#33";
     context.lineTo(10, 10) // dibuja lineas
     context.fillRect(0,0,100,100); // dibuja rectangulo
</script>

Trabajo con Bitmaps

Carga de imagenes

// Actionscript 3
var src:URLRequest = new URLRequest("image.jpg")
var loader:Loader = new Loader();
    loader.load(src);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadImage)
 
function onLoadImage(e:Event):void{
    var image:Bitmap = Bitmap(e.target.content);
    addChild(image)
}
//HTML5 Canvas
var image = new Image()
     image.src= "image.jpg";
     img.onload = function(){  
          context.drawImage(image, 0, 0);
         }

Manipulación de Pixeles

//Actionscript 3
var data:BitmapData = image.bitmapData;
for (var px:int=0; px<image.width; px++) {
	for (var py:int=0; py<image.height; py++){
 
               var pixel:uint = data.getPixel32(px , py)	// obtiene pixeles
               data.setPixel32(xx, yy, color);                //escribe pixeles
 
	}
}
//Canvas
 
var image = context.createImageData(50,50);
var data = image.data;
 
for (var i = 0; n = data.length, i < n; i +=4) {
 // obtiene pixeles
  data [i  ] = 255 - pix[i  ]; // rojo
  data [i+1] = 255 - pix[i+1]; // verde
  data [i+2] = 255 - pix[i+2]; // azul
}
 
context.putImageData(image, 0,0);   //escribe pixeles

Por supuesto la comparación podría ser más exhaustiva (texto, transformaciones, efectos, paths avanzados) pero les dejo estas para darse una idea del alcance que canvas tiene (aún sigo aprendiendo el 2d Context por lo que puede que algo del código canvas tenga errores).

Pero todo lo que he escrito es para coders ¿que hay de todos aquellos que no hacen javascript y que odian tanto a flash que quieren moverse urgentemente a Canvas? aqui está la solución:

Ya casi en la última parte de este video (3:20) podemos ver una animación en Canvas utilizando el smart Paste de Dreamweaver, se sorprenderán desde donde fué creada 😀 (FXG FTW!)

Espero haber dejado en claro el panorama de Canvas, es la parte que mas me entusiasma de HTML5, trataré de meterme más pero tampoco dejaré Flash, aun tiene cosas 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.

Creo que en para este versus a comparacion de los anteriores declararé un empate :).

Para terminar este post quiero aclarar algo: Jamás ha sido culpa de Flash, si a la gente le das un lienzo en blanco pueden hacerte desde cosas increibles hasta asquerosidades,  ya estoy ansioso por ver los primeros banners parpadeantes ó  los primeros intros animados en Canvas, solo que ahora serán intros estandares.



Un comentario

Gracias por la entrada. Me pareció bastante interesante ;).

Bien, sobre el uso de canvas, quiero decir que el hecho de que sea un elemento estándar y nativo de HTML lo hace de partida ganar puntos, y más aún viendo que las aplicaciones que se entán desarrollando hoy en día (a un año desde que se escribió este artículo) en él no tienen nada que envidiarle a las hechas con flash.

Personalmente me parece que el futuro es canvas y el tiempo hasta ahora ha estado apoyando esta postura.

¡Saludos!


Alexis Advance

Deja un comentario

Posts Relacionados

Flash Mini Builder!

http://www.victordramba.com/?p=31 Wow!! chequenlo 🙂

Women only

Creo que el que me de risa esta GRAN idea no me hace machista, pero de verdad es buena (viendola […]

WiiSpray

WiiSpray Teaser from Martin Lihs on Vimeo. http://www.wiispray.com

Vizual PV3D

Vizual PV3D from Juxt Interactive on Vimeo. VizualPV3D is a Flash Visualization Application that provides a GUI interface to create […]

Open Source Media Framework

Open Source Media Framework enables developers to easily assemble pluggable components to create high-quality, full-featured playback experiences. The open aspect […]

CMYK en 3D

Solo haz Click y arrastra 🙂 http://www.flashgamer.com/a/cmyk/Basic07_plane_hi.html

fbjs-bridge , comunicando as3 y javascript en facebook

Quiero comenzar a escribir tutoriales en el blog por que me los piden mucho, pero antes de eso para entrar […]

Aviary Roc Music Creator

Create music easily Make music loops and ringtones using a simple point and click interface. 50 Free Instruments Choose from […]

Flash DE

Este sábado 5 de setiembre tres comunidades dedicadas a nuestro amado Flash Platform (Flash_mc, RIActive y GarageFlash) se unen para […]

Flash Builder y Flash Catalyst disponibles!

A bajar!! Adobe® Flash® Builder™ 4 beta (Jun 1) Flash Builder 4 delivers a long list of new features, plus […]

Josué Palma 2019

Este blog fué diseñado, programado y escrito por mí.
No olvides seguirme en mis redes:

Contactame:

Contestaré lo más pronto posible

Cancelar Enviar