Плагин для создания 4K графики и WebGL симуляций в Figma
Однажды я в очередной раз смотрел портфолио студии Pixel point и подумал: как делать такую же сочную графику, но без часов отрисовки в Figma или без сложных рендеров в After Effects? Как сделать нечто подобное обычному UX/UI дизайнеру, который хочет разнообразить сайт, баннер или презентацию? И желательно, чтобы все это было прямо в Figma — взял и сделал. Быстро и без нервов.
И тут мне в голову пришла идея взять WebGL и создать разные симуляции, которые постоянно двигаются и меняются в зависимости от выставленных настроек! Вы передвигаете ползунок, и материал оживает. Затем вы ставите симуляцию на паузу и экспортируете кадр в 4К разрешении.
И тут родилась первая версия плагина Let's simulate — вы уже можете использовать его через Figma community.
Начал я с симуляции флюидов, в основе которых лежит алгоритм для симуляции ветряных потоков и реальных жидкостей — его используют метрологи. Я не первый, кто его открыл в мире WebGL, и, более того, есть даже опенсорс проект на GitHub с похожими жидкостями.
Далее мне показалось уместным внедрить симуляцию живого mesh-градиента, как у Stripe. Спасало то, что в сообществе уже разобрали оригинал и воссоздали его механики — поэтому градиент получилось перенести быстро, но от себя также я добавил много новых фишек типа более разнообразных методов генерации шума, от чего цвета и переливы выглядят просто потрясающе!
Но я пошел еще дальше! У Stripe на главной странице появилась новая симуляция, которую еще никто не воссоздавал, и она выглядит просто потрясающе. Я долго не мог понять, как это устроено, но потом разобрался — это вытянутая и закрученная лента, по которой гуляет шум и еще сильнее ее закручивает в некоторых местах. И, присмотритесь — на ленте есть полоски, которые создают эффект мышцы. Это тоже шум, вытянутый по Y и сплюснутый по X — получаются пульсирующие впадинки, которые очень красиво преломляют свет и играют на ленте.
А вот так выглядит моя версия этого градиента — у нее тоже есть впадинки, силу которых можно настраивать, а также разные палитры, типы шума для закручивания и иридисценция с подсветкой, чтобы градиент выглядел еще красивее.
Еще один эффект, который мне очень нравится — это симуляция Synthwave мира. Я хотел видеть светящееся солнце, кислый и вырвиглазные палитры, неоновое свечение, низкополигональную сетку, состоящую из квадратов. И чтобы все это также жило и менялось от ваших настроек.
И последний эффект, который доступен в плагине на данный момент — это Blobmixer, в котором вы можете создавать фигуры со свечением, градиентным сиянием, абсолютно разных форм и размеров.
Долго я бился с этим разделом, но результат сейчас меня почти удовлетворяет. Немного поработаю — и будет бомбочка-петардочка-Резешечка. Сейчас есть настраиваемые скайлайны на солнце, объемное свечение, классный неон и щепотка ностальгии.
Кстати, в плагине есть пост-эффекты, например, Frosted blur — размытие с красивым шумом, а также виньетка и обычный Gaussian noise. В будущем добавлю пикселизацию, симуляцию CRT-дисплея и ASCII-фильтр, чтобы ваши симуляции превращались в буквы и символы!
На этом все! Если тема вам интересна, можете подписаться на мой тгк «Банановый дизайн» и периодически его просматривать на момент чего-то нового. Пишу редко, но по делу и без рекламы.