Как сделать глитч эффект в paint net
Всем привет! Для моей новой игры мне понадобилось сделать визуальные эффекты, искажающие изображение в стиле "глитч-арта". Глитч-арт использует идею ошибочной интерпретации данных, за счёт которого изображение сильно и пугающе искажается. Вы наверняка видели много примеров этих эффектов в сети.
В своей игре использую эти эффекты, чтобы показать урон наносимый игроку (взамен старого доброго затемнения, покраснения или тряски экрана), игрок тем самым как бы теряет связь с игрой. Вы же можете использовать эти эффекты для любых целей, но особенно хорошо они подойдут к хоррорам, потому что людей далёких от понимания цифровых технологий такие эффекты пугают, они придаёт изображению какой-то потусторонний оттенок.
Эффекты чрезвычайно простые, поэтому буду брать вас количеством, а не качеством. Я буду использовать шейдеры для Unity, но вся описанная ниже информация актуальна для любых движков, использующих шейдеры, а так же для ПО, имеющим прямой доступ к данным изображения.
Так или иначе, все глитч-эффекты основаны на сдвиге изображения. Неудивительно, ведь сам глитч-арт зародился из обычной потери битов в файле изображения.
Давайте на примере сделаем самый простейший глитч-арт: скачаем изображение в сети, откроем его в блокноте, удалим любое количество текста посередине и сохраним.
Как видно, изображение сдвинулось влево, потому что изображение читается построчно, слева направо. Возьмём 2 строки в 4 пикселя. Каждый пиксель у нас будет характеризоваться тремя цветовыми компонентами: красным (R), зелёным (G) и синим (B). Вырежем из первой строки 4 байта посередине и мы получим такое преобразование:
Изображение сдвинулось, в том числе пиксели из второй строки переместились на первую. В конце появился шум из неизвестных данных.Заметьте, что цветовая схема тоже сдвинулась, ведь теперь каждая синяя компонента цвета теперь будет считаться программой зелёной, красная - синей, а зелёная - красной.
Но так это работает только с несжатыми данными изображений. Если мы возьмём какой-нибудь другой формат, который сжимает информацию, особенно проприетарный, то никто не знает, как поведёт себя алгоритм.
Помимо этого, в глитч-арте любят использовать и аналоговые искажения, которые можно было увидеть например во время прокрутки потрёпанной видеоплёнки или на экране старого телевизора. Тем не менее, все эти эффекты так или иначе основаны на сдвиге или пропуске информации.
Ну а теперь, когда мы разобрались в теории, пора приступать к конкретике
Чтобы настроить отображение эффектов в Unity, мы будем использовать обычные шейдеры. Поверьте мне, преобразования, о которых пойдёт речь, очень просты. Шейдер, если что, это такая мини-программа, отвечающая за изображение различных поверхностей на экране. Изображение с камеры можно легко представить как текстуру, с которыми шейдеры отлично справляются.
Создаём в Unity новый файл типа Shader/Image Effect Shader. Если у вас нет такой функции, то можете взять исходник отсюда.
Создаём в Unity новый скрипт, назовём его CameraEffect. Исходный код для скрипта можно взять отсюда.
Создадим новый материал. Укажем для него новосозданный шейдер. Поменяем цвет например на жёлтый.
На камере создаём новый компонент типа CameraEffect. Указываем новосозданный материал в качестве параметра поля Material.
Если всё получилось правильно, то должно получиться что-то подобное (мы взяли изображение с камеры и наложили на него жёлтый оттенок):
Теперь, добавим в наш шейдер несколько новых опций (помним, что опции нужно объявлять дважды: в разделе Properties и в теле самого шейдера между CGPROGRAM и ENDCG):
Давайте начнём с простого: возьмём одну текстуру искажений и согласно цветовым данным, указанным на ней, начнём сдвигать исходное изображение с камеры. Красный канал изображения будет указывать на степень сдвига влево, зелёный на степень сдвига вверх, то есть чем ярче пиксель, тем больше сдвиг.
Загрузим пустую чёрную текстуру, посмотрим на изображение - оно не изменилось. Потому что чёрный цвет - 0 по всем каналам, значит и искажений нет.
Тогда попробуем подставить простую текстуру, например одну красную полосу (не забываем для всех текстур, импортируемых в Unity в качестве эффекта, отключать сжатие и использовать Point Filter Mode, чтобы искажающая текстура не искажалась сама).
Ой, слишком сильный сдвиг. Давайте будем редактировать степень сдвига с помощью переменной _Force.
Сделаем эффект волны с помощью красного градиента (в том числе и с помощью ступенчатого):
Попробуем добавить несколько полос разной ширины и контрастности:
В принципе, можете использовать любое изображение в качестве исходника для искажений, могут получиться интересные результаты (как будто бы с другой стороны экрана на вас кто-то смотрит):
Теперь осталось добавить временное смещение к текстуре искажения (ну и изменение её размера для удобства), чтобы глитч наконец ожил.
Как видно, текстура искажения постепенно сдвигается вниз, из-за чего у нас появился эффект неправильно читаемой плёнки. Можно намного уменьшить размер текстуры искажений с одной полосой, чтобы добиться немного другого эффекта старого дребезжащего монитора.
На старых видеопроигрывателях можно было найти такой эффект, когда изображение крутилось целиком, а не по частям. Это тоже сделать очень просто, для этого нужно двигать не части изображения, а всё целиком. Сдвигать мы его будем с учётом времени, для этого в шейдерах Unity есть векторная переменная _Time, указывающая текущее время компьютера. Нам в принципе неважно, какую компоненту этого вектора использовать, все они представляют одно и то же время, но перемноженное на разные числа.
Заметьте, что если на прошлых картинках шейдер пытался выйти за правую границу текстуры, то грань как бы зацикливалась, выдавая один и тот же цвет. Раньше это выглядело уместно, но теперь нам лучше от этого избавиться и включить повторение текстуры.
В зависимости от того, куда вы сдвигаете изображение, как учитываете время и используете повтор текстуры, вы можете добиться разных эффектов. Например, вот такой назойливый эффект я использую в своей игре:
Обычного сдвига мало, он слишком непримечательный. Чаще всего вместе обычным сдвигом изображения добавляют цветовой. Попробуем добавить его и мы. Я воспользуюсь классическим подходом смены цветовых компонент, но это можно делать любым способом. Здесь я меняю красный канал на зелёный, зелёный на синий, а синий на красный.
Взглянем теперь на сцену, но с применением цветового сдвига (я сделал сцену немного ярче, потому что она была преимущественно серая, а серый при сдвиге снова даёт серый):
Текстуру искажений я использовал исключительно для того, чтобы показать вам принцип работы. Однако я регионы для искажений генерирую сам с нуля. Что и вам советую для создания неповторимых картин. Алгоритм я использую примерно такой:
- Случайно находим начальную координату региона по оси Y.
- Случайно находим конечную координату региона по оси Y так, чтобы она не сильно отклонялась от начальной координаты
- Сдвигаем все пиксели между начальной и конечной координатой влево на случайную величину, одинаковую для всего региона
- В случайном порядке меняем R на G, G на B или R на B
- Повторяем в зависимости от необходимого количества искажений
Поскольку шейдер не умеет выдавать случайные величины, можно использовать текстуру с шумом или же генерировать псевдослучайные величины с помощью функций sin и cos с передачей времени в качестве аргумента.
Часто для сохранения общей читаемости изображения используют, назовём это так, частичный цветовой сдвиг. Это когда изображение сдвигают только по одной цветовой компоненте, а не по всем сразу. Частным случаем такого сдвига является эффект хроматической абберации.
Попробуем повторить эффект выше с помощью сдвига изображения только по красной компоненте:
И последнее на сегодня - генерируемый шум. Потому что какой вообще рассказ о глитч-арте может быть без шума.
Шум можно тоже брать из отдельной картинки (и предпочтительнее делать именно так для экономии компьютерных мощностей), но я буду генерировать его сам, составив как можно более бессмысленную комбинацию синусов и косинусов. Шум у нас будет чёрно-белый, потому что многим он более привычен и комфортен глазу.
Как и в прошлом случае, в качестве текстуры искажений используем обычные полосы. Результат:
В этой статье я постарался осветить только основные, самые часто встречающиеся эффекты. Всё остальное, что вы можете найти в сети, скорее всего является комбинацией вышеперечисленных методик. А теперь вы можете и сами применять данные методики в любой последовательности и любом количестве, чтобы получать самые разные искажения в зависимости от того, в какую степень комфорта или дискомфорта вы хотите погрузить пользователя. Потому что глитч-арт - это страшно красиво.
На DTF я так же веду блог о разработке игр, в который попадает всё, что не заслуживает отдельной статьи. Например, там же я опубликовал статью о том, как я не очень удачно пытался сделать ещё один глитч-эффект под названием datamosh. Подписывайтесь, если вам интересен подобный контент.
Borders N' Shapes
Доступен в меню «Эффекты» - «Узоры»
Эффект позволяет рисовать прямоугольники, эллипсы, дуги и сектора. Для всех вариантов можно настроить стиль рисования, сплошная линия, штриховая, пунктирная и т.д.
Плагин эффекта на русском языке можно загрузить здесь.
Gradient Bars
Эффект "Полосы с градиентом" - предназначен создания полос и линий с плавным переходом одного цвета в другой. Доступен из меню "Эффекты" в подменю «Узоры». Эффект Gradient Bars имеет на этом сайте отдельную страницу описания. Пример использования можно увидеть в видео уроке «Как нарисовать реалистичный глаз».
Плагин эффекта на русском языке можно загрузить здесь.
Film
Доступен в меню «Эффекты» - «Для фотографий»
С помощью этого эффекта можно придать фотографии эффект кинопленки. Если вспомнить, то изображение на старой кинопленке обычно искажено разными полосами и прочим шумом. Подобный эффект и достигается с использованием этого плагина. Плагин позволяет настраивать размер точек шума, менять фокус рисунка, придавая фотографии эффект в голливудском стиле.
Jitter
Доступен в меню «Эффекты» - «Искажение»
Эффект «Дрожание». Позволяет создать эффект дрожания изображения, а при больших значениях параметров настройки встряхнуть и даже перемешать изображение.
Outline Object
Доступен в меню «Эффекты» - «Object»
Внешний контур объекта - Может использоваться для создания окантовки текста, добавления эффекта свечения или рисования рамки и границы вокруг рисунка на прозрачном фоне. Обратите внимание: эффект имеет смысл применять к изображению на прозрачном фоне. В противном случае использование просто лишено смысла.
Stitch
Доступен в меню «Эффекты» - «Искажения»
Строчка – позволяет создать на фотографии эффект прошитости или прострочки. Так же с помощью этого эффекта можно создать что-то похожее на морозный иней.
Gradient Mapping
Доступен в меню «Коррекции»
Позволяет сделать многоцветные градиенты или изменить цвет изображения.
Плагин эффекта на русском языке можно загрузить здесь.
Splatter
Доступен в меню «Эффекты» - «Художественные»
Позволяет создавать кляксы и эффект расплескавшейся краски в стиле Джексона Поллока.
О Джексоне Поллоке в Википедии
Джексон Поллок. Номер 7 (Number 7). 1951, Холст, эмалевые краски, 1.435 x 1.676 m. National Gallery of Art, Вашингтон
Pixelate+
Доступен в меню «Эффекты» - «Размытие»
Создает эффект пикселизации - укрупнения пикселей. В отличие от других подобных эффектов позволяет регулировать ширину и высоту пикселей. Также эффект известен как мозаика.
Color Match
Доступен в меню «Коррекция»
Подбор цвета. Позволяет улучшить или наоборот ухудшить фотографию, переводя ее в другую цветовую схему. В качестве новой цветовой схемы используется другое изображение, которое вы выбираете в проводнике. Эффект сам анализирует цветовую гамму другого изображения и применяет эти цвета к исходному рисунку.
Random Effect
Доступен в меню «Эффекты» - «Размытие»
Не хватает вдохновения? Используйте эту утилиту для выбора случайного эффекта со случайными параметрами.
Random Shape Fill
Доступен в меню «Эффекты» - «Узоры»
Заполняет фон случайными фигурами – это могут быть круги, сердечки, звезды и т.п. К фигурам могут применяться различные настройки цвета, прозрачности и т.д.
Trail
Доступен в меню «Эффекты» - «Object»
След – этот плагин позволяет создать эффект следа от «перемещения» объекта. Результат действия эффекта похож на хвост кометы или на след от перемещения курсора, который оставался за ним на старых ноутбуках. Эффект возможен только для изображений на прозрачном фоне.
Gradient Blocks
Доступен в меню «Эффекты» - «Размытие»
Осуществляет разделение изображения на четырехугольники с размытием рисунка в каждом из них. Ширину и высоту прямоугольников можно настраивать. Похоже на эффект пикселизация из этого же комплекта, только еще плюс размытие.
Twist
Доступен в меню «Эффекты» - «Tools»
Скручивание. Эффект имеет отдельное окно, в котором появляется копия изображения. Если щелкнуть в какие-то место на изображении курсором мыши и/или удерживать его, то изображение внутри курсора начинает скручиваться. Очень интересный эффект.
Читайте также: