Разработка интерактивных систем

на OpenFrameworks

1. Интерактивные мультимедиа-системы.
Знакомство с openFrameworks

лекции и объявления: вопросы отправляйте на адрес

www.uralvision.blogspot.com perevalovds@gmail.com УрГУ / ИММ весна 2011
Кто ведет курс

доц. к.ф.-м.н. Костоусов Виктор Борисович

гл. прогр. Перевалов Денис Сергеевич

УрГУ: Кафедра высокопроизводительных компьютерных технологий

ИММ: Отдел прикладных проблем управления

Приглашенный лектор: с.н.с., аспирант Федорова Ксения

УрГУ, Факультет искусствоведения и культурологии

Екатеринбургский ф-л Государственного Центра современного искусства

 Предисловие

Что такое
интерактивная мультимедиа система?
Интерактивная мультимедиа-система
 Примеры
FunkyForest

Emily Gobeille and Theodore Watson (создатель OpenFrameworks)

для фестиваля 2007 CineKid в Нидерландах http://zanyparade.com/v8/projects.php?id=12
Примеры
Hand from above

Chris O'Shea, сделано на OpenFrameworks

Примеры
Body Paint

Mehmet Akten
Определение

Под интерактивной мультимедиа системой будем понимать

программно-аппаратный мультимедийный комплекс,
который

1) Является системой реального времени.

2) Имеет средства ввода данных путем использования

различных датчиков, камер, других источников сигналов.

3) Имеет средства вывода данных путем графических,

звуковых, тактильных, роботизированных и прочих
устройств.
Интерактивная мультимедиа
система
Идея
Концепция Дизайн

Разработка
Компьютерное Компьютерная Компьютерный
зрение графика звук / музыка

Реализация
"Физические
Оборудование
вычисления"
и монтаж (physical computing)
Способы разработки интерактивных
систем
- Низкоуровневые библиотеки
- Среднеуровневые платформы
- Высокоуровневые среды
 Низкоуровневые библиотеки

(Open Computing Language)

Обработка, анализ и (Open Graphics Library) Распараллеливание и ускорения
Cкоростная графика вычислений, в частности,
распознавание средствами GPU.
изображений

(Open Audio Box2D - Bullet - Веб-сервер

Library) физический физический
Звук движок 2D движок 3D
Видео 1 Видео 2 и так далее...
Среднеуровневые платформы
Это платформы для "Creative coding", включающие в себя
большой набор функций и библиотек, интегрированных для
удобного программирования.

Processing openFrameworks Cinder

язык: Java язык: C/C++ язык: C/C++

Для компьютерного Недавно появился,
зрения Java работает набирает популярность.
медленно.

Видео 1 Видео 2 Видео 3

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

Max/MSP/Jitter VVVV Unity3D

Ориентирован на Ориентирован на Ориентирован на
аудио. видеоэффекты. качественный 3D.

Пример: Sniff - Интерактивная собака, Unity3D + OpenFrameworks

http://www.vimeo.com/6400266
Области применения

Используя лишь компьютерное зрение, и компьютерную

графику (а также звук),
в настоящее время создается широкий спектр

- рекламных,
- развлекательных,
- обучающих,
- научных,
- оздоровительных,
- художественных

интерактивных систем.
Описание курса
Чем будем заниматься

( 1 ) Основной интерес

- Создание интерактивных мультимедиа-систем на основе

распознавания видео и аудио сигналов.

( 2 ) Умеренный интерес

- 3д-графика, моделирование физики, генерация звука.

( 3 ) База для разработки приложений - OpenFrameworks

Содержание курса
1. Знакомство с OpenFrameworks
- Основы OpenFrameworks. Общие принципы построения систем реального
времени, систем технического зрения и интерактивных систем.
- 2D-графика.
- Получение и обработка изображения с камеры, основы OpenCV.
- Получение и обработка звука.
- Генерация звука, воспроизведение звуковых сэмплов.
- 3D-графика.
- Основы мэппинга.
- Знакомство с высокоуровневыми программами Unity3D, MultitouchDesigner,
QuartzComposer. Установка соединения Openframeworks с ними.
- Подключение внешних устройств с помощью Arduino.
Содержание курса
2. Лекция "Стратегии интерактивного искусства".

Лекцию прочитает Ксения Федорова,

(куратор Екатеринбургского ф-ла Государственного Центра Современного
Искусства,
преп. фак-та искусствоведения и культурологии,
аспиранта каф. эстетики, этики, теории и истории культуры
философского ф-та УрГУ)
Содержание курса
3. Выполнение экспериментальных проектов

Слушателям будет предложено выполнить под нашим

курированием ряд проектов, связанных с анализом видео
и генерацией графики / звука.
Рекомендуемая литература
OpenFrameworks

Joshua Noble "Programming Interactivity:

A designer's Guide to Processing, Arduino,
and openFrameworks"

Для перевода книги можно использовать

http://www.onlinedoctranslator.com/translator.html
Ссылки

Страница OpenFrameworks
www.openframeworks.cc

Каталог приложений на OpenFrameworks

www.creativeapplications.net/category/openframeworks/
 Введение
в OpenFrameworks
Что такое OpenFrameworks
OpenFrameworks —
открытая библиотека (framework) для C++,
предназначенная для работы с мультимедиа.
Разрабатывался как средство для дизайнеров и художников, работающих
с интерактивным дизайном и медиа-артом.

Одно из главных достоинств OpenFrameworks — чрезвычайная простота в

освоении.

В настоящее время является популярным средством

для создания интерактивных систем обработки изображений,
инсталляций и всевозможных экспериментальных проектов,
связанных с графикой, звуком и вводом-выводом на внешние устройства.
Где работает OpenFrameworks

Windows

Mac OS X

Linux

iPhone OS
История создания

OpenFrameworks разработан:
Zach Lieberman, Theo Watson, Arturo Castro, Chris O'Shea,
вместе с другими участниками из
Parsons School of Design, MediaLabMadrid,
Hangar Center for the Arts, и др.

Начало разработки - в Parsons School of Design (Нью-

Йорк),
где Либерман был студентом.
 http://www.flong.com/projects/tables/

Когда использовать
OpenFrameworks
- требуются мультимедиа-возможности (ввод-вывод видео,
ввод-вывод звука, подключение внешних устройств)

- требуется проводить скоростной анализ входных данных

(что возможно обычно только на C / C++)

- достаточно простой логики обработки данных

"расчет->рендеринг->расчет->рендеринг->..."

- нет или мало GUI

- малое время на разработку

Когда не использовать
OpenFrameworks

- требуется много GUI (текстовый редактор)

использовать средства разработки GUI - QT, Cocoa, ...

- нужна сложная логика управления рендерингом (3д-игра)

использовать движки Unity3D, ...

- не требуются мультимедиа-возможности (веб-сервер)

- есть средства / время / желание для промышленной

разработки приложения
собирать проект из "низкоуровневых" библиотек.
Схема работы приложения
Структура openFrameworks нацелена на обработку
мультимедиа-информации в реальном времени.

Это выливается в особенности работы

- вид работающего приложения
- схему работы приложения.
Как выглядит работающее приложение

Во время работы openFrameworks показывает два окна

- графическое (основное) и консольное (для вывода
логов о работе приложения).
Схема работы приложения
Схема работы приложения
Начало работы с OpenFrameworks

1. Установить VisualStudio C++ Express Edition

2. Скачать и установить OpenFrameworks

http://www.openframeworks.cc/download
- там выбрать "visual studio 2008 FAT"
"FAT" значит, что там содержатся расширения и примеры.

3. Проверка работоспособности.
В папке openFrameworks/app/examples загрузить какой-
нибудь пример, скомпилировать и запустить.
Создание нового проекта "Маятник"
с OpenFrameworks
1. В папке openFrameworks/app/examples взять пример
(например, emptyProject ),
скопировать его в /app/myApps/Mayatnik

2. Вписать код в функции вашего класса, производного

от класса ofBaseApp

setup(); //установка параметров при старте

update(); //вычисления, анализ входных данных
draw(); //рисование текущего состояния
Пример с маятником на резинке
Текст "Маятника" testApp.h
//В этом файле ничего править не надо

#ifndef _TEST_APP
#define _TEST_APP

#include "ofMain.h"

class testApp : public ofBaseApp{

public:
void setup();
void update();
void draw();

void keyPressed (int key);

void keyReleased(int key);
void mouseMoved(int x, int y );
void mouseDragged(int x, int y, int button);
void mousePressed(int x, int y, int button);
void mouseReleased(int x, int y, int button);
void windowResized(int w, int h);

};

#endif
Текст "Маятника" testApp.cpp, стр. 1/3
#include "testApp.h" //этот класс уже определен
//Переменные для работы
ofPoint pos0; //точка подвеса
ofPoint pos; //текущее положение
ofPoint velocity; //скорость

//Установка значений
void testApp::setup(){
pos0 = ofPoint( 500.0, 200.0 );
pos = ofPoint( 700.0, 200.0 );
velocity = ofPoint( 0.0, 0.0 );

//Еще задание цвета фона

//OpenFrameworks сам его будет перерисовывать
ofBackground(255,255,255);
}
Текст "Маятника" testApp.cpp, стр. 2/3
//Обновление состояния
void testApp::update(){
//вычисление силы Гука
ofPoint delta = pos - pos0;
float len = sqrt( delta.x * delta.x + delta.y * delta.y );
float guk = 0.01 * (len - 100.0); //100.0 - длина резинки
ofPoint gukForce = delta * (-guk / len);

ofPoint g( 0.0, 9.8 ); //сила тяжести

//2-й закон Ньютона
float dt = 0.2; //TODO тут надо зависимость от реального
времени,
//прошедшего между кадрами
float mass = 0.1;
ofPoint force = gukForce + g * mass;
ofPoint a = force / mass;
velocity += a * dt;
pos += velocity * dt;
}
Текст "Маятника" testApp.cpp, стр. 2/3
//Рисование
void testApp::draw(){

//резинка
ofSetColor(0, 0, 255); //цвет синий
ofLine( pos0.x, pos0.y, pos.x, pos.y ); //нарисовать линию

//кружок
ofSetColor( 255, 0, 0 ); //цвет красный
ofFill(); //включить заливку
ofCircle( pos.x, pos.y, 20); //нарисовать круг
}

... Далее идет остальной код - пустые функции обработки

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

На основе проекта "Маятник" сделать

"Ветвящийся маятник", с маятниками разного веса.
Он будет иметь гораздо более интересную динамику.
Проекты для выполнения

Предлагается выбрать один из экспериментальных

проектов для самостоятельного или коллективного
выполнения:

1. Создание 3д-скульптуры
2. Разлетающиеся цветочки
3. Динамический мэппинг на кубик
Создание 3д-скульптуры
Сценарий
На стол кладется лист бумаги с меткой,
из нее система достраивает 3д-тело.

Зритель берет в руку вторую метку

"долото", и начинает стучать им по
3д-телу, отбивая из него мелкие
частицы.

Вращая стол и работая долотом,

можно сделать 3д-скульптуру.

Технология
1) Для распознавания меток используется технология AR,
например, на основе библиотеки ARToolKit.
Скульптура представляется набором мелких кубиков (50x50x50).
Разлетающиеся цветочки

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

Технология
1) Анализ движений пользователя - с помощью оптического
потока.
2) Рендеринг - делать на openFrameworks,
либо на Unity3D или TouchDesigner (передача данных из
openFrameworks через OSC).
Динамический мэппинг на кубик

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

Технология

1) Трекинг граней кубика с помощью технологий распознавания.

Калибровка камеры и проектора.

2) Рендеринг - делать на openFrameworks,

либо на Unity3D или TouchDesigner (передача данных из
openFrameworks через OSC).