Как сделать анимированную ASCII-картинку
...причём, на стороне клиента, а не сгенерировать пусть красивый, но единственный кадр.
Нет ничего проще.
1. В разметке HTML готовим раздел с моноширинным шрифтом для вывода анимации:
<div id="scene" style="font-family: monospace;"></div>
2. В тег <head> документа (хотя необязательно именно в этом теге) вставляем маленький скрипт, который выполнит всю работу:
<script>
function animate (id, delay) {
let data=[
//Здесь будут кадры ASCII-анимации - обычный массив строк
];
let index = 0;
function show() {
if (index > data.length - 1) index = 0;
document.getElementById(id).innerHTML = data[index].replace(/ /g," ");
index++;
setTimeout(show, delay);
}
show();
}
window.addEventListener ('load', function (e) {
animate('scene',200); //id элемента для вывода, время смены кадров в мс
});
</script>
3. Готовим кадры нашей анимации как массив строк, например, для этой задачи подойдёт скрипт по первой ссылке, если его немного улучшить (добавить загрузку файлов из формы). На самом деле, этот этап и займёт 99,9% времени, но частично его можно автоматизировать - заменить переводы строк в ASCII-"портрете" на теги разрыва строки <br> (включив опцию "Сохранять символы перевода строк внутри абзацев"), потом слить все строки кадра в одну.
Я использовал простейшую анимацию, поэтому написал лишь
let data=[
"0123<br>4567",
"1234<br>5678",
"2345<br>6789",
"3456<br>7890",
"4567<br>8901",
"5678<br>9012",
"6789<br>0123",
"7890<br>1234",
"8901<br>2345",
"9012<br>3456"
];
Посмотреть пример ASCII-анимации в работе, файл .html в текущем окне (вкладке) (1 Кб)
Эти пирамиды тут не при чём, но они ещё пригодятся на символ чего-нибудь и они же вдохновили на заметку :)
01.02.2023, 01:25 [402 просмотра]