Glitch Art

Glitch Art – эстетизация цифровых или аналоговых ошибок – артефактов и багов, порча данных, либо физическое манипулирование электронными устройствами (например, с помощью circuit bending).

оригинал статьи в Википедии.

О чем идет речь?

А речь идет о не так давно появившемся жанре искусства - Glitch Art. Суть его - в намеренном искажении изображений (видео и музыки) в художественных целях. Есть много способов, включая использование физических примочек, но мне более интересны те, которые доступны и понятны простому игроделу-индуисту (а как правильно сказать, что от инди-сообщества?).

Этот пост в некотором роде вдохновлен игрой Remember Me, в первую очередь – из-за специфичных эффектов от нанесения урона главной героине.

Весь мой пост будет представлять собой сборник туториалов по Glitch Art. Это во многом компиляция всего того, что мне удалось нарыть по теме на просторах Инфернета. Думаю, описывать все возможные (в смысле, те, что я нашел и понял) способы я буду в порядке усложнения.

Самое главное что я хочу сказать перед началом - это исходники. Большинство встреченных мной инструкций начинаются со слов "возьмите изображение в 'сыром' формате". Речь идет о семействе форматов RAW, ценимых профессиональными фотографами, ибо несжатые. Сырые форматы, более привычные нам - это BMP и TIFF (автор не несет ответственности в случае, если официально данные форматы не считаются семейством RAW). Я пробовал описанные способы на JPG и PNG - не работает, ибо сжатый формат. Второе правило - бекап превыше всего. Сохраняйте оригинал, потому что в некоторых случаях изображения невозможно восстановить.

On-line generators

Начнем пожалуй с варианта для ленивых – с готовых инструментов, коих можно найти превеликое множество.

• jpg-glitch - генератор, написанный на JavaScript;
• GlitchMap - генератор Smack My Glitch Up! на Flash (standalone+src здесь);
• Header Remix - можно менять байты в заголовках JPG/PNG; немного тормозная;
• Glitchy3bitDither - есть возможность использования определенного глитча;
• Stitch’n’Glitch - софтинка, с пояснением на странице проекта.

Еще из инструментов можете посмотреть на  Glitch Wiki, более 20 штук, как он-лайн, так и standalone вариантов.

WordPad

Один из самых простых вариантов – требует чистого, как этиловый спирт, BMP. Суть проста до безобразия: откройте картинку в WordPad, внимательно посмотрите на разномастные символы и квадратики, нажмите Сохранить. Откройте получившееся мясо своим любимым просмоторщиком. В некоторых случаях с этим дерьмом не рискнет связываться даже Ps.

Дело в том, WordPad не переваривает некоторые символы, поэтому не может их отобразить. Поэтому мясо получается от одного взгляда и кнопки Сохранить. Такая же ересь творится в Word, поскольку творение MS не может - в силу очевидных причин - распознать в BMP документ. Сам не баловался, но думаю, в зависимости от кодировки, в Word'е можно будет получать разные эффекты от пересохранения BMP.

HexEditor

Следующий вариант не намного сложнее – вам потребуется BMP и Hex-редактор. Откройте картинку редактором и начинайте творить! Можете заменять повторяющиеся комбинации на свои, писать чистый hex, копировать стихи в получившийся текст… Извращайтесь как хотите. Кстати, если вы вставите кусок осмысленного текста в «исходный код» - мне нравится само название – то получится стеганография.

 

Что характерно, порядок строк в BMP идет в обратном направлении: пересохраните это изображение как BMP, откройте Hex-редактором и найдите повторяющиеся блоки 02 9A - они будут в начале файла. А блоки 00 FF 00 - почти в самом конце.

Photoshop: простой вариант

Начну с простого вариант в Ps. Суть метода -  в "разъезде" слоев для создания эффекта, близкого к анаглифу. На YouTube есть туториал по созданию такого эффекта для текста.

Собственно, как создается этот эффект: пишем нужный текст, растрируем его, создаем две копии слоя. После чего заходим в "Параметры смешения" (Blending Options) первой копии, отключаем зеленый канал; заходим в параметры смешения второй копии - отключаем красный и синий каналы. Дальше, с помощью "Перемещения" (Moving Tool) раздвигаем слои в разные стороны. Объединяем слои, и с помощью "Прямоугольного выделения" (Rectangular Marque Tool) и "Перемещения" (Moving Tool) добавляем эффект "помех" на надписи.

Photoshop: вариант по сложнее второй

Этот вариант я нарыл вообще на DeviantArt, где он лежит в голом гордом одиночестве. Суть метода в перемешивании кусков изображения. Для примера возьмем предыдущую надпись, но без смещения фрагментов. Выделим рандомные куски изображения (можно и вне надписи). Далее: Фильтр - Искажение - Волна (Filter - Distort - Wave), Тип волны - Квадрат (Type - Square), и начинаем баловаться с ползунками. В итоге получается что-то в этом духе.

Еще можно применять:

• фильтр Мозаика (Pixelate - Mosaic);
• повышать резкость через Контурная Резкость (Sharpen - Unsharp Mask);
• фильтр Искажение (Distort - Shear) позволяет имитировать помехи (в гимпе - «Изгиб по кривой»).

Из неожиданного: Audacity

Следующий вариант на первый взгляд – полное извращение. Потому что для него понадобится бесплатный редактор Audacity. Оригинальный пост наглядно показывает, что из этого может получиться. К слову, в Audacity (который еще и бесплатный, товарищи!) можно портить и видео - AVI для этого прекрасно подходит.

Для этого метода нам нужен чистый, как метамфетамин Уолтера Уайта, BMP. Все по-прежнему. Для начала откроем Audacity (вариант "Открыть с помощью" здесь не пройдет). Жмем Файл > Импортировать > Звуковой файл без заголовка (RAW) (File > Import > Raw Data).  В появившемся окне выбираем наш файл и жмем Открыть. Откроется окно параметров импорта, в нем выставляем Кодирование > A-Law или U-Law - в этом случае импортируется просто набор данных. Главное это теперь запомнить, в каком формате вы импортировали файл - это нам пригодится позже.

Если вдруг кто-то спросит, в чем же разница между этими двумя форматами, то я бы сказал, что в белом цвете. При экспериментах с BMP 1280x1280 с белой заливкой экспорт из U-Law превращал белый в набор белых, розовых и кислотно-зеленых точек. С A-Law таких проблем не было.

Теперь можете дать волю своим деструктивным наклонностям и творить. Потому что, что бы вы ни делали, у вас получится концептуально-депрессивный нойз. Из найденных мной особенностей: Fade-in/Fade-Out создают градиент, Tremolo и Wahwah - шум, Эхо - раздвоение. Из важного: не трогайте первые пару секунд "композиции" - это заголовок файла, если его повредить, как сами понимаете, файл становится нечитабелен; не превышайте длину композиции (тот же эффект), но и не уменьшайте - получите мусор в верхней части изображения. Хотя это тоже должный эффект глитча.

Когда вы вдоволь наизвращались наизменяли файл, заходите в Файл > Экспортировать, в раскрывающемся списке Тип файла вставляете Прочие несжатые, в параметрах - тот формат, в котором импотрировали (A или U). Полученный WAV-файл переименовываете в BMP и открываете. Кстати, FastStone Image Viewer открывает даже WAV как картинку, за что ему поклон.

Формат BMP

Короче, я решил выложить небольшой обзор формата BMP24 примерно с точки зрения погромиста. Поэтому вопрос - господа, а что мы собственно знаем о битмапе? А знаем мы то, что витмап не сжатый формат, что байты отвечают за пиксели напрямую, что ковырять хекс-код ледорубом одно удовольствие. 

Оказалось все немножко хуже. Не так чтоб прям вообще , но ложка дегтя в бочке с динамитом есть. Деготь сорта big-endian. Поэтому первое знакомство с форматом было мозговыносящим, а моя нервная система глитчевала так, будто в ней все Хакеры разом баловались. 

Для начала опишу структуру BMP. Я напишу не всю структуру, а только то, что нам важно. 

ACHTUNG! Эта рассказ о BMP24, с другими форматами будет по-другому. Немного.  ACHTUNG!
Смещение (dec)	Смещение (hex)	Длина блока	Содержимое
Заголовок файла
0	0	2	Код 4D42h - Буквы 'BM'
2	2	4	Размер файла в байтах
18	12	4	Ширина изображения
22	16	4	Высота изображения
28	1C	2	Бит на пиксель - 1/4/8/24
38	26	4	Горизонтальное разрешение
42	2A	4	Вертикальное разрешение
46	2E	4	Количество цветов (нули)
54	36	3xN	Сама палитра пикселей.

С ходу можете побаловаться с адресами 0х12 и 0х16, можете сразу получить картинку рода "блджад, что с моим телевизором?". Кстати, я говорил о дегте - это была главная проблема, потому что в big-endian байты идут в обратном порядке. Поэтому картинка 255х255 имела значения 0xFF в этих адресах, а вот 256x256 - 0x00 01. Это может ввести в заблуждение, поэтому учитывайте размер блоков.

Немножко про цветовую схему - в BMP используется собственная схема BGR, а не RGB.

Если вы хотите как-то использовать BMP и глитчевать его в рамках своих игр, то вам бутет полезно знать, что каждый пиксель начинается по адресу 0x(W*(H-x)*3)+32, где x - координата высоты, если считать сверху вниз. В BMP пиксели в строке располагаются слева направо, а вот строки идут снизу вверх.

 

Послесловие и благодарности

Этот пост писался как попытка систематизировать способы получения глитча в домашних условиях. Ну и, наверное, вдохновить на творчество и использования такого "ада" в своих играх - насколько это вообще возможно и уместно. Можно сказать, что мне надоел повсеместный Pixelart и прочие 8bit - это тоже отчасти правда. Если кому интересно - здесь лежит архив с моими экзерсисами, включая те, которые мне не удалось включить в пост. Если кто сделает статью по чисто техническим подробностям практического применения в играх или сделает игру - ура! ура! ура!, товарищи! А то пока кроме как на Glitch City да MoBD и порадоваться не на что.

Благодарности:

• pevzi - за фильтр Shear;
• Xitilon.HD404 - за то, что ковыряется в потрохах глитчеров;
• weirdlos - за недовольство в комментариях;
• Romson - за хороший вопрос;
• Rubel - за клевую игру, которую я нашел в процессе написания статьи;
• infernal_grape - за напоминание о Memory of Broken Dimension.

Спасибо за внимание!