arthew0

← назад

Visio

2026-08-13 · projects

Visio

год
2026
тип
art
инструменты
WebGL2, MediaPipe, TypeScript, React
роль
author
описание
Живой нодовый AV-инструмент в браузере: computer vision → графика и гранулярный звук.
ссылки
https://visio.aa.arthew0.online/?utm_source=site&utm_medium=projects&utm_campaign=launch

Visio — не обычный видеоредактор. Это живой нодовый аудиовизуальный инструмент, который целиком работает в браузере. Он смотрит на изображение, видео или камеру через computer vision, извлекает структуру из того, что видит, и сразу превращает точки, скелеты*, углы и движения в графику и звук*.

Автор — Алексей Руденко (arthew0), медиахудожник и физик. Его практика связывает computer vision, синтез звука и синестезию с линией русского авангарда (Кандинский, Малевич, Скрябин). Visio — один из самых прямых инструментов в этой традиции: не симуляция красивой картинки, а система, которая наблюдает мир и отвечает формой.

Открыть visio.aa.arthew0.online.

* — в версии 1.0.0, уже тестируется. Сейчас на сайте урезанный функционал.

Идея

Пайплайн нарочно простой и жёсткий:

Media → Tracking → Drawing → Effects → Granular audio*

  1. Бросьте файл в любое место окна (или откройте камеру). Нода Media читает не только картинку, но и богатые метаданные — кодек, битрейт, время и место съёмки, камеру и объектив — даже с iPhone-роликов, у которых атом moov сидит в самом конце файла.
  2. Ноды трекинга извлекают структуру: MediaPipe* pose (33 точки)*, руки*, face mesh*, детекция объектов*, углы Ши–Томаси, трекинг фич оптическим потоком (пирамидальный Лукас–Канаде), окружности и линии Хафа*.
  3. Ноды рисования превращают эти данные в скелеты*, точки, линии*, частицы, диаграммы Вороного* и Делоне*, минимальные остовные деревья*, радиальные раскладки*, квадродеревья и рекурсивные сетки в духе Мондриана.
  4. Эффекты наслаивают feedback, displacement, pixel sorting, кастомные шейдеры* и блендинг.
  5. Отдельный ход: Features Grid (или другой геометрический выход) может управлять гранулярным* синтезатором. Каждый прямоугольник или ячейка становится триггером или зацикленным голосом. Картинка начинает звучать.

Таймлайна нет. Вы не режете клип — вы собираете живую перцептивную машину, которая работает каждый кадр.

Чем отличается

Features Grid — одна из самых характерных идей. Каждый кадр заново детектятся углы Ши–Томаси. Затем кадр рекурсивно режется на прямоугольники в духе Мондриана: каждый разрез идёт по длинной стороне через середину точек внутри области. Межкадрового трекинга в этом режиме нет — только текстура текущего кадра, превращённая в жёсткую геометрию. Результат ощущается и аналитическим, и живописным.

Рядом — Features Tracking: углы ищутся редко, между кадрами идёт оптический поток, слабые треки отбрасываются, и только те, что прожили достаточно долго, дают линии движения — временной двойник статичной сетки.

Порты строго типизированы (frame, texture, landmarks, points, boxes и т.д.). Несовместимые соединения просто не принимаются. Движок полностью отделён от React UI: интерфейс только описывает граф; каждый кадр императивный WebGL2-рантайм обходит ноды в топологическом порядке и пишет в текстуры. Координаты нормализуются один раз на источнике, поэтому ноды рисования не пересчитывают систему координат. Тяжёлые CPU-детекторы (Хаф, углы) могут работать в воркере.

Интерфейс заточен под портрет 1080×1920 — граф нод лежит поверх картинки, есть пресеты и запись. Ближе к инструменту для перформанса или инсталляции, чем к десктопному монтажному пакету.

Зачем это

Visio — нарочно упрощённый cables.gl, заточенный под одну задачу: делать данные трекинга видимыми и слышимыми в реальном времени, прямо в браузере, без установки. Исходники открыты.

Бросьте своё видео или откройте камеру — характер проекта сразу ясен: это не «обработка клипа», а система, которая смотрит и отвечает.

Связанное

#computervision#generativeart#web#visio