JMiur [E]

No, esto no es para ser utilizado en ninguna parte pero llama la atención la simplicidad del código y muestra lo fantástico de algunas de las posibilidades que nos brindan el CSS y la etiqueta canvas.

Este, es uno de los muchos demos que hay en Thecodeplayer.com/ y lo que hace es transformar una imagen (un sprite) en una animación con caracteres Ascii.


La etiqueta canvas tiene una serie de funciones que nos permiten manipular las imágenes de muchos modos pero, también tiene una restricción de seguridad, sólo funciona si esas imágenes están en el mismo servidor que la página por lo tanto, en Blogger es imposible usarla de modo normal y, en este caso, lo que hice para divertirme fue subir el HTML y la imagen a Dropbox y mostrarla con un iframe.


Para los curiosos, este sería el código fuente:

<html>
<head>
<style>
* {margin: 0; padding: 0;}
#ascii {font-family: monospace;font-size: 11px;line-height: 70%;}
#sprite {display: none;}
#container {overflow: hidden;display: inline-block;}
</style>
<script>
window.onload = function(){
  var r, g, b, gray;
  var character, line = "";
  var sprite = document.getElementById("sprite");
  var W = sprite.width;
  var H = sprite.height;
  var tcanvas = document.createElement("canvas");
  tcanvas.width = W;
  tcanvas.height = H; //same as the image
  var tc = tcanvas.getContext("2d");
  tc.fillStyle = "white";
  tc.fillRect(0, 0, W, H);
  tc.drawImage(sprite, 0, 0, W, H);
  var pixels = tc.getImageData(0, 0, W, H);
  var colordata = pixels.data;
  var ascii = document.getElementById("ascii");
  for(var i = 0; i < colordata.length; i = i+4){
    r = colordata[i];
    g = colordata[i+1];
    b = colordata[i+2];
    gray = r*0.2126 + g*0.7152 + b*0.0722;
    if(gray > 250) character = " ";
    else if(gray > 230) character = "`";
    else if(gray > 200) character = ":";
    else if(gray > 175) character = "*";
    else if(gray > 150) character = "+";
    else if(gray > 125) character = "#";
    else if(gray > 50) character = "W";
    else character = "@";
    if(i != 0 && (i/4)%W == 0){
      ascii.appendChild(document.createTextNode(line));
      ascii.appendChild(document.createElement("br"));
      line = "";
    }
    line += character;
  }
  var frames = 10;
  var container = document.getElementById("container");
  var frame_width = parseInt(window.getComputedStyle(container).width)/frames;
  container.style.width = frame_width+"px";
  ascii.style.marginLeft = "0";
  setInterval(loop, 1000/10);
  function loop(){
    var current_ml = parseFloat(ascii.style.marginLeft);
    if(current_ml == frame_width*(frames-1)*-1)
      ascii.style.marginLeft = "0";
    else
      ascii.style.marginLeft = (current_ml - frame_width) + "px";
  }
}
</script>
</head>
<body>
<img src="sprite.png" id="sprite"/><div id="container"><pre id="ascii"></pre></div>
</body>
</html>

14 comentarios:

Graciela de Palomas  

Por qué dejar a ese muchachito o muchachita saludando todo el tiempo, estará usted durmiendo Jmiur ;)

JMiur  

Es que es un señor amable y está feliz :-)

hotpoint  

Brindemos por esa felicidad compartida, Jorge!

José Puello  

Esta bien el aniscript

Responder
Don Choky  

Hola, Jmiur, que tal.

Estoy pensando adquirir un dominio propio para mi blog, pero no me decido si adquirirlo en GoDaddy o directamente con Blogger (los registran en eNom).

¿Cual de los dos sera el que me conviene mas?

JMiur  

Eso no es algo que pueda responder. Por un lado, jamás usé ninguno y por el otro, es una decisión totalmente subjetiva.

Responder
Formula1D  

Hola, esto me parece genial e interesante pero, lo he intentado poner y no me sake donde y como pongo eso?

JMiur  

En una página web separada. El código es el que está en la entrada.

Formula1D  

Si ya lo se, pero cuando copio el codigo y lo pego por ejemplo en una entrada cuando la publico, no se ve nada, solo el nombre de la entrada

JMiur  

Tal como dije, el código que muestra la entrada no es para ser insertado en una entrada sino que es el código de una página externa ya que posee etiquetas tales como <html> <head> <body>

Formula1D  

Vale, gracias =D

Formula1D  

y, como la puedo poner en una entrada, ya que lo has puesto tu, habra modos de hacerlo

JMiur  

Tal com odije; es una página web externa y se muestra en la entrada mediante un IFRAME.
http://vagabundia.blogspot.com/2006/12/ventanas-con-iframe.html

Potro Sanz  

Ahhhhh...!!!! Ya lo entiendo. Gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR