Пролог

Недавно я заново открыл для себя эту замечательную статью, написанную несколько лет назад, о некоторых интересных вещах, которые можно делать с помощью console.log (). Это заставило меня задуматься о том, как далеко я могу зайти в этом и что еще возможно, кроме шикарного текста с тенями. Я решил попробовать записать картинку. Чтобы не быть излишне амбициозным, я решил создать 8-битную графику с низким качеством изображения.

Шаг 1. Найдите подходящую картинку

Не пришлось долго думать, чтобы остановиться на играх старой школы SNES в качестве основного источника 8-битной графики. Ох, как я скучаю по тем дням… Прошло совсем немного времени, прежде чем я остановился на Марио как на своем первом подопытном.

Я подумал, что проще всего использовать электронную таблицу, чтобы набросать мои координаты Марио. Каждое из чисел в сетке, по сути, представляет собой цветовую точку, поэтому в общей сложности мне пришлось выяснить, как управлять 5 цветами (включая белый или #fff) и примерно 192 (16 x 12) точками (плюс черная полоса на осталось, что я объясню позже).

Шаг 2. Преобразование изображения в матрицу

Преобразование этого 8-битного каракуля в матрицу (массив массивов) казалось очевидным выбором, поскольку массивы Javascript представляют собой высокоуровневые объекты, подобные спискам. Каждая строка моей электронной таблицы соответствует массиву, а массив массивов образует матрицу (по сути, сетку).

На тот момент я еще не знал, как мне перейти от матрицы к реальному изображению в консоли, но на раннем этапе своих исследований я подумал, что буду беспокоиться об этом позже. Вот массив массивов, представляющих Марио.

Шаг 3. Стилизация текста в консоли и множество экспериментов.

Вы можете применить стили к тексту консоли, определив блоки стилей, начинающиеся с % c, следующим образом:

Мои жизнеспособные варианты были ограничены, так как в консоли разрешено не так много свойств CSS. Изначально я надеялся, что смогу использовать console.table и применить стили таблиц (таблица является простой заменой сетки), но этого не предполагалось. Я также хотел избежать использования фонового изображения (слишком просто!). Я решил использовать пустые блоки контента, чтобы отразить мою ранее определенную матрицу.

Пока все хорошо - вроде все наладится. У меня есть матрица моих цветов и матрица блоков стилей. Просто нужно выяснить, какие стили использовать…

Границы! Границы вокруг пустого содержимого по сути образуют маленькие прямоугольники. Это тот же принцип, на котором основаны Треугольники CSS. Все, что мне нужно было сделать сейчас, это программно создать границы и сопоставить их с соответствующими блоками % c.

Шаг 4. Связываем все воедино и оптимизируем

Кому не нравится хорошая оптимизация? Я хотел найти лучший способ, чем явная матрица, для хранения моих точечных координат, и решил, что должен быть какой-нибудь хитрый трюк, который я мог бы использовать. После недолгого поиска в Google и просмотра документации я наткнулся на аргумент radix для parseInt и toString:

Основание: целое число от 2 до 36, представляющее основание (основание в математических системах счисления) вышеупомянутой строки. Укажите 10 для десятичной системы счисления, обычно используемой людьми. Всегда указывайте этот параметр, чтобы не запутать читателя и гарантировать предсказуемое поведение. Различные реализации дают разные результаты, когда основание системы счисления не указано, обычно по умолчанию используется значение 10.

Переформатирование моей marioMatrix для использования преимуществ этой кодировки дало мне

Annnd вот, где появляется эта черная полоса слева! Начальные нули опускаются, и поскольку Марио - не просто сплошной блок цветов, это не очень хорошо для наших матриц материала. Первоначально я думал о жестком кодировании длины строки и дополнительных массивах, которые были бы короче, чем требуется, но мой друг Деннис умно предложил включить начальное число (произвольно 1) и убрать его позже. Первый столбец с единицами помогает сохранить нули, которые используются для заполнения более коротких массивов Марио.

После короткой серии оптимизаций я остановился на приведенном ниже коде, чтобы воплотить Марио в жизнь - стройные 18 строк JS (которые, вероятно, могут быть дополнительно оптимизированы).

Заключение

Я говорю, что неплохо для ленивой работы в пятницу днем ​​(я не спешил это писать). Я надеюсь, что некоторые бесстрашные люди пойдут еще дальше. Я бы хотел найти способ оживить такие вещи или сделать их более интерактивными. Инструмент, который поможет их динамически генерировать, тоже был бы крутым.

Мне было очень весело разобраться в этом, и я надеюсь, вам понравилось это читать. Спасибо!

Большое спасибо моим друзьям и коллегам за их поддержку и отзывы, вы все лучшие 💯