Часть 1. Использование элементов холста JavaScript и HTML5 для преобразования изображений в двухмерные планы кубиков LEGO.
От спрайта изображения до пиксель-арта.
В чем разница между спрайтами изображений, включенными в оригинальные игры для Game Boy, и ретро-пиксельной графикой? Если вы спросите меня, это просто вопрос масштаба — увеличьте изображения, и вдруг это искусство.
Но просто распечатать этот «пиксельный арт» в большом размере не очень-то впечатляет. В конце концов, зачем заморачиваться? — вы могли бы так же легко использовать версию того же изображения в более высоком разрешении. Вы можете распечатать версию пиксельной графики на чем-то размером с почтовую марку, но так же легко напечатать ее на листе бумаги или на большом плакате — в конце концов, для стандартной печати нет ограничений. Что визуально более впечатляюще, так это смешивание медиа. Например, если вы сделали свой пиксель-арт из лего; ну так интереснее.
💡 Из этой идеи родился PokéProject: LEGO Edition.
Кубики LEGO бывают разных цветов и имеют довольно жесткий набор размеров. Самый маленький из них — кирпич 1x1, размером примерно 8 мм. Если бы мы могли воссоздать спрайт 32x32 пикселя, это дало бы нам что-то размером чуть более 25 см в квадрате, а спрайт 96x96 был бы чуть менее 77 см в квадрате, что звучит так, как будто из него можно было бы сделать несколько впечатляющих произведений искусства для стен.
Итак, как воплотить это в жизнь?
Источники данных и сбор
Первое, что мне нужно было сделать, это выяснить, какие кубики LEGO доступны и каких цветов. Информацию о доступных цветах можно легко получить из разных источников, включая сопоставления цветов RGB и Hex, поэтому получить эти данные было достаточно просто.
Чтобы узнать, какие кубики на самом деле можно было купить (учитывая, что многие кубики нельзя купить по отдельности и по запросу), мне пришлось посетить официальный сервис LEGO Pick-A-Brick и, по сути, очистить их все. результаты поиска, чтобы сопоставить хранилище данных доступных кирпичей для использования в моих расчетах.
Я сделал результаты моих усилий по сбору данных доступными на GitHub.
Отображение палитры
Оригинальный Game Boy Color мог поддерживать более 32 000 цветов [источник], но LEGO Bricks только 40 или около того [источник]. Первой задачей было совместить эти две палитры и визуализировать результат.
Для первого прохода в этом отображении цветов я использовал то, что по сути было вычислением евклидова расстояния, рассматривая цвет каждого пикселя в исходном изображении как число и находя ближайшее совпадение в более ограниченной палитре цветов лего.
Представляем… перцептивную теорию соответствия цветов
После небольшого тестирования выяснилось, что используемые простые цветовые соответствия не совсем точны. Например, самый светлый из цветов — явно серый, зеленый или синий — будет сочетаться со светло-розовым цветом, потому что это наиболее близкое соответствие с программной точки зрения, иначе важные детали будут потеряны, если их не будет. много контраста.
К счастью, многие умные люди уже поняли это и решили несколько раз, и придумали стандартные формулы для расчета соответствия цветов на основе человеческого восприятия. С помощью StackOverflow и библиотеки DeltaE я смог значительно улучшить сопоставление цветов, что позволило создать гораздо более тонкую карту палитры.
На самом деле существует три версии расчетов восприятия цветов DeltaE/LAB, поэтому, немного поэкспериментировав, я смог опробовать их, пока не нашел ту, которая, по-видимому, хорошо работает по всем направлениям.
Расширение набора данных
Именно в этот момент я наткнулся на интересную информацию — не все доступные кубики LEGO на самом деле доступны через Pick-A-Brick, но многие из них доступны через замену обслуживание деталей, при условии, что вы знаете идентификатор детали самого кирпича.
Этот набор данных было немного сложнее собрать воедино, но, по сути, это тот же принцип — сбор данных с официального веб-сайта LEGO и помещение их в набор данных JSON для использования в моем исходном коде.
Эффект от этого в том, что он значительно расширяет доступные цвета и размеры кирпича, что, в свою очередь, значительно улучшает качество цветового соответствия в наших моделях.
Наконец, довольный результатом сопоставления цветов пикселей спрайта с цветами кубиков LEGO, я решил заняться следующей задачей — эффективно использовать кубики LEGO.
Вы можете увидеть код в действии здесь: https://www.pokeproject.co.uk/lego/
Ждите второй части!
