More Related Content
Similar to メディア・アート II 第1回: ガイダンス openFrameworks入門
Similar to メディア・アート II 第1回: ガイダンス openFrameworks入門 (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (17)
メディア・アート II 第1回: ガイダンス openFrameworks入門
- 14. openFrameworks とは?
OpenGL GLUT FreeImage FreeType
fmod RtAudio QuickTime OpenCV
main.cpp
testApp.h testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
- 15. openFrameworks とは?
OpenGL GLUT FreeImage FreeType
fmod RtAudio QuickTime OpenCV
main.cpp
testApp.h testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
実際に編集する部分
- 16. openFrameworks とは?
OpenGL GLUT FreeImage FreeType
fmod RtAudio QuickTime OpenCV
main.cpp
testApp.h testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
実際に編集する部分
openFrameworksの様々な機能
- 17. openFrameworks とは?
OpenGL GLUT FreeImage FreeType
fmod RtAudio QuickTime OpenCV
main.cpp
testApp.h testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
実際に編集する部分
openFrameworksの様々な機能
既存のフリーなライブラリ群
- 18. openFrameworks とは?
OpenGL GLUT FreeImage FreeType
fmod RtAudio QuickTime OpenCV
main.cpp
testApp.h testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
プログラム開発のための
糊 (Glue)
- 29. サンプルを実行してみよう!!
‣ サンプルの内容 1 of 2
‣ 3d - 3次元表現いろいろ
‣ addons - 拡張機能のサンプル
‣ communication - 外部デバイスとの通信(シリアル通信)
‣ empty - 制作のテンプレートとなる「空」サンプル
‣ events - イベント(プログラムへの外部からのアクション)処理
‣ gl - OpenGLの活用(Shader、VBO、カメラなど)
- 30. サンプルを実行してみよう!!
‣ サンプルの内容 2 of 2
‣ graphics - グラフィクスプログラミング
‣ math - 数式による表現、ノイズ、周期など
‣ sound - 音響生成、サウンドファイルの再生
‣ utils - 補助的な機能の例
‣ video - 動画の再生、カメラからの入力
- 47. openFrameworksのコード構造
‣ さしあたって編集するのは、testApp.hとtestApp.cpp
OpenGL GLUT FreeImage FreeType
fmod RtAudio QuickTime OpenCV
main.cpp
testApp.h testApp.cpp
ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont,
ofVideoPlayer, ofVideoGrabber, ofTexture,
ofSoundPlayer, ofSoundStream, ofSerial, ofMath,
ofUtils ...etc.
ココ
- 55. 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);
準備
- 56. 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);
更新
- 57. 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);
描画
- 58. testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){
}
//--------------------------------------------------------------
void testApp::update(){
}
//--------------------------------------------------------------
void testApp::draw(){
}
//--------------------------------------------------------------
void testApp::keyPressed(int key){
}
//--------------------------------------------------------------
void testApp::keyReleased(int key){
}
//--------- 後略 ---------
準備
- 59. testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){
}
//--------------------------------------------------------------
void testApp::update(){
}
//--------------------------------------------------------------
void testApp::draw(){
}
//--------------------------------------------------------------
void testApp::keyPressed(int key){
}
//--------------------------------------------------------------
void testApp::keyReleased(int key){
}
//--------- 後略 ---------
更新
- 60. testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){
}
//--------------------------------------------------------------
void testApp::update(){
}
//--------------------------------------------------------------
void testApp::draw(){
}
//--------------------------------------------------------------
void testApp::keyPressed(int key){
}
//--------------------------------------------------------------
void testApp::keyReleased(int key){
}
//--------- 後略 ---------
描画
- 71. 色を指定するには?
‣ openFrameworks で色を指定するには?
‣ ofSetColor を使用する
‣ ofSetColor (Red, Green, Blue, Alpha);
‣ それぞれの色の範囲は 0 ∼ 255
‣ Alphaは透明度をあらわす
‣ 色を指定した以降の図形に適用される
‣ 例:
‣ ofSetColor(0, 127, 255, 127);
- 72. 色を指定するには?
#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);
}
< 後略 >
- 75. 背景色や描画方法の初期設定
#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, 150);
ofSetColor(255, 127, 0, 200);
ofCircle(612, 384, 150);!
}
< 後略 >
- 80. ‣ データ型 - 値の種類
‣ よく用いられるデータ型
‣ int:整数 (-1, 0, 1, 2, 3....)
‣ float:少数 (-0.01, 3.14, 21.314)
‣ bool:ブール値、真か偽か、(true, false)
‣ char:1文字分のデータ(a, b, c, d...)
‣ string:文字列 Hello World!
変数
int float char
- 83. #pragma once
#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);
! void dragEvent(ofDragInfo dragInfo);
! void gotMessage(ofMessage msg);
!
! int rotation;
};
図形を動かしてみよう!
‣ testApp.h を編集
追加
- 86. //--------------------------------------------------------------
void testApp::update(){
! rotation = rotation + 5;
}
//--------------------------------------------------------------
void testApp::draw(){
!
! ofRotateZ(rotation);
!
! ofSetColor(0, 127, 255, 200);
! ofCircle(412, 384, 150);
! ofSetColor(255, 127, 0, 200);
! ofCircle(612, 384, 150);
!
}
図形を動かしてみよう!
‣ testApp.cpp を編集
追加
追加
- 91. //--------------------------------------------------------------
void testApp::draw(){
! ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
! ofRotateZ(rotation);
!
! ofSetColor(0, 127, 255, 200);
! ofCircle(-100, 0, 150);
! ofSetColor(255, 127, 0, 200);
! ofCircle(100, 0, 150);
!
}
図形を動かしてみよう!
‣ testApp.cpp を編集
追加
変更
変更
- 94. //--------------------------------------------------------------
void testApp::update(){
! rotation = rotation + mouseX / 4.0;
}
//--------------------------------------------------------------
void testApp::draw(){
! ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
! ofRotateZ(rotation);
!
! ofSetColor(0, 127, 255, 200);
! ofCircle(-100, 0, mouseY / 2.0);
! ofSetColor(255, 127, 0, 200);
! ofCircle(100, 0, mouseY / 2.0);
!
}
図形を動かしてみよう!
‣ testApp.cpp を編集
変更
変更
変更
- 97. コードをつかった作品リサーチ
‣ コード (= プログラム) を使用した作品を調査して、自分が一番
良いと思った作品をひとつピックアップする
‣ その作品を再現するとしたら、何が必要か考える
‣ ソフトウェアの技術 (ライブラリ、フレームワーク)
‣ ハードウェア
‣ その他…
‣ 来週、各自簡単に発表してもらいます
- 98. コードをつかった作品リサーチ
‣ 参考サイト
‣ CreativeApplications
‣ http://www.creativeapplications.net/
‣ information aesthetics
‣ http://infosthetics.com/
‣ Create Digital Motion
‣ http://createdigitalmotion.com/
‣ Co.Create ¦ creativity + culture + commerce
‣ http://www.fastcocreate.com/