Редактор зелий

Принёс вам немного странного! Последний месяц я занимался разработкой конструктора зелий. В результате у вас появился инструмент в котором можно с минимумом усилий за минуту соорудить себе добротную склянку для игры или статьи о магии. ✨✨✨

Cсылка на редактор ^[1]

Всё началось с того что зимой aseprite сложил мне пиксели в полочку колдуна:

Наблюдательный читатель заметит что каждая бутылочка имеет тенюшку идущую по нижнему краю и в правой части где-то на треть пузырька. Горизонтальные элементы дополнительно откидывают тень на слой ниже.

Такое рисование можно отлично алгоритмизировать по набору не сильно сложных правил.

Эта мысль и крутилась где-то в фоне пока не вылилась в разработку полноценного редактора!

Как это работает:

Базовая форма колбы определяется перетаскиваемыми направляющими:

Динамика формы пячиться такими модификаторами как сужение, расширение, раздвоение, горизонтальное смещение и поребрик:

Освещение настраивается перемещением Солнца, хотя в данном случае расчёт засвеченности проводится не как для directional light, а ближе к точечному источнику света. Был соблазн честно посчитать лучи проходящие через стекложидкость, но я его заборол и сделал всё на волшебных костылях!

✨Эффекты✨:

Почти во всех референсах зелий люди накидывали дополнительных элементов для придания особого волшебства. Редактор поддерживает два типа эффектов: пузырики на дне и звёздочки! В будущем обязательно добавятся химические бульбы над пробкой.

Технические подробности:

Отрисовка ведётся на canvas 2d. Код на vanilla.js с использованием принципов FRP (functional reactive programming).

Адаптив:

За последние лет 10 у всех появились мобильные устройства, отдельным челленджем была адаптация редактора под эти штуки. Canvas, а особенно лежащая поверх него моя библиотека работы с пиксельартом не очень любит когда размеры элемента меняются, но чего ни сделаешь ради искусства. Масштаб постепенно уменьшается в зависимости от размера экрана до тех пор пока правая панель с модификаторами не перестаёт помещаться и тогда она прыгает влево.

Демонстрация мобильного интерфейса (да, это тоже возможное зелье):

Цветовое пространство:

Цвета всех элементов можно рэндомить, алгоритм используется цветовое пространство OKLCH, которое учитывает особенности устройства человеческого глаза и даёт результат визуально схожий по яркости.

Сохранение и загрузка:

Результат можно сохранить локально в виде PNG с желаемым масштабом. Хотелось сделать и загрузку результата обратно в редактор, но не хотелось делать отдельных сейвов, а это значило что нужно найти место под эти данные прямо в png. Первой мыслью была стеганография и кодирование данных в одиндва бита несущих наименьшую цветовую нагрузку, но это всё равно меняло бы изображение. Второй идеей было использование пикселей с alpha = 100% — их RGB можно забивать любым хламом — всё равно никто не увидит, но таких пикселей могло не хватить. Я пошел по третьему пути — почитал спецификацию PNG и нашел что есть блок подобный EXIF в JPG. Разобрал файл на кусочки прямо на клиенте и дописал в него блок tEXt (да, мне именование тоже показалось дебильным, но такова спецификация) туда всю информацию. При загрузке происходит обратная операция — изображение снова разбирается, метаданные добываются и обновляют все параметры.
Внимание, telegram, twitter и другие чаты радостно пожирают эти данные, потому если решите отправить зелье-сейв другу — убедитесь что делаете это без сжатия (как файл).

Seeded random:

Эффекты (звёздочки и пузырики) используют рэндом во время генерации, от чего загруженное зелье отличалось от того что было сохранено в png. Обмазал всё mulberry32 псевдорэндомом. Вот статья в моём бложике ^[2] об этом звере если кому интересно.

Публикация зелий:

Зелье можно опубликовать, но тогда любой маг будет вынужден заполнить подробную стандартную декларацию о его свойствах. Если не можете придумать название — не беда, оставьте его пустым и активируется возможность использовать рэндомизатор названий. Эффекты зелья: пока что это клифхэнгер, выбирайте любое доступное.

Зелье появляется на общей полке и создаётся отдельная уникальная страница. На всякий случай проинтегрировал её с твиттером, вдруг кто пользуется и решит запостить.

Несколько примеров зелий:
^{[3] [4] [5]}

Хвала дочитавшим, пользуйтесь!