Анимация Изображения С Помощью Шейдеров Или Программирование Абстрактного Текста

Пару лет назад мне попалась картинка с простой геометрией:

Анимация изображения с помощью шейдеров или программирование абстрактного текста

Нарисовать его в ascii art было несложно, и теперь я запрограммировал видеокарту так, чтобы на матрице получались сотни одинаковых картинок, плавно перетекающих друг в друга.

По геометрии вроде бы вопросов нет, но солярный узор и текст создались не сразу.

Я получил что-то похожее на исходную текстуру узора, используя следующую операцию:

   

 c=(vec4(ceil(sin(r))+mod(y,2.0))+vec4(ceil(cos(r))+mod(x,2.0)))*(vec4(ceil(sin(r2))+mod(y,2.0))+vec4(ceil(cos(r2))+mod(x,2.0)));

где r и r2 — квадрат радиуса и радиуса.

А вот с текстом, наверное, интереснее: я научился таким образом получать абстрактный текст https://www.shadertoy.com/view/sdKXW1 и вот еще пример https://www.shadertoy.com/view/fdySWD Теперь осталось только растянуть текст на геометрию.

Для этого нужно выбрать перпендикуляры.

Для диагонали вместо x и y мы используем их сумму и разность в операции деления по модулю.

И чтобы растянуть абстрактный текст на круг, нам придется заменить эти переменные радиусом и градусами.

Если вы хотите провести текст по заданной кривой, например, y=sin(x/32.0)*8.0, подойдет этот код:

void mainImage(out vec4 c,in vec2 o){ float y=floor(o.y/2.0)-iResolution.y/4.0; float x=floor(o.x/2.0); float r=floor(pow(x,2.0)+pow(y,2.)); c=vec4(ceil(ceil(sin(r)*4.0)+ceil(abs(y+(sin(x/32.0))*8.0)))); if(cos(x)>0.0)c=vec4(1); }

Перпендикуляр в этом случае будет косинусом.

Ну и в конце можно добавить зависимость этих формул от времени, чтобы оживить картинку и дать понять, что текст не настоящий.

Анимация изображения с помощью шейдеров или программирование абстрактного текста

Если вам интересно посмотреть, как оживает текст или посмотреть весь код: то вот он ссылка на шейдертой .