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.
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>
REFERENCIAS:Cool ASCII animation
No hay comentarios:
Publicar un comentario