Как превратить код в искусство с awesome-creative-coding

Большинство рабочих дней типичного программиста похожи друг на друга. Мы пишем SQL-запросы, гоняем JSON между сервисами, верстаем формы и чиним упавшие пайплайны. Код в продакшене обязан быть строгим, предсказуемым и прикладным. Но иногда хочется написать алгоритм не ради пользы для бизнеса, а ради визуального эффекта или необычного звука.

Для этого существует креативное программирование (creative coding). Это направление, где результат работы программы оценивают глазами и ушами, а не тестами покрытия. Репозиторий awesome-creative-coding от Terkel Gjervig собрал в одном месте лучшие материалы по этой теме, накопив уже более 15 тысяч звезд на GitHub. Автор систематизировал сотни библиотек, интерактивных учебников, книг и сообществ, посвященных генеративному искусству, шейдерам и алгоритмической музыке.

Что спрятано внутри подборки

В отличие от списков, куда авторы без разбора сваливают ссылки на все подряд, здесь чувствуется аккуратный ручной отбор. Список разбит по четким категориям: от базовых графических фреймворков до специализированного железа вроде перьевых плоттеров AxiDraw.

Материалы сгруппированы так, чтобы в них мог сориентироваться человек с любым уровнем подготовки. Новичок найдет здесь ссылки на бесплатные книги и интерактивные песочницы, а опытный разработчик графики отыщет узкоспециализированные математические шпаргалки и алгоритмы для работы с SDF-функциями.

Фреймворки для генеративной графики

Если вы хотите начать рисовать кодом, вам не придется писать все с нуля на чистом Canvas или голом OpenGL. В подборке собраны проверенные инструменты почти под любой стек:

JavaScript: библиотека p5.js давно стала стандартом для старта благодаря простому API. Если же нужен минималистичный каркас для генерации векторных артов и картинок высокого разрешения прямо в браузере, обратите внимание на canvas-sketch от Мэтта ДеЛорье.
Python: для разработчиков на питоне есть библиотека py5, которая объединяет возможности Processing с вычислительными библиотеками вроде NumPy.
Rust: фреймворк nannou дает максимальную скорость и строгую типизацию для тяжелых графических экспериментов.
C++: проверенные временем openFrameworks и Cinder активно применяются в масштабных музейных инсталляциях и на интерактивных выставках.

Шейдеры и низкоуровневая графика

Графические процессоры работают совсем не так, как обычные процессоры. Они обрабатывают миллионы пикселей параллельно в реальном времени. Из-за этого программирование фрагментных шейдеров на GLSL часто отпугивает новичков: здесь нет привычных массивов, вывода в консоль и стандартного пошагового дебага.

Репозиторий предлагает плавную траекторию входа в эту тему. Отличная отправная точка — интерактивная книга The Book of Shaders. Она наглядно объясняет, как с помощью простых математических функций закрашивать пиксели, создавая плавные градиенты, процедурные паттерны или эффекты жидкости.

// Пример базового фрагментного шейдера: генерация круга
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution;
    float dist = distance(st, vec2(0.5));
    float circle = step(0.3, dist);
    gl_FragColor = vec4(vec3(circle), 1.0);
}

Для тренировок прямо в браузере репозиторий рекомендует платформу Shadertoy. Там можно разбирать исходный код работ других авторов и сразу экспериментировать со своими формулами. А если нужно использовать шейдеры в рабочих проектах, обратите внимание на библиотеку Lygia. Это модульная коллекция функций для GLSL, WGSL и HLSL, которая избавляет от необходимости писать базовые алгоритмы освещения и шума с нуля.

Алгоритмический звук и лайвкодинг

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

Например, Sonic Pi помогает писать электронные треки с помощью лаконичного синтаксиса на базе Ruby. Эту программу часто используют на живых выступлениях: музыкант пишет код на сцене, а звук генерируется на лету.

Для любителей необычных концепций есть Orca. Это среда, похожая на двухмерную сетку символов, где каждый знак работает как оператор и передает MIDI-сигналы. Если же вам нужны строгие аудио-движки, в списке найдутся классический SuperCollider и быстрый Glicol, написанный на Rust.

Математика без скучной теории

В обычной веб-разработке линейная алгебра и тригонометрия требуются нечасто. В генеративном арте матрицы, векторы и синусы становятся главными строительными блоками.

Подборка содержит большой блок интерактивных материалов по математике:

Векторные поля (flow fields), на основе которых строятся генеративные картины из тысяч двигающихся частиц.
Алгоритмы процедурного шума (Perlin Noise и Simplex Noise), имитирующие природные текстуры вроде мрамора, облаков или коры деревьев.
Интерактивные шпаргалки по матричным трансформациям и перемножению матриц.
Коллекции уравнений плавности (easings) для создания естественных физических анимаций.

Зачем тратить на это время

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

Нестандартный фронтенд. Опыт работы с Three.js, Canvas и WebGL помогает собирать сложные промо-лендинги, 3D-конфигураторы и интерактивные элементы, которые выделяют продукт среди конкурентов.
Понимание работы GPU. Разобравшись в пайплайне рендеринга, вы начнете лучше понимать, почему тормозят тяжелые CSS-анимации и как правильно выносить вычисления на видеокарту.
Кастомная визуализация данных. Когда стандартных графиков из библиотек не хватает для отображения сложных структур, навыки процедурной отрисовки выручают мгновенно.
Отдых от рутины. Написание генеративных скриптов возвращает то самое ощущение магии, когда несколько строчек кода сразу превращаются в интерактивное визуальное полотно.

С чего начать изучение

Если вы работаете с JavaScript, проще всего открыть онлайн-редактор p5.js или микро-песочницу tixy.land, чтобы за 10 минут набросать первую анимацию из геометрических фигур. Если вас привлекает низкоуровневая графика и работа со светом, откройте The Book of Shaders и попробуйте повторить пару примеров на Shadertoy.

Репозиторий awesome-creative-coding хорош тем, что в него можно заглядывать раз в пару месяцев и стабильно находить новый необычный фреймворк или алгоритм. Сохраните эту подборку в закладки на случай, когда захочется отвлечься от рабочих задач и написать что-то красивое чисто для души.