Креативное программирование: openFrameworks — установка и пример визуализации музыки

Может быть это ваша каждодневная работа, а мой последний (до вчерашнего дня) проект на С++ был в далеком 2000 году — дипломный проект на базе Visual Studio 4.2 (хорошая, кстати, система была), и с тех пор перешёл в веб-разработку — скриптовые языки.

• открытый фреймворк для создания интерактивных приложений — openFrameworks
• бесплатное IDE Code::Blocks

А начиналось всё так — после очередного прослушивания музыки от одного композитора из Самары, я подумал — было бы интересно попробовать сделать визуализацию музыки, и обратился к Денису Перевалову (кто не первый год занимается созданием разнообразных интерактивных арт/перформанс систем) — он мне ответил, что это делается без проблем на базе openFrameworks и что в примерах к его книге (а он автор книги по openFrameworks), есть реализация такой задачи.

То есть мне нужно было всего лишь — установить фреймворк, доработать и собрать пример на С++… Об этом процессе — установке, настройки, и кратком описании openFrameworks и будет эта статья.

openFrameworks — это система с помощью которой можно запрограммировать интерактивное мультимедийное приложение, то есть арт, перформансы и т.п., она бесплатная, открытая и кроссплатформенная система (linux, mac, win), и так же есть версии для ARM (к примеру для RPi), и сборки для iPhone и Android.

Кстати на КДПВ — одна из инсталляций на базе openFrameworks (Семь Видеогидов. выставлено на ВДНХ в экспозиции Политехнического музея. Москва, 2014). Что же такое openFrameworks? Это набор модулей — для интеграции с Arduino, с кинектом, с системой распознавания образов OpenCV, рисование 3д графики, работа со звуком, камерами и т.п. с помощью которых можно сделать интерактивное приложение. И всё это на базе C++.

В поле моего зрения openFrameworks попала, когда я вышел на роботизированные инсталляции созданные с её помощью.

• 1. Настройка openFrameworks
• 2. Основные принципы openFrameworks приложения
• 3. Тестовый пример

• установка openFrameworks (для CodeBlocks)
• установка IDE CodeBlocks
• копирование библиотек openFrameworks для CodeBlocks компилятора

Согласно этой страничке download я выбрал версию openFrameworks, для моей ОС и для IDE на которой я планировал работать.

В моем случае win и code::blocks: скачиваем архив of_v0.8.4_win_cb_release.zip

Распаковываем, архив содержит следующие папки: * addons * apps * docs * examples * export * libs * other * projectGenerator * scripts

Это C++ библиотеки openFrameworks, примеры, аддоны и т.п.

Для того чтобы создавать openFrameworks приложение, лучше использовать IDE среду.

В качестве IDE, я решил выбрать code::blocks (visual studio всё таки великовата будет для меня сейчас)

CodeBlocks — это бесплатная и открытая IDE, созданная на базе кроссплатформенной GUI библиотеки wxWidgets. Согласно этой странице openframeworks.cc/setup/codeblocks скачиваю IDE CodeBlocks. Версия Release 12.11 Отсюда. Эта сборка идёт вместе с MinGW — открытой средой разработки под win платформу.

Вот так выглядит IDE CodeBlocks

Важный пункт — для того чтобы из IDE CodeBlocks, успешно собирались openFrameworks проекты, необходимо скопировать дополнительные файлы в MinGW.

Распаковываем во временной папке, и копируем в соответствующие папки в установленном CodeBlocks, согласно этой инструкции:

Всё, теперь мы готовы к сборке openFrameworks проектов!

Откроем тестовый проект, для этого выберем со стартовой страницы IDE CodeBlocks выберем «Open an existing project. » (или в File — Import Project — Dev-C++ project… — и выбрав тип файлов *.*)

Переходим в папку где мы развернули openFrameworks, заходим в examples/empty/emptyExample, и открываем файл проекта emptyExample.

Вот так выглядит IDE после открытия проекта:

Попробуем сразу же стартовать проект — на картинке указана стрелкой иконка или нажать F9 — RUN.

Если приложение не собрано, то будет стартована сборка (после вашего подтверждения) и по окончании сборки — приложение стартуется.

Если всё настроено верно, то по окончании процесса сборки будет открыто консольное окно, и мы увидим это окно:

Поздравляю! Значит всё настроено верно. И в папочке bin появилось приложение emptyExample.exe, которое вы можете уже запускать независимо.

Теперь посмотрим на файлы нашего emptyExample проекта, они находятся в папке src: * main.cpp * ofApp.h * ofApp.cpp

Файл main.cpp:

В нем определяется окно нашего приложения, и далее создаётся экземпляр класса ofApp.

Файл ofApp.h:

Здесь определяется класс наш класс ofApp, наследуется от ofBaseApp. И методы.

Основной класс приложения ofApp.cpp:

Как мы видим — ничего не реализовано, мы увидели просто пустое, но работающее openFrameworks приложение.

Основными методами нашего класса являются:

Архитектура любого openFrameworks приложения следующая:

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

Основной цикл это update и draw, где в первом методе — происходят только расчеты, а во втором draw — рисование. И после этого цикл повторяется.

Выход происходит по нажатию Esc.

Вот мы подошли к нашей задаче — визуализации музыки.

На этом сайте представлены примеры к книге «Mastering openFrameworks: Creative Coding Demystified». Сами файлы можно бесплатно скачать с карточки книги (после регистрации).

Я скачал этот пример, и распаковал архив в корне моей openFrameworks папки — это важно, т.к. папка проекта должна находиться на 2 уровня ниже.

Вот ВЕСЬ исходный код, проекта 06-Sound/06-DancingCloud:

300 точек (const int n = 300;) движутся по траекториям шума Перлина, причем соседние точки соединяются отрезками. Радиус облака и скорость движения — это два параметра, которые берутся из анализа звука.

Анализ звука такой: исходный звук превращается в спектр (с помощью оконного преобразования Фурье). Выбираются два значения спектра, которые и становятся двумя параметрами, управляющими движением облака точек. Эти две частоты показаны на спектре чёрным цветом.

Смотрим отличия от нашего emptyExample.

main.cpp — идентичен по сути.

В testApp.h, добавился атрибут sound, класса ofSoundPlayer:

ofSoundPlayer — это базовый класс для работы со звуком, docs.

Самое интересное находится в testApp.cpp.

Вот переменные, что используются для реализации логики:

Вот что прописано в методе testApp::setup() происходит инициализация музыки, переменных для отображения спектра, и точек облака:

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

В методе testApp::update() — происходит вся «магия» по расчету размещения точек.

Вот метод рисования, здесь согласно рассчитанным данным происходит отображение спектра, точек облака, и линий между точками (при условии если они ближе float dist = 40):

Автор любезно согласился на мое использование его композиции Звезда.

Первым дело — я заменил wav на mp3 — openFrameworks поддерживает mp3. Так же сделал потоковое воспроизведение (иначе все 8Мб должны быть сразу загружены — добавил true вторым параметром, docs).

Добавил загрузку фонового изображения:

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

Фрагмент из ofApp::draw():

В этом возникли некоторые сложности, и в конечном итоге было выполнено с помощью «Camtasia Recorder».

Основной сайт проекта: openframeworks.cc там предоставлены достаточно хорошие туториалы.

Если вы работаете с openFrameworks, или интересно попробовать, то приглашаю в русскоязычную группу по openFrameworks.