ASCII анимация с помощью спрайта, элемента canvas и JavaScript

<!-- Источник изображения для конвертации -->
<img src="/lessons/les1534/img/sprite.png" id="sprite"/>
<div id="container">
	<!-- ASCII часть будет выводиться в ниже представленный тег pre -->
	<pre id="ascii"></pre>
</div>

window.onload = function(){
	
	//Переменные для обработки спрайта
	var sprite = document.getElementById("sprite");
	var W = sprite.width;
	var H = sprite.height;
	
	//Элемент canvas для обработки спрайтов
	var tcanvas = document.createElement("canvas");
	tcanvas.width = W;
	tcanvas.height = H; //Размеры элемента canvas такие же, как и у исходного спрайта
	var tc = tcanvas.getContext("2d");
	//Выводим изображение в элемент canvas
	tc.drawImage(sprite, 0, 0, W, H);
	

	sprite.parentNode.insertBefore(tcanvas, sprite);
	//одновременно выводятся элемент canvas и исходное изображение
	
}

window.onload = function(){
	//Внутренние переменные
	var r, g, b, gray;
	
	//Переменные для обработки спрайта
	var sprite = document.getElementById("sprite");
	var W = sprite.width;
	var H = sprite.height;
	
	//Элемент canvas для обработки спрайтов
	var tcanvas = document.createElement("canvas");
	tcanvas.width = W;
	tcanvas.height = H; //Размеры элемента canvas такие же, как и у исходного спрайта
	var tc = tcanvas.getContext("2d");
	//Выводим изображение в элемент canvas
	tc.drawImage(sprite, 0, 0, W, H);
	
	//Получаем данные о пикселях
	var pixels = tc.getImageData(0, 0, W, H);
	var colordata = pixels.data;
	//Каждый пиксель дает 4 целых числа -> r, g, b, a
	//Поэтому длина массива colordata будет W*H*4
	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;
		//Переписываем массив colordata полученными данными
		//colordata[i] = colordata[i+1] = colordata[i+2] = gray;
		
	}
	
	//Выводим серое изображение
	tc.putImageData(pixels, 0, 0);
	//Вы можете увидеть серое изображение спрайта
	//с помощью вставки элемента canvas в структуру DOM
	sprite.parentNode.insertBefore(tcanvas, sprite);
	//одновременно выводятся элемент canvas и исходное изображение
		
}

window.onload = function(){
	//Внутренние переменные
	var r, g, b, gray;
	var character, line = "";
	
	//Переменные для обработки спрайта
	var sprite = document.getElementById("sprite");
	var W = sprite.width;
	var H = sprite.height;
	
	//Элемент canvas для обработки спрайтов
	var tcanvas = document.createElement("canvas");
	tcanvas.width = W;
	tcanvas.height = H; //Размеры элемента canvas такие же, как и у исходного спрайта
	var tc = tcanvas.getContext("2d");
	//Выводим изображение в элемент canvas
	tc.drawImage(sprite, 0, 0, W, H);
	
	//Получаем данные о пикселях
	var pixels = tc.getImageData(0, 0, W, H);
	var colordata = pixels.data;
	//Каждый пиксель дает 4 целых числа -> r, g, b, a
	//Поэтому длина массива colordata будет W*H*4
	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;
		//Переписываем массив colordata полученными данными
		//colordata[i] = colordata[i+1] = colordata[i+2] = gray;
		
		//Текст для ascii картинки.
		//Темные цвета = символы подобные "W", "@"
		//Светлые цвета  =  "`", "."
		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 = "@"; //Почти черный
		
		//Новые строки и вставка в DOM
		if(i != 0 && (i/4)%W == 0) //если указатель достиг конца строки
		{
			ascii.appendChild(document.createTextNode(line));
			//Новая строка
			ascii.appendChild(document.createElement("br"));
			//Очищаем строку для следующего набора пикселей
			line = "";
		}
		
		line += character;
	}
	
	//Выводим серое изображение
	tc.putImageData(pixels, 0, 0);
	//Вы можете увидет серое изображение спрайта
	//с помощью вставки элемента canvas в структуру DOM
	sprite.parentNode.insertBefore(tcanvas, sprite);
	//одновременно выводятся элемент canvas и исходное изображение
	

}

#ascii {
	font-family: monospace;
	font-size: 11px;
	line-height: 70%;
}

#sprite {
	display: none;
}

#container {
	overflow: hidden;
	display: inline-block;
}

window.onload = function(){
	//Внутренние переменные
	var r, g, b, gray;
	var character, line = "";
	
	//Переменные для обработки спрайта
	var sprite = document.getElementById("sprite");
	var W = sprite.width;
	var H = sprite.height;
	
	//Элемент canvas для обработки спрайтов
	var tcanvas = document.createElement("canvas");
	tcanvas.width = W;
	tcanvas.height = H; //Размеры элемента canvas такие же, как и у исходного спрайта
	var tc = tcanvas.getContext("2d");
	//Заполняем элемент canvas белым сплошным полем перед работой с png
	tc.fillStyle = "white";
	tc.fillRect(0, 0, W, H);
	//Выводим изображение в элемент canvas
	tc.drawImage(sprite, 0, 0, W, H);
	
	//Получаем данные о пикселях
	var pixels = tc.getImageData(0, 0, W, H);
	var colordata = pixels.data;
	//Каждый пиксель дает 4 целых числа -> r, g, b, a
	//Поэтому длина массива colordata будет W*H*4
	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;
		//Переписываем массив colordata полученными данными
		//colordata[i] = colordata[i+1] = colordata[i+2] = gray;
		
		//Текст для ascii картинки.
		//Темные цвета = символы подобные "W", "@"
		//Светлые цвета  =  "`", "."
		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 = "@"; //Почти черный
		
		//Новые строки и вставка в DOM
		if(i != 0 && (i/4)%W == 0) //если указатель достиг конца строки
		{
			ascii.appendChild(document.createTextNode(line));
			//Новая строка
			ascii.appendChild(document.createElement("br"));
			//Очищаем строку для следующего набора пикселей
			line = "";
		}
		
		line += character;
	}
	
	//Выводим серое изображение
	//tc.putImageData(pixels, 0, 0);
	//Вы можете увидет серое изображение спрайта
	//с помощью вставки элемента canvas в структуру DOM
	//sprite.parentNode.insertBefore(tcanvas, sprite);
	//одновременно выводятся элемент canvas и исходное изображение
	
	//Анимация
	var frames = 10; //Спрайт имеет 10 кадров
	var container = document.getElementById("container");
	//Ширина контейнера должна быть равна только одному кадру
	var frame_width = parseInt(window.getComputedStyle(container).width)/frames;
	//window.getComputedStyle поддерживается в Chrome, FF, Opera и IE9+
	//Значение ширины имеет "px" в конце, поэтому parseInt используется для удаления суффикса
	container.style.width = frame_width+"px";
	
	//Будем изменять margin-left элемента ascii для смещения.
	ascii.style.marginLeft = "0";
	
	setInterval(loop, 1000/10);
	
	function loop()
	{
		var current_ml = parseFloat(ascii.style.marginLeft);
		//Если ascii достиг последнего кадра (9-го в нашем случае)
		//Значение поля нужно установить в 0
		//frame_width * (10-1) * -1(так как мы используем отрицательное значение поля)
		if(current_ml == frame_width*(frames-1)*-1)
			ascii.style.marginLeft = "0";
		else
			ascii.style.marginLeft = (current_ml - frame_width) + "px";
	}
	
}