Contenido

Logotipo de Firefox hecho con canvas

9 abr

+ 4

Erick León Bolinaga de la Universidad de las Ciencias Informáticas en Cuba, ha creado un impresionante trabajo con <canvas /> para dibujar el logotipo de Mozilla Firefox completamente con esta tecnología. El resultado podéis verlo directamente aquí, gracias al HTML que el mismo Erick me ha facilitado. Una muestra más de lo interesante que se está convirtiendo el desarrollo web con las nuevas tecnologías.

Quake2 portado a HTML5 (con WebGL)

2 abr

+ 4

Con la finalidad de demostrar el potencial de las nuevas tecnologías aparece esta versión de Quake2 desarrallado con prácticamente todas ellas a la vez (HTML5, WebGL, Canvas, <audio />, LocalStorage y WebSockets) usando GWT. El resultado es simplemente…ESPECTACULAR!!! (solo Google Chrome/Safari).

Ambilight para HTML5 Video

26 mar

+ 13

El tag <video /> del estándar HTML5 va a convertirse en el formato de visualizar videos en Internet, es solo cuestión de tiempo. Ya hemos visto algunas interesantes aplicaciones que se le puede dar, pero esta es sin duda, y por ahora, la más espectacular que he visto.

ambilight_video_html5
(Ver Imagen)

Mediante <canvas /> conseguimos simular el efecto luminoso que Phillips impuso en sus televisores planos con los colores que vemos en el vídeo que estamos reproduciendo. Podemos ver el código fuente que lo implementa directamente desde aquí.

Ver ejemplo.

Flash vs HTML5, pongámoslos a prueba

22 mar

+ 75

Se habla mucho de que HTML5 va a matar a Flash, y que las nuevas tecnologías que se están integrando en los nuevos estándares ofrecen versiones compatibles muy superiores a lo que ahora podemos conseguir con flash.

Pero la gente de Man in Blue, no se contentó con solo leer lo que otros opinaban, así que se han puesto manos a la obra para realizar un benchmark entre los diferentes lenguajes disponibles.

flash-vs-html5
(Ver Imagen)

En el ejemplo ha usado una aplicación que genera partículas aleatorias y las mueve por la página caóticamente haciendo trabajar el procesador de nuestra máquina.

Podemos verla funcionando en:

Los resultados

graph_win_ie
(Ver Imagen)
graph_win_chrome
(Ver Imagen)
graph_osx_safari
(Ver Imagen)
graph_osx_ff
(Ver Imagen)

Como podemos ver en las gráficas, la superioridad de Flash está latente en todos los navegadores. Da igual el número de partículas que se usen, los resultados, actualmente, son muy superiores a los conseguidos con las otras alternativas.

Han ganado esta batalla, pero aún no han ganado la guerra“, con esta frase expreso lo que siento al ver estos resultados. Flash está ahí, y poco a poco esto debería de ir cambiando. Tendremos que estar atentos :D

Sketchpad, paint online con tecnología HTML5

10 feb

+ 6

Hace unos días descubrí via delicious, Sketchpad, un paint enriquecido completamente online que se aprovecha de las nuevas herramientas que HTML5 pone a nuestra disposición.

sketchpad
(Ver Imagen)

El resultado, como se puede ver, es realmente sorprendente. No solo por lo elegante del diseño, sinó por la soltura con la que se mueve y las posibilidades que ofrece:

  • Uso de degradados
  • Uso de patrones
  • Paleta de colores
  • Historial de modificaciones
  • Posibilidad de salvar el dibujo con Data URI

Sin duda una muestra lo que nos vamos a ir encontrando por Internet en un futuro no muy lejano.

CanvasPixelArray para manipular imágenes desde Javascript

3 ene

+ 7

Hace unos meses, Andrés Fernandez nos deleitó con una implementación que nos permitía aplicarle un filtro de escala de grises a imágenes desde Javascript. La idea, era crear un objeto <canvas /> al que le añadimos la imagen a su contexto para después ir procesándola. El resultado era eficaz, pero como el mismo comenta, lento para un uso práctico.

toGray
(Ver Imagen)

Con el cambio de año, el script también ha sufrido un cambio, y menudo cambio. Se trata de un cambio que nos permite aplicar el efecto en porciones de segundo, haciendo que su uso a nivel práctico sea factible.

toGray2
(Ver Imagen)

Como curiosidad decir que, con este experimento no solo podremos convertir imágenes en imágenes en blanco y negro, sinó que como veremos en el post, podemos aplicarle diferentes colores e incluso podemos convertir imágenes en “asciart” :D

toGray3
(Ver Imagen)

¿Conocéis a este personaje? :D

Another World JS

5 nov

+ 4

Impresionante versión del famoso juego Another World implementado completamente en Javascript. Impresionante el uso de <canvas /> e impresionante el consumo de CPU :D

Hola mundo en canvas

10 sep

+ 5

En Carsonified.com nos muestran un interesante tutorial con el que iniciarnos en el uso de <canvas /> mediante Javascript.

// Comprobamos que <canvas /> esté disponible
if(drawingCanvas && drawingCanvas.getContext) {
 // Inicializamos el lienzo 2D
 var context = drawingCanvas.getContext('2d');

// Creamos la cara amarilla
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFF00";
 context.beginPath();
 context.arc(100,100,50,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 // Añadimos 2 ojos verdes
 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(80,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(80,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 context.strokeStyle = "#000000";
 context.fillStyle = "#FFFFFF";
 context.beginPath();
 context.arc(120,80,8,0,Math.PI*2,true);
 context.closePath();
 context.stroke();
 context.fill();

 context.fillStyle = "#009966";
 context.beginPath();
 context.arc(120,80,5,0,Math.PI*2,true);
 context.closePath();
 context.fill();

 // Creamos una nariz con firma de diamante
 context.fillStyle = "#000000";
 context.beginPath();
 context.moveTo(93,100);
 context.lineTo(100,93);
 context.lineTo(107,100);
 context.lineTo(100,107);
 context.closePath();
 context.fill();

 // Añadimos la sonrisa                   
 context.strokeStyle = "#000000";
 context.beginPath();
 context.moveTo(70,110);
 context.quadraticCurveTo(100,150,130,110);
 context.quadraticCurveTo(100,150,70,110);                
 context.closePath();
 context.stroke();
}

Este código, nos permite generar la cara amarilla que vemos en el “Hello World” que vemos debajo:

hello-world-canvas
(Ver Imagen)

Mucho código pero muchas posibilidades.

Doodle.js, librería para trabajar con canvas

17 jun

+ 0

Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <!-- CANVAS PARA IE -->
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->

  <!-- SCRIPT DOODLE -->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <!-- JAVASCRIPT -->
  <script type="text/javascript">
    function init() {
			(function(oo) {
			 oo.canvas('#my_canvas');
			 var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
			 box.draw(); //draw a red box with initial parameters

			 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
			 box.modify({fill:'purple'}).rotate(-45).draw();
			 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
			 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();

			})($doodle);
    };
  </script>
  </head>
  <body onload="javascript:init();">
  <!-- ELEMENTO CONTENEDOR CANVAS -->
    <canvas id="my_canvas" width="600" height="400">
      <p>Error: El elemento canvas no está disponible para este navegador.</p>
    </canvas>
  </body>
</html>

Ejemplos

No os perdais algunos de los ejemplos disponibles en la página de la librería:

Optimizando Gradientes en Javascript

13 jun

+ 0

Interesante artículo de Andrés Fernández en el que nos muestra la forma de optimizar y disfrutar de gradientes mediante Javascript. Para ello hace uso de <canvas />, un elemento bastante bien adoptado por todos los navegadores modernos y fácil de parchear para Internet Explorer. Áltamente recomendable. Gracias Jose Antonio.