Интерактивная визуализация Первой Прелюдии Баха

Александр Чен, тот самый, который впечатлил зрителей на Music Hack Day своим Stringer вновь удивляет своими достижениями в визуализации. Его новое творение — это визуализация Первой Прелюдии Баха, сделанная в браузере (но есть и интерактивная оффлайн версия) при помощи HTML5. Если вы знаете нотную грамоту — можете даже проверить себя, но даже если нет — это стоит увидеть, завораживающее зрелище.

Вот что говорит автор по поводу этого:

baroque.me визуализирует первую из шести Прелюдий из Сюиты для виолончели Баха. Идея довольно проста: что если поменять местами отображение нот и струн, описывая формулами длину и высоту ноты. С этой точки зрения проект открывает более глубокую, базовую структуру музыки. baroque.me создан при помощи HTML5 Canvas, Javascript, SoundManager.

Почему вы остановились именно на этом произведении? И как именно описали математическую модель визуализации, то есть, чем определяется количество точек, расстояние между струнами и их длина?

Алекс: Да ничего особенного, просто слушал однажды вступление в сюитам, и то место, где мелодяи повторяется дважды, оно прозвучало словно вызов. Просто картинка готовая в голове возникла. Я начал развивать эту идею, надо заметить, найти обоснованное соотношение длинны струн было непросто. Я понял, что могу получить всю хроматическую гамму используя две неравных части, 2/3 и 1/2. Они соответствуют пятой и октавному интервалу, это, кстати, называют Пифагорейский строй.
Алекс: На самом деле нет, я сразу пошел по нужному пути, ну разве что в синхронизации точек были некоторые проблемы.
Алекс: Не все замечают, что визуализация музыки сегодня — достаточно распространенное явление. И, как правило, все они плоские, очень линейные. Компьютерные стулии с их кирпичиками нотных станов, Guitar Hero, все они построены по одному принципу. Независимо от результата, визуализация очень важна в любом виде, не меньше, чем визуализайция слов, которой являются книги. В данном случая я просто решил попробовать что-то новое. Это не только интересное занятие для исполнителя, но и для зрителя, это почти что магия — когда едва заметные движения пальцев не только слышны благодаря инструменту, но и вливаются буйным потоком света через проектор.

Кстати говоря, визуализация первой прелюдии — не первая, как не странно. Ниже на картинке еще одна, уже не компьютерная модель этого произведения. Вот как автор (George Showman) описывает произведение:

Эта модель — отношение движений правой и левой руки когда я играл на виолончели. Движения вверх-вниз соотнесены перемещения левой руки, а вправо-влево — левой. По сути дела я работал плоттером!

Cравните, насколько отличаются эти две попытки, фактически, попытаться остановить музыку.