Следующим направлением развития фильтров в mIRO))) для меня стала работа с квадратными формами. Начать движение в эту сторону я решил с эффекта пикселизации. Пикселизация превращала изображение в мозаику из разноцветных клеток, напоминающих увеличенные пиксели.
Работая с этим эффектом я прошел несколько этапов:
1. Использование простой пикселизации, разбивающей изображение на равные квадраты. Этот эффект не перекрашивает пиксели, а работает с uv-разверткой (системой координат) изображения. Развертка деформируется таким образом, что левый верхний пиксель в границах заданной области увеличивается до размеров всей клетки. Подобный эффект можно увидеть и в оптических пикселизаторах.
// соотношение сторон кадра
float aspectRatio = canvasWidth/canvasHeight;
// размер ячейки в процентах от размера кадра
vec2 cellSize = vec2(0.1);
// преобразование прямоугольной ячейки в квадратную
cellSize.y *= aspectRatio;
// пикселизация развертки (системы координат)
vec2 uv = uv-mod(uv, cellSize);
2. Поворот пикселизованной сетки. Чтобы нарушить ровные ряды клеток, их можно поворачивать на произвольные углы. Угол поворота можно брать из самого изображения, разделив его на несколько однородных областей, каждая из которых будет задавать свой угол. Такое разделение на однотонные зоны можно получить через постеризацию. Математически постеризация работает так же, как и пикселизация — путем квантования, преобразования плавных градиентов (яркости, координат) в ступенчатые значения.
// получения яркости из зеленого канала
float bw = img.g;
// постеризация яркости через квантование
float bwPosterized = bw-mod(bw, 0.1);
// постеризированная яркость используется как угол поворота
float a = bwPosterized;
// поворот системы координат через матрицу вращения
uv *= mat2(cos(a), -sin(a), sin(a), cos(a));
3. Перспективное искажение сетки. Для того, чтобы стека пикселей наклонялась не только в стороны, но и вглубь изображения, можно использовать преобразование из декартовых (прямоугольных) координат в полярные (круговые), заполняя изображением стены условного туннеля, уходящего внутрь снимка.
// сдвиг точки перспективы к центру кадра
uv -= vec2(0.5);
// перевод развертки в полярные координаты
uv = vec2(length(uv), atan(uv.y, uv.x));
Итоговый фильтр пикселизовал изображение и наклонял сегменты клеток в разные стороны, визуально разделяя объекты в кадре. Позже к этому эффекту я добавил дисплейсмент для более хаотичного визуала.
Изображения сняты через фильтр:
▹ mIRO))) / Deerhoof / AB