Embed Size (px)
DESCRIPTION
Citation preview
Media Art II 2011第１回：openFrameworks入門2011年9月6日多摩美術大学 情報デザイン学科 情報芸術コース田所 淳
openFrameworksって何?
このワークショップのテーマ‣ openFrameworks を極める!!
openFrameworks とは?‣ C++によるクリエイティブなコーディングのためのオープンソースのツールキット
‣ http://openframeworks.cc/‣ 現在のバージョンは、v0.07
‣ openFrameworksを紹介した映像を鑑賞 (20minくらい)
簡単な歴史‣ 2004年、Zachary Liebermanがニューヨークのパーソンズ美術大学での大学院のクラスの作品制作のためのツールとして開発
‣ その後、Zachary Lieberman、Theo Watson、Arturo Castroを主要メンバーとして、世界中の開発者と協力しながら発展
Zachary Lieberman
様々なメディアを駆使した作品を作りたい!!
様々な技術に精通しなくてはならないサウンド、ビデオ、フォント、画像解析...etc.
openFrameworksを利用すると…既存の道具(ライブラリ)を設定なしに使用可能→ 作品制作のための「糊」
開発のための「糊」
main.cpp
testApp.h testApp.cpp
openGL GLUT freeimage freetype
fmod rtaudio quicktime openCV
ofSimpleApp, ofGraphics, ofImage, ofTruTypeFont, ofVidePlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils
プログラムの開始
コードを書くところ
OpenFrameworksの機能
ベースとなるライブラリ群
openFrameworksを活用した作品‣ 参考サイト：creative applications‣ openFrameworksのカテゴリーに多くの作品が掲載‣ http://www.creativeapplications.net/category/openframeworks/
openFrameworks開発環境の構築
openFrameworksをダウンロード‣ openFrameworksのダウンロードページより‣ http://www.openframeworks.cc/download
‣ v0.07 mac x-code 版をダウンロード
openFrameworksの開発環境‣ openFrameworksには、ProcessingやFlashなどのように専用の開発環境があるわけではない
‣ それぞれのOSに応じた、C++の開発環境を使用する‣ Mac OSX - XCode‣ Windows - Code::Blocks もしくは Visual Studio 2010‣ Linux - Code::Blocks
openFrameworksの開発環境‣ XCodeとC++のコンパイラを入手するには‣ Appleの開発者登録が必要 (無料)‣ http://developer.apple.com/programs/register/
openFrameworksの開発環境‣ XCodeのバージョン‣ OSX 10.6 Snow Leopard以前 → XCode 3.x‣ OSX 10.7 Lion → XCode 4.x‣ インタフェイスや設定方法が若干違う‣ Xcode4にはGitによるバージョン管理機能も‣ Lionであれば、両方のバージョンを併用することも可能
サンプルを実行してみよう!!‣ 「of_preRelease_v007_osx/apps/examples/」以下にあるフォルダ内のXCodeのプロジェクトファイル「.xcodeproj」を開く
‣ 例えば、graphicsExample.xcodeproj‣ プロジェクトファイルを開くと、自動的にXcodeが起動‣ ツールバーの「Run」ボタンを押す‣ プログラムがコンパイルされ、エラーが無ければそのままサンプルが実行される (はず)
サンプルを実行してみよう!!‣ 実行例：graphics example
実習：いろいろなサンプルを実行してみる‣ 同梱されているサンプルを手当たりしだい実行してみる‣ of_preRelease_v007_osx/apps/examples/‣ of_preRelease_v007_osx/apps/addonsExamples/
‣ 一体、何をしているサンプルのなのか類推してみる‣ 一番興味を持ったサンプルはなにか?
openFrameworksプログラミング、はじめの一歩
新規にプロジェクトを作成する ‣ まずは新規にプロジェクトを作成
‣ 新規にプロジェクトを作成するには、空プロジェクトをコピー‣ 空プロジェクトは、下記のものをコピーしてつかう‣ apps > examples > emptyExample
‣ 例：apps > examples > emptyExample を下記の場所に‣ apps > myApps > emptyExample
新規にプロジェクトを作成する ‣ 例えば、myAppsというフォルダを作成した場合
openFrameworksのコード構造‣ さしあたって編集するのは、testApp.hとtestApp.cpp
main.cpp
testApp.h testApp.cpp
openGL GLUT freeimage freetype
fmod rtaudio quicktime openCV
ofSimpleApp, ofGraphics, ofImage, ofTruTypeFont, ofVidePlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils
プログラムの開始
コードを書くところ
OpenFrameworksの機能
ベースとなるライブラリ群
ココ
openFrameworksのコード構造‣ testApp.cppとtestApp.h XCode内の場所
ココ
プロジェクトの中身を開いてみよう!‣ testApp.cpp を開いてみる!
2つのファイル‣ testApp.h - ヘッダファイル‣ プログラム全体で使用される部品 (変数、関数) を宣言
‣ testApp.cpp - 実装ファイル‣ 実際に何をするかを記述
重要な3つのブロック‣ とりあえず今日の段階で重要になるのは、下記の3つ処理のブロック (関数, function)
‣ setup - 準備‣ update - 更新‣ draw - 描画
‣ つまり...‣ 絵を描く準備をしたら継続的に更新しながら描画する
testApp.h では
準備
#pragma once
#include "ofMain.h"#include "ofxiPhone.h"#include "ofxiPhoneExtras.h"
class testApp : public ofxiPhoneApp {!public:! void setup();! void update();! void draw();! void exit();!! void touchDown(ofTouchEventArgs &touch);! void touchMoved(ofTouchEventArgs &touch);! void touchUp(ofTouchEventArgs &touch);! void touchDoubleTap(ofTouchEventArgs &touch);
! void lostFocus();! void gotFocus();! void gotMemoryWarning();! void deviceOrientationChanged(int newOrientation);
準備
testApp.h では
準備
#pragma once
#include "ofMain.h"#include "ofxiPhone.h"#include "ofxiPhoneExtras.h"
class testApp : public ofxiPhoneApp {!public:! void setup();! void update();! void draw();! void exit();!! void touchDown(ofTouchEventArgs &touch);! void touchMoved(ofTouchEventArgs &touch);! void touchUp(ofTouchEventArgs &touch);! void touchDoubleTap(ofTouchEventArgs &touch);
! void lostFocus();! void gotFocus();! void gotMemoryWarning();! void deviceOrientationChanged(int newOrientation);
更新
testApp.h では
準備
#pragma once
#include "ofMain.h"#include "ofxiPhone.h"#include "ofxiPhoneExtras.h"
class testApp : public ofxiPhoneApp {!public:! void setup();! void update();! void draw();! void exit();!! void touchDown(ofTouchEventArgs &touch);! void touchMoved(ofTouchEventArgs &touch);! void touchUp(ofTouchEventArgs &touch);! void touchDoubleTap(ofTouchEventArgs &touch);
! void lostFocus();! void gotFocus();! void gotMemoryWarning();! void deviceOrientationChanged(int newOrientation);
描画
testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){
}
//--------------------------------------------------------------void testApp::keyPressed(int key){
}
//--------------------------------------------------------------void testApp::keyReleased(int key){
}
//--------- 後略 ---------
準備
testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){
}
//--------------------------------------------------------------void testApp::keyPressed(int key){
}
//--------------------------------------------------------------void testApp::keyReleased(int key){
}
//--------- 後略 ---------
更新
testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){
}
//--------------------------------------------------------------void testApp::keyPressed(int key){
}
//--------------------------------------------------------------void testApp::keyReleased(int key){
}
//--------- 後略 ---------
描画
図形を描いてみる!‣ まず円を描いてみましょう‣ 何を指定したら円を描けるのか、を考える
図形を描いてみる!‣ 中心の位置 (座標 = x, y) と半径の長さがわかれば円は描ける!
図形を描いてみる!‣ openFrameworksでは、下記のように指定する
‣ ofCircle (中心のx座標, 中心のy座標, 半径の長さ);
‣ 例：‣ ofCircle (100, 200, 50);‣ 座標(100, 200) を中心に、半径50の円を描く
やってみよう!!< 前略 >
//--------------------------------------------------------------void testApp::update(){ }
//--------------------------------------------------------------void testApp::draw(){ ofCircle(512, 384, 200);}
//--------------------------------------------------------------void testApp::exit(){ }
< 後略 >
Text
やってみよう!!‣ 円が描けた!
色を塗ってみる‣ コンピュータの画面はどうなっているのか?‣ コンピュータの画面を拡大していくと...‣ 縦横に並んだ点の集合 → ピクセル (Pixel)‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
色を塗ってみる‣ 色を指定するには?‣ R(赤) G(緑) B(青)の三原色で指定する‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色
色を指定するには?‣ openFrameworks で色を指定するには?‣ ofSetColor を使用する
‣ ofSetColor (Red, Green, Blue, Alpha);
‣ それぞれの色の範囲は 0 ～ 255‣ Alphaは透明度をあらわす‣ 色を指定した以降の図形に適用される
‣ 例：‣ ofSetColor(0, 127, 255, 127);
色を指定するには?#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){ ofSetColor(0, 127, 255, 200); ofCircle(412, 384, 200); ofSetColor(255, 127, 0, 200); ofCircle(612, 384, 200);}
< 後略 >
色を指定するには?‣ 色がついた!
背景色や描画方法の初期設定‣ setup() に様々な初期設定を行う
‣ 透明度を有効に - ofEnableAlphaBlending();‣ 円を描画する精度 - ofSetCircleResolution(分割数);‣ 背景色 - ofBackground(R, G, B);
背景色や描画方法の初期設定#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){! ofEnableAlphaBlending();! ofSetCircleResolution(64);! ofBackground(0, 0, 0);}
//--------------------------------------------------------------void testApp::update(){!}
//--------------------------------------------------------------void testApp::draw(){ ofSetColor(0, 127, 255, 200); ofCircle(412, 384, 200); ofSetColor(255, 127, 0, 200); ofCircle(612, 384, 200);!}
< 後略 >
背景色や描画方法の初期設定
参考：oFの命令を調べる‣ 円以外の形を描きたくなったとき、どうやって調べる?‣ リファレンスを参考にすると良い‣ http://www.openframeworks.cc/documentation
課題：自分の名前を描く‣ openFrameworksのDocumentを参考にしながら、画面上に自分の名前を描いてみる
‣ アルファベット、漢字、ひらがな、など形式は自由‣ 色も着色してみる‣ docutmentationのgraphicsのパートが参考になるはず‣ http://www.openframeworks.cc/documentation?detail=ofGraphics
‣ いろいろ試行錯誤しながら、oFの座標系、様々な描画の方法について慣れていく!
