Множество Мандельброта. 32-бит TrueColor. 60 FPS. 80-бит long double. OpenMP. Суперсэмплинг 2x2 (4 прохода). И цвета. Я хочу сказать. Это самая нужная вещь во Вселенной. Самая глубокое. И я сейчас за всю жизнь наконец стал писать код и сделал. Довольно сложное. И самое прекрасное. Скачайте и посмотрите! Это экзешник, в ГитХаб.
Привет! Я Сергей, разработчик. Когда мне понадобилась легкая анимация лайка в стиле YouTube, я столкнулся с проблемой: готовые решения либо слишком тяжелые, либо плохо дружат с прозрачностью в браузерах.
Не желая идти на компромиссы, я реализовал систему анимаций на Canvas. В статье поделюсь опытом создания частиц и физики на чистом JS, а также бегло разберу встроенные инструменты браузера для таких задач.
Мы будем делать схематичную анимацию фейерверков и конфетти по нажатию на кнопку при помощи JS. Изученные принципы универсальны для любого ЯП. Нам понадобится немного знаний ООП, тригонометрии, физики и совсем чуть-чуть геометрии. Вот что получится в итоге:
Сегодня вы можете сгенерировать изображение за какие-то пять-десять секунд, а может, даже быстрее. А несколько десятков лет назад для создания всего одного кадра требовались часы рендеринга — и даже тогда предметы на картинке могли выглядеть как китайская игрушка из ларька. Ведь компьютерная графика того времени, увы, имела довольно серьезный порок — все предметы выглядели скучным безжизненным пластиком. Дерево — пластиковое. Металл — пластиковый. Даже вода — и та пластиковая.
Исправить это недоразумение решила кучка энтузиастов, поверивших в компьютерную графику. Они мечтали о фильме, рожденном целиком и полностью из пикселей, и называли его просто — «Тот самый фильм».
Привет, Хабр! 👋
В этой статье я хочу поделиться опытом разработки пет-проекта, который превратился в полноценный инструмент для автоматической генерации коротких видео (Shorts, Reels, TikTok). Идея проста: на входе — тема (например, "История Римской Империи за 1 минуту"), на выходе — готовый видеоролик с озвучкой, субтитрами и сгенерированным видеорядом.
Но вместо того, чтобы накидать "спагетти-код" в одном файле main.py, я решил подойти к задаче как инженер и построить систему на принципах Clean Architecture.
🎯 Зачем?
Генерация видео — это сложный пайплайн:
1. Написать сценарий.
2. Придумать визуальный стиль.
3. Сгенерировать картинки (Midjourney, Flux).
4. Оживить картинки в видео (Kling, Runway, Sora).
5. Озвучить текст (TTS).
6. Собрать всё вместе с субтитрами.
API меняются, модели выходят новые каждую неделю. Сегодня лучший визуал у Flux, завтра у Midjourney v7. Сегодня видео делаем в Runway, завтра в Kling. Жесткая привязка к конкретным API убила бы проект через месяц.
Поэтому Clean Architecture здесь не роскошь, а необходимость.
🏗 Архитектура
Проект разбит на слои, следуя классической "луковой" архитектуре:
1. Domain (Entities): Pydantic-модели, описывающие суть (VideoScript, Scene, Character). Они ничего не знают о внешнем мире.
2. Interfaces: Абстрактные классы (VideoGenerator, ScriptGenerator). Контракты, которые должны соблюдать внешние сервисы.
3. Services (Use Cases): Бизнес-логика. Здесь живут "Агенты": Сценарист, Арт-директор, Режиссер монтажа.
4. Infrastructure: Реализации интерфейсов (API клиентов Comet, Yandex, OpenAI и т.д.).
Множество Мандельброта. 60 fps. Вращение - анимация. Делал я. Сразу посмотрите на видео. Потому что не статичная а движется! И это - программа! Я сделал на g++. Свободно распространяемого компилятора языка C++. Почитайте! Очень интересно. Используя OpenMP, вы занимаетесь параллельным программированием на уровне многопоточности. И суперсэмплингом (антиалиасингом), выполняют сглаживание 8x8 (всего 64 прохода на один пиксель). Это позволяет получить плавные градиенты, которые 24-битного цвета TrueColor! И как делать видео с 255 файлов bmp - TrueColor анимация.
Меня зовут Нияз. Я ретушёр, дизайнер и иногда программист, а с недавних лет — ещё и отец двух мальчиков 🤘
Я продолжаю рассказывать о своём большом хобби — создании идеальной макрос-клавиатуры. В прошлых статьях я делился тем, как пришёл к этой идее, с чего начал путь и какие референсы использовал на старте.
Сегодня хочу показать результат этого пути — наше текущее творение.
Встречайте: макрос-клавиатура 23procg тип1
Меня зовут Иван Стародубцев, я автор курса для новичков «Лучший по Python» на Stepik. Он не просто так называется: за год его прошли почти 30 тысяч учеников, которые оставили 3,8 тысячи отзывов со средней оценкой 5 звёзд. Это курс, написанный максимально простым языком в формате диалога, без снобизма и математики. Вместо скучных формул там интересные задачи из жизни, а уже на второй неделе студенты пишут первые игры.
В какой-то момент я столкнулся с проблемой, знакомой многим авторам учебного контента: курсу нужны десятки и сотни иллюстраций. Случайные картинки из интернета не подходят — это должна быть настоящая визуальная вселенная с постоянными персонажами, узнаваемыми локациями и мини-историями, которые раскрываются на протяжении всего материала.
Работа иллюстратора на 100–150 картинок стоит 300–450 тысяч рублей. Это дорого, долго и негибко: захотел добавить новую сцену — снова договариваешься, ждёшь, платишь. Поэтому я решил выстроить собственную схему по производству иллюстраций на нейросетях. Сегодня расскажу, как это работает и, главное, как помогает студентам.
Скорее всего, вам доводилось слышать о градиентном шуме, вернее, о той его версии, которая называется шум Перлина и описывает одну конкретную реализацию, сопряжённую с различными оптимизациями на уровне ЦП. Поскольку это невероятно мощный инструмент для творческой работы, он используется практически везде: при создании визуальных эффектов, видеоигр, процедурно-математического искусства и т.д. Да, как следует настроить его — порой тонкая работа, и неисправная реализация на первый взгляд всё равно может выглядеть хорошо или интересно. В конце концов, «смотрится неплохо, а я художник, я так вижу».
Чтобы глубже и результативнее понять градиентный шум, мы сначала изучим его одномерную версию (в литературе этот случай обычно не рассматривается), а затем медленно пойдём вверх по лестнице измерений в сторону усложнения задачи. Эту тему мы будем рассматривать с точки зрения графического процессора (GPU), а не с точки зрения обычного ЦП. Все примеры кода и анимации, приведённые в этой статье, реализованы на WebGL2/GLSL (надеюсь, это будет не слишком сильно сказываться на производительности). Примеры должны работать на большинстве современных устройств.
Всем привет! На связи Олег Зильберг, дизайн-директор AGIMA. Каждый год мы выпускаем шоурил — короткий ролик, в котором показываем наши лучшие проекты за последнее время. Но в этот раз мы решили отойти от стандартов этого жанра и придумать что-то кардинально иное.
По сути, мы сделали трейлер к несуществующему фильму, который получил название Decoders. Он рассказывает о расшифровке послания из космоса. Но спойлерить не буду, смотрите сами:
Как фанату экстремального вокала мне повезло работать с рок‑исполнительницей, которая ещё и поёт на языке рока — английском. За последние месяцы у Anne Clainoire вышло два клипа: видео, полностью созданное ИИ, и видео со сложной съёмкой в нескольких студиях, в том числе на подводной локации. Их мы и будем сравнивать.
«You are enough» вышел 26 июня 2025. Трек сфокусировался социальных проблемах: манипуляциях общественным мнением, психологическом давлении и необходимости в этих условиях выжить и остаться собой. Кадры в духе гротескно‑красной «Суспирии» Ардженто создал ИИ по промптам самой певицы. Ни одного кадра снято вживую не было — только чистое сияние искусственного разума.
Релиз »Hot Tub» состоялся 13 августа. Тут была классическая съёмка в студии, нанятые актёры, была арендована локация с глубоким бассейном, в котором исполнительнице предстояло «парить» несколько часов, будучи привязанной к специальным грузам. Сюжет клипа многоуровневый: лирическая героиня засыпает, таинственный гид проводит ее до той самой ванны из названия. Там она снова засыпает и погружается уже в свои истинные переживания, видимо, в подсознании. Мы можем долго гадать, были ли это отсылки к «Началу» вкупе с «Алисой в Зазеркалье» или мифические нотки Аида и Персефоны... Энн оставляет свободу интерпретации своим зрителям, так что любая наша трактовка имеет право на существование.
Из компьютерного в сингле только мотыльки, которые летят на пламя: они символизируют борьбу со страхами и переживаниями. Так что ни один «сгоревший» мотылек в ходе съемок не пострадал.
Множество Мандельброта - является одним из самых известных фракталов, в том числе за пределами математики, благодаря своим цветным визуализациям. Я этим занимаюсь 20 лет. Несколько вещей интересны. Вот они.
Первая - множество Мандельброта идеальное - самостоятельное нематериальное начало, существующее вне пространства и времени. Вот так. Проверить никак. Пусть не веру. То есть пусть в совсем другом веке, в другой галактике. Пусть он другой мозг. А множество одинаковое. Оно минует абсолютно все. Все миллиардов световых лет...
Вооружившись игровым движком Unity, я написал техническое демо, в котором пытаюсь наложить кубические воксели Minecraft на шарообразное тело (планету). Планета генерируется процедурно, и её можно полностью разрушить. Игроки могут расставлять или убирать разные блоки, которых насчитывается более 20 типов.
Да, во многом эта реализация базируется на обычных приёмах, которые могут быть знакомы вам из типичного кустарного клона Minecraft, но благодаря сферической структуре игрового мира возникает ряд уникальных аспектов, которые учитываются в строительстве. Основное внимание в этом посте будет уделено именно таким нетривиальным задачам.
Веб-анимация вносит большой вклад в улучшение пользовательского опыта. Простые анимации из меняющихся картинок создать несложно. Но иногда возникают более интересные задачи — например, «оживление» персонажа.
Меня зовут Маша, я дизайнер в Selectel. В этой статье расскажу, как создать сложную анимацию с использованием Lottie и After Effects. Будет полезно дизайнерам и начинающим разработчикам.
Анимация уже давно стала стандартным инструментом в дизайне и способна выполнять самые разные задачи: обеспечивает плавность и приятную отзывчивость — как в современных ОС (например, дизайн-система Android Material 3 или Apple, которые используют принципы Springs), транслирует голос бренда и становится частью айдентики (CashMoney, Instagram, Plex), добавляет продуктовым сценариям эмоциональность и значимость. Недавно и перед нашей командой встала задача «оживить» некоторые из них.
Меня зовут Саша Гончаров, я моушен-дизайнер в 2ГИС. По просьбе продуктовых дизайнеров я подключился к работе над анимацией интерфейсов. В этой статье вместе с разработчиком Сергеем Львовым расскажем, на что стоит обращать внимание при создании интерфейсных анимаций, какие технические нюансы важно учитывать и как мы достигаем желаемых эффектов. Материал будет полезен моушен-дизайнерам, которые хотят работать с интерфейсами, а также разработчикам, интересующимся особенностями рендеринга объектов на карте.
В области графических форматов в последнее время произошло много интересных событий. Вышла новая спецификация PNG с официальным утверждением формата анимированной графики APNG, хотя его поддержка в браузерах реализована уже довольно давно.
В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов.
Привет всем читателям замечательного Хабра! Может кто-то из вас припомнит мою статью, вышедшую в конце 21-го года. Тогда я спешил поделиться первым опытом создания мультфильма, про волка-кулинара и его «мишленовскую» яичницу :-) Признаюсь, что пользователи Хабра оказались самыми благодарными зрителями и читателями, такого большого фидбека я не получал ни с одной из социальных сетей. Огромная вам благодарность. После такой доброжелательной реакции, я захотел делать продолжение и строил радужные планы.
Кейс из жизни: мини-приложения, анимированные обложки, внешние команды — и одна на вид «валидная» анимация, которая кладет все приложение. Рассказываем, как мы научились воспринимать Lottie-файлы не как медиа, а как исполняемый код — и почему это улучшило стабильность всей системы.
Мне периодически хочется донести какие-то идеи через визуальные образы - видео фрагменты, встроенные в голосовое объяснение. Но в редакторах анимаций это делать очень трудоемко.
На днях до меня дошло - можно дать ИИ задачу с желаемой анимацией, и он создаст это в виде html+css+js кода. Потом записать эту страницу на видео и использовать её уже в CapCut, встроив в повествование как визуальный элемент.
Пока большинство разработчиков гонятся за технологиями и всё больше интегрируют нейросети в свой рабочий пайплайн, предлагаю обратиться к прошлому и поговорить о ротоскопировании — методе мультипликации, созданном ещё в начале XX века. А также о том, как, используя эту технику, повысить качество арта и анимаций в своих играх, особенно если вы не очень хорошо рисуете.
В честь скорого выхода 27-го сезона анимационного сериала «Южный парк» мы решили вспомнить лучшие серии, которые затрагивают видеоигры и игровую индустрию. Создатели шоу Мэтт Стоун и Трей Паркер — настоящие гики, которые среди прочего очень любят игры. Однако любить — не значит не видеть многочисленные недостатки, которые можно обыграть в сатирическом ключе. А именно за это мы и ценим South Park.
