Эмуляция метаболла в Figma
Привет, давайте начнем с того, что такое метаболл. Вначале почитаем что пишут на википедии:
Metaball (рус. Метасфера, также встречается «метаболл») — n-мерный объект в компьютерной графике, представляющий собою замкнутую сглаженную поверхность.
Довольно-таки сложно, проще взглянуть на картинку:
И если в двух словах это такой плавный переход от одной фигуры в другую, как две капли воды, например.
Этот прием широко развит в различных 3d редакторах, даже есть специальные инструменты, и на основе этого создается много разного интересного.
В Figma нет стандартного инструмента для создания метаболла (не проверял, но точно есть плагины, но мы же не ищем легких путей).
Мне нравится экспериментировать с инструментами и находить их нестандартное применение, так вышло и в случае с созданием метаболла.
Для начала давайте нарисуем фигуры, которые мы будем «сливать». В моём случае это что-то похожее на букву «А». Можно использовать любые фигуры: эллипсы, квадраты, треугольники, многоугольники или абстрактные фигуры нарисованные пером.
После этого, нам нужно объединить их линией (это и будут точки стыка).
Следующим шагом, нам нужно объединить все эти фигуры в одну, используя булевую операцию Union. Выделяем все объекты и сверху в панели инструментов выбираем Union Selection.
У нас получается одна фигура, но мы все еще можем менять у нее объекты внутри (потому что она как группа). Теперь давайте выделим фигуру и зададим настройки скругления углов, у нас начинает что-то получаться.
В какой-то момент увеличение угла скругления перестанет влиять на сливание, чтобы усилить эффект нужно менять толщину линии. Еще могут появляться различные артефакты (вы заметите), тут помогает двигать линию, чтобы сливание было «более правильным».
Собственно вот и всё. Что нам это все дает? Это дает более расширенный инструмент для поиска новых идей. Экспериментируйте, просто двигайте объекты внутри union group и получайте различные эффекты, подключайте фантазию.
P.S. Да, это не точная копия metaball (она ведь как-то описывается математически), но весьма похоже. Плюсом тут является, что мы можем двигать объекты и смотреть на результат в реальном времени, не упускайте такую возможность.
