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