- PVSM.RU - https://www.pvsm.ru -

Визуализация музыки: от традиционных подходов к современным интерфейсам

Визуализация музыки: от традиционных подходов к современным интерфейсам [1]

Предисловие: предлагаю познакомиться с моей магистерской диссертацией [2] о радиальной драм-машине. Особенно обратите внимание на раздел о визуализации ритма [3]. Также просмотрите несколько более научный обзор литературы [4] о визуализации и музыкальном образовании. А в этой статье [5] я рассматриваю ценность видеоигр в музыкальном образовании.

Процесс электронного написания и сочинения музыки включает в себя работу не только слуховых, но и зрительных органов. Отображение данных в таких аудиоредакторах, как Pro Tools и Ableton Live носит чисто информационный характер – это волны, сетки и линейные графы. Некоторые системы визуализации исключительно декоративные, например, iTunes, который создает психоделическую наполовину случайную графику. Также существуют системы, которые представляют собой нечто среднее. Я вижу большой потенциал в таких графических системах, мне кажется, они могут помочь лучше понять принцип действия музыки и найти новые оригинальные композиционные приемы. В этой статье я предлагаю вашему вниманию подборку наиболее интересных систем визуализации музыки, с которыми я когда-либо сталкивался.

Нотная запись

Западная нотная запись – традиционный многовековой способ визуализации музыки. Это очень стройная и сжатая система, четкая и символичная, к тому же, ее несложно освоить. Такие программы, как Sibelius, могут без труда переводить музыкальную нотацию в MIDI-данные и обратно.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Но западная нотная запись имеет ряд ограничений, особенно в отношении современной музыки. Ее неудобно применять в работе с микротонами [6]. Она обладает ограниченной возможностью выражать исполнительские нюансы – за сто лет существования джаза для обозначения свинга [7] не было придумано ничего лучше, чем просто написать слово «свинг» в верхней части партитуры. Система ключей [8] хорошо работает для мажорных тональностей [9], но не так хорошо для минорных тональностей [10] и при работе с музыкальными ладами [11], а если речь идет о блюзе [12], то применять ее совершенно бесполезно.

Хочу поделиться предположением, как нотная запись может усовершенствоваться в будущем. Это созданная Джоном Снайдалом (Jon Snydal [13]) визуализация соло Джона Колтрейна (John Coltrane) в песне Майлза Дэвиса (Miles Davis) All Blues (я немного отредактировал, чтобы зрительно легче воспринималось).

Визуализация музыки: от традиционных подходов к современным интерфейсам

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

MIDI-секвенсоры предлагают осуществлять дальнейшие усовершенствования, выходя за пределы стандартной нотной записи. Обратите внимание на упрощенный электронный музыкальный секвенсор под названием iNudge [14]. Попробуйте, это забавно.

Вот как выглядит мелодия Thelonius Monk «Four In One» в стандартном режиме нотного стана в MIDI-секвенсоре. Прямоугольники показывают не только то, какие ноты были проиграны и когда, но и их точную продолжительность. Красные прямоугольники потемнее означают, что громкость была выше, а розовые прямоугольники посветлее – тише. Также вы можете считать показатели громкости на панели внизу.

Визуализация музыки: от традиционных подходов к современным интерфейсам

MIDI-система очень функциональна и удобна в использовании. Она может фиксировать ваши движения на клавиатуре, вы можете импортировать партитуры, у вас даже есть возможность рисовать ноты прямо на экране (мой любимый метод).

MIDI-плеер Music Animation Machine [15] имеет ряд замечательных видео, совмещающих визуальное представление MIDI-дорожки с аудиозаписями классических произведений. Вот, к примеру, небезызвестная Токката и Фуга Ре-минор Баха.

Поскольку способность программного обеспечения извлекать данные из современных аудиозаписей постоянно совершенствуется, вы можете начать управлять ими с такой же легкостью, что и MIDI. Это скриншот программы коррекции тона Melodyne [16], которая очень похожа на Auto-tune [17].

Визуализация музыки: от традиционных подходов к современным интерфейсам

Линии отображают уже пропетые ноты, а оранжевые капли показывают ноты, которые должен взять певец, по мнению программы. Толщина капли отображает уровень громкости. Вы можете перетаскивать капли и перерисовывать линии, как вам захочется, чтобы переделать песню в соответствии со своим настроением. Программа Melodyne может даже расшифровать и перезаписать проигрываемую мелодию в формате нотного стана и MIDI.

Высокие и низкие частоты

Принято, что более высокие частоты должны пространственно отображаться «выше», а более низкие – «ниже». Это кажется очень разумным, но на самом деле они могут отображаться совершенно произвольно и даже не соотноситься с физическим исполнением. На пианино высокие ноты находятся справа, а низкие слева. На гитаре «низкая» струна E физически находится над «верхней». Для духовых инструментов игра на нижних и верхних нотах также не соотносится с их физическими координатами.

Абсолютная высота тона отображается поступенно по восходящей, но высотный класс [18] отображается по кругу. Самое правдоподобное изображение пространственной организации тона – это спираль.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Другие способы смоделировать соотношение тонов

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

Визуализация музыки: от традиционных подходов к современным интерфейсам

Но на самом деле окружность лишь заменяет определения «вверх/вниз» на «по часовой стрелке/против часовой стрелки». Существуют другие способы изобразить тон. Мы интуитивно пытаемся изменить подход и представить их, как движения ближе и дальше или внутрь и наружу. Также мы задумываемся о том, чтобы сделать более высокие тона ярче, а низкие темнее. Некоторые из тех, кто играет на струнных музыкальных инструментах, иногда специально настраивают верхнюю струну чуть выше, чем нужно, чтобы создать эффект, известный как «блеск».

Время

Общая договоренность – обозначать в нотной записи время слева направо. Но это не единственно возможное направление. Я имею в виду парадигму, которая предлагается в таких ритмических играх, как Dance Dance Revolution и Guitar Hero. Безупречная реализация этой концепции принадлежит игре под названием FreQuency [19].

Игра даже позволяет создавать свои собственные ремиксы.

Мне нравится такая «тоннельная» метафора, и мне хотелось бы увидеть ее распространение в развитой среде производства.

Волны

Колебания тона представляют собой синусоидальные (гармонические) вибрации [20], и вы можете визуализировать их таким образом:

Визуализация музыки: от традиционных подходов к современным интерфейсам

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

Визуализация музыки: от традиционных подходов к современным интерфейсам

Посмотрите на все анимированные мембраны барабанов в Wikipedia [21].

Волновые формы отображения звука

Аудиоредакторы отображают музыку, как амплитуду колебаний волн, используя капли, которые становятся шире, когда звук становится громче. Перед вами барабанная сбивка [22] (Funky Drummer break), созданная с помощью редактора ReСycle [23]. Голубые капли показывают удары барабана. Интенсивность капель не содержит обширных сведений о музыкальных параметрах, она показывает только продолжительность и громкость. Но ReСycle был создан для моделирования барабанных сэмплов, для которых время и громкость – единственная действительно важная информация.

Визуализация музыки: от традиционных подходов к современным интерфейсам

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

Визуализация музыки: от традиционных подходов к современным интерфейсам

В своей статье [24] на Design Observer Роб Уолкер (Rob Walker) говорит о волновых колебаниях, как о музыкальном эталоне, который постепенно заменяет традиционные «восьмушки» [в системе традиционной нотной записи – прим. перев.] или другие форматы записи, которые уже отслужили свое. Плеер на сайте SoundCloud использует привлекательные волновые графики, которые помогают слушателю следить за местом прослушивания песни, наблюдая пики громкости. На SoundCloud даже существует группа, которая называется Pretty Waveforms [25].

Волновая форма колебания тона имеет тенденцию движения от чистой функциональности в сторону дизайна. Джошуа Дистлер (Joshua Distler [26]) создал концепцию оформления обложки альбома Bjork [27], где каждая песня представлена в виде звуковой волны.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Теория музыки и сети

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

Визуализация музыки: от традиционных подходов к современным интерфейсам

Это схема аккордовой последовательности в песне Giant Steps [28] Джона Колтрейна [29].

Визуализация музыки: от традиционных подходов к современным интерфейсам
Визуализация музыки: от традиционных подходов к современным интерфейсам

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

Визуализация музыки: от традиционных подходов к современным интерфейсам

Было бы гораздо круче иметь больше абстрактных трехмерных интерактивных визуализаций, которые показывали бы, как функционируют аккорды, тональности и мелодии. Леонард Эйлер продемонстрировал способ отображения тональной гармонии в качестве пространственной решетки [30] в форме тора, как показано на этой анимации. Красные линии обозначают большие терции, зеленые обозначают малые терции, а голубые отображают квинты.

Визуализация музыки: от традиционных подходов к современным интерфейсам

У меня есть честолюбивые замыслы в этой области, но мне не хватает навыков программирования, чтобы их реализовать. Хотя другие серьезно продвигаются в этом направлении. Дмитрий Тимошко (Dmitri Tymoczko [31]) произвел фурор, опубликовав в Science свою первую связанную с музыкой статью о своих топологических методах визуализации тональной гармонии. Я не могу до конца разобраться в его идеях, но они кажутся мне интригующими.

Это иллюстрации Анируда Пателя (Aniruddh Patel) из его статьи [32] «Язык, Музыка, Синтаксис и Мозг». И снова, я не совсем четко понимаю, что все это значит, но планирую попозже разобраться.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Другие теоретики предпринимали попытку использовать цвет для отображения гармонической функции. Скрябин, к примеру, для этого изобрел «световую клавиатуру [33]», хотя она так и не стала пользоваться популярностью.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Визуализация музыкальных форм и структур

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

Визуализация музыки: от традиционных подходов к современным интерфейсам

Эдвард Тафти (Edward Tufte) демонстрирует некоторые более изощренные методы визуализации структуры песни на своем форуме [34]:

Визуализация музыки: от традиционных подходов к современным интерфейсам

Проект Мартина Ваттенбурга (Martin Wattenburg [35]) Shape of Song [36] показывает повтор в пределах одной музыкальной композиции. Вот его визуализация песни Мадонны Like a Prayer.

Визуализация музыки: от традиционных подходов к современным интерфейсам

А это визуализация Ваттенберга для композиции «К Элизе» Бетховена.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Еще варианты

Далее приведу увлекательное видео Никласа Роя (Niklas Roy [37]) в котором показывается, как вы можете создать модный аудиоряд на драм-машине, используя двоичный счет.

А разве эта графическая цветная система не является крутой нотной записью или интерфейсом?

Визуализация музыки: от традиционных подходов к современным интерфейсам

На Visual Complexity [38] представлено очень много идей [39] наподобие этой.

Вдобавок

Джон Кловер (John Clover [40]) рассказал мне об этом посте [41], который сильно перекликается с моим: «Потрясающая визуализация музыки и обучение музыке».

У меня была возможность сыграть несколько песен Bjork из альбома/проекта Biophilia [42]. Визуализация некоторых из их очень оригинальна и интерактивна, некоторые из песен визуализированы просто интересно, но традиционно, а визуализация некоторых непонятна, но заслуживает внимания за креативность. В любом случае это примечательный эксперимент который, я думаю, окажет влияние на принципы визуализации музыки.

Визуализация музыки: от традиционных подходов к современным интерфейсам

Автор: Actee

Источник [43]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/interfejsy/68772

Ссылки в тексте:

[1] Image: http://habrahabr.ru/company/audiomania/blog/235339/

[2] магистерской диссертацией: http://www.ethanhein.com/wp/my-nyu-masters-thesis/

[3] визуализации ритма: http://www.ethanhein.com/wp/my-nyu-masters-thesis/visualizing-rhythm/

[4] обзор литературы: http://www.ethanhein.com/wp/2013/draft-thesis-proposal/

[5] этой статье: http://www.ethanhein.com/wp/2013/the-nirvana-effect/

[6] микротонами: http://www.ethanhein.com/wp/2010/blue-notes/

[7] свинга: http://www.ethanhein.com/wp/2011/swing/

[8] Система ключей: http://www.ethanhein.com/wp/2011/how-do-you-know-what-key-youre-in/

[9] мажорных тональностей: http://www.ethanhein.com/wp/2011/meet-the-major-scale/

[10] минорных тональностей: http://www.ethanhein.com/wp/2011/intro-to-minor-keys/

[11] ладами: http://www.ethanhein.com/wp/2011/the-major-scale-modes/

[12] блюзе: http://www.ethanhein.com/wp/2011/blues-basics/

[13] Jon Snydal: http://www.offhanddesigns.com/jon/portfolio.html

[14] iNudge: http://www.inudge.net/index.en.html

[15] Music Animation Machine: http://www.musanim.com/

[16] Melodyne: http://www.celemony.com/en/start

[17] Auto-tune: http://www.ethanhein.com/wp/2009/learning-music-theory-with-autotune/

[18] высотный класс: http://en.wikipedia.org/wiki/Pitch_class

[19] FreQuency: http://en.wikipedia.org/wiki/Frequency_%28video_game%29

[20] вибрации: http://www.ethanhein.com/wp/2009/tuning-the-quantum-guitar/

[21] Wikipedia: http://commons.wikimedia.org/wiki/Category:Drum_vibration_animations

[22] барабанная сбивка: http://www.ethanhein.com/wp/2009/the-natural-history-of-the-funky-drummer-break/

[23] ReСycle: https://www.propellerheads.se/products/recycle/

[24] статье: http://designobserver.com/feature/stealth-iconography-the-waveform/30008

[25] Pretty Waveforms: http://soundcloud.com/groups/pretty-waveforms/tracks

[26] Joshua Distler: http://lovelypackage.com/music-cd-labeling-system/

[27] Bjork: http://www.ethanhein.com/wp/2009/bjork/

[28] Giant Steps: http://www.youtube.com/watch?v=2kotK9FNEYU

[29] Джона Колтрейна: http://www.ethanhein.com/wp/2009/coltrane-was-an-analog-remixer/

[30] решетки: http://en.wikipedia.org/wiki/Tonnetz

[31] Dmitri Tymoczko: http://dmitri.tymoczko.com/

[32] статьи: http://www.nature.com/?file=/neuro/journal/v6/n7/full/nn1082.html

[33] световую клавиатуру: http://en.wikipedia.org/wiki/Clavier_%C3%A0_lumi%C3%A8res

[34] форуме: http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000OQ

[35] Martin Wattenburg: http://www.bewitched.com

[36] Shape of Song: http://www.turbulence.org/Works/song/index.html

[37] Niklas Roy: http://vimeo.com/royorobtiks

[38] Visual Complexity: http://www.visualcomplexity.com/vc/

[39] много идей: http://www.visualcomplexity.com/vc/blog/?p=811

[40] John Clover: http://www.quora.com/John-Clover

[41] посте: http://www.quora.com/Ben-Golub/Amazing-Music-Visualizations-and-Teaching

[42] Biophilia: http://en.wikipedia.org/wiki/Biophilia_%28album%29

[43] Источник: http://habrahabr.ru/post/235339/