openframeworks基礎 動きを生みだす、アニメーション入門 -...
DESCRIPTION
TRANSCRIPT
グラフィックスプログラミング演習B第3回：openFrameworks基礎動きを生みだす、アニメーション入門
2011年10月20日東京藝術大学 芸術情報センター担当：田所淳
今日の内容‣ openFrameworksでのアニメーションの基本‣ どのようにして動きを生みだせば良いのか
‣ 構造の基本、setup()、update()、draw()
‣ 座標指定によるアニメーション‣ 直線運動
‣ 座標変換によるアニメーション‣ 移動、回転
openFrameworks プログラム構造の基本
‣ 基本構造は、setup()、update()、draw()‣ Processingの思想を踏襲している
openFrameworksの基本構造
setup( )
update( )
draw( )
openFrameworksの基本構造‣ 基本構造は、setup()、update()、draw()‣ Processingの思想を踏襲している
setup( )
update( )
draw( )
初期設定画面設定、fps設定など
openFrameworksの基本構造‣ 基本構造は、setup()、update()、draw()‣ Processingの思想を踏襲している
setup( )
update( )
draw( )
初期設定画面設定、fps設定など
更新変数へ値を代入座標の更新、座標系の変換 など
openFrameworksの基本構造‣ 基本構造は、setup()、update()、draw()‣ Processingの思想を踏襲している
setup( )
update( )
draw( )
初期設定画面設定、fps設定など
更新変数へ値を代入座標の更新、座標系の変換 など
描画更新した値を使用して図形を描画する
openFrameworksの基本構造‣ 基本構造は、setup()、update()、draw()‣ Processingの思想を踏襲している
setup( )
update( )
draw( )
初期設定画面設定、fps設定など
更新変数へ値を代入座標の更新、座標系の変換 など
描画更新した値を使用して図形を描画する
プログラム停止までくりかえし
アニメーションの基本原理‣ プログラムによるアニメーションの基本原理‣ 値をすこしずつ更新しながら、形を描く‣ 位置、大きさ、角度、色、透明度... etc.
座標の移動によるアニメーション
座標の移動によるアニメーション‣ 2次元平面の座標(x, y)を操作して動きを生みだす
‣ openFrameworksで座標を扱うに際のTips‣ x, yの値を別個の変数にするのではなく、まとめて扱う
‣ ofVec2f というクラスが便利‣ position.x, position.y というように1つの変数でx, y座標の両方を格納できる
‣ 2点間の距離、2点間を結んだ角度などをすぐに計算できる命令(クラス関数、メソッド)も
座標の移動によるアニメーション‣ testApp.h
#pragma once
#include "ofMain.h"
class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();!! ofVec2f pos; //位置を記録するための変数(正確にはオブジェクト)};
座標の移動によるアニメーション‣ testApp.h
#pragma once
#include "ofMain.h"
class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();!! ofVec2f pos; //位置を記録するための変数(正確にはオブジェクト)};
setup, update, draw で共通して使用する値はヘッダーファイルに記入する
座標の移動によるアニメーション‣ testApp.cpp#include "testApp.h"
void testApp::setup(){! ofSetFrameRate(60);! //更新を秒間60コマに(fps)! ofBackgroundHex(0x000000); //背景色を黒に! //初期位置を画面の中心に! pos.x = ofGetWidth()/2;! pos.y = ofGetHeight()/2;}
void testApp::update(){! //位置を更新する! pos.x += 4.0; //pos.x = pos.x + 3.0 と同じ意味! pos.y += 3.0; //pos.y = pos.y + 4.0 と同じ意味}
void testApp::draw(){! ofSetHexColor(0x3399ff); //描画する色を指定! ofCircle(pos.x, pos.y, 20);! //更新された値を利用して円を描く}
座標の移動によるアニメーション‣ testApp.cpp#include "testApp.h"
void testApp::setup(){! ofSetFrameRate(60);! //更新を秒間60コマに(fps)! ofBackgroundHex(0x000000); //背景色を黒に! //初期位置を画面の中心に! pos.x = ofGetWidth()/2;! pos.y = ofGetHeight()/2;}
void testApp::update(){! //位置を更新する! pos.x += 4.0; //pos.x = pos.x + 3.0 と同じ意味! pos.y += 3.0; //pos.y = pos.y + 4.0 と同じ意味}
void testApp::draw(){! ofSetHexColor(0x3399ff); //描画する色を指定! ofCircle(pos.x, pos.y, 20);! //更新された値を利用して円を描く}
初期設定
座標の更新
描画
座標の移動によるアニメーション‣ 画面の右下へ移動していく
座標の移動によるアニメーション‣ 画面の端にきたら、反対側から出現するようにしてみる‣ openFrameworks の画面は以下の範囲
0 ofGetWidth()
ofGetHeight()
座標の移動によるアニメーション‣ 「画面からはみ出たら」という条件を詳細に記述する
‣ 画面の右からはみ出たら、左端に移動‣ → もしx座標がofGetWidthより大きくなったら、0へ
‣ 画面の左からはみ出たら、右端に移動‣ → もしx座標が0より小さくなったら、ofGetWidthへ
‣ 画面の下からはみ出たら、上端に移動‣ → もしx座標がofGetHeightより大きくなったら、0へ
‣ 画面の上からはみ出たら、下端に移動‣ → もしx座標が0より小さくなったら、ofGetHeightへ
座標の移動によるアニメーション‣ 条件分岐の命令 if文
‣ もし《条件》なら《命令》をせよ
if (《条件》) { 《命令》}
座標の移動によるアニメーション‣ 先程の4つの条件をupdateに加える
if (pos.x > ofGetWidth()) {pos.x = 0;} //右if (pos.x < 0) {pos.x = ofGetWidth();} //左if (pos.y > ofGetHeight()) {pos.y = 0;} //下if (pos.y < 0) {pos.y = ofGetHeight();} //上
座標の移動によるアニメーション‣ testApp.cpp#include "testApp.h"
void testApp::setup(){! ofSetFrameRate(60);! ofBackgroundHex(0x000000);! pos.x = ofGetWidth()/2;! pos.y = ofGetHeight()/2;}
void testApp::update(){! pos.x += 4.0;! pos.y += 3.0;! if (pos.x > ofGetWidth()) {pos.x = 0;} //右! if (pos.x < 0) {pos.x = ofGetWidth();} //左! if (pos.y > ofGetHeight()) {pos.y = 0;} //下! if (pos.y < 0) {pos.y = ofGetHeight();} //上}
void testApp::draw(){! ofSetHexColor(0x3399ff);! ofCircle(pos.x, pos.y, 20);}
座標の移動によるアニメーション‣ 画面からはみ出さなくなっているはず
座標系の変換によるアニメーション
座標系の変換によるアニメーション‣ 移動する物体の位置はそのままで、プログラムの座標の基準自体を変化させてアニメーションすることも可能
‣ 座標の原点を移動する‣ 座標軸を回転する
座標系の変換によるアニメーション‣ 座標系の原点の移動：ofTranslate(x, y)‣ 座標系の原点(0, 0)の位置を、指定した場所に移動する
(0, 0)
座標系の変換によるアニメーション‣ 座標系の回転：ofRotateZ(degree)‣ 座標系の原点(0, 0)の位置を中心に回転
(0, 0)
座標系の変換によるアニメーション‣ 一度変換した座標系を、また元に戻すことも可能
‣ ofPushMatrix() : 移動する前に現状の座標系を記録‣ ofPopMatrix() : 記録した座標系の状態に戻す
座標系の変換によるアニメーション‣ では実際に座標系の変換によるアニメーションを試しましょう
‣ 座標の移動(ofTranslate)で、画面の中央を原点して‣ 座標を回転(ofRotateZ)して、物体を回転させてみる‣ 原点を中心に、四角形を描く
座標系の変換によるアニメーション‣ testApp.h
#pragma once
#include "ofMain.h"
class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();!! float angle; //角度を記録するための変数};
座標系の変換によるアニメーション‣ testApp.cpp#include "testApp.h"
void testApp::setup(){! ofSetFrameRate(60);! //更新を秒間60コマに(fps)! ofBackgroundHex(0x000000); //背景色を黒に! //矩形を描く際の原点を中心に! ofSetRectMode(OF_RECTMODE_CENTER);}
void testApp::update(){! angle += 10; //角度の更新}
void testApp::draw(){! //座標の原点を画面の中心位置に! ofTranslate(ofGetWidth()/2, ofGetHeight()/2);! ofRotateZ(angle); //座標の回転! //四角形を描画! ofSetHexColor(0x3399ff);! ofRect(0, 0, 200, 200);}
座標系の変換によるアニメーション‣ 画面中心で回転する四角形
座標系の変換によるアニメーション‣ もう少し複雑な形態を回転させてみる
‣ 画面の中心から、すこし座標をずらして3つの円を描く‣ 120°ずつ回転させながら描けばよい‣ この形全体を回転するアニメーションを作る‣ 座標の保存と復元 (ofPushMatrix、ofPopMatrix) を使用
座標系の変換によるアニメーション‣ testApp.h
#pragma once
#include "ofMain.h"
class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();!! float angle; //角度を記録するための変数};
座標系の変換によるアニメーション‣ testApp.cpp (1 of 2)#include "testApp.h"
void testApp::setup(){! ofSetFrameRate(60);! //更新を秒間60コマに(fps)! ofSetVerticalSync(true); //ちらつき防止! ofBackgroundHex(0x000000); //背景色を黒に! ofEnableBlendMode(OF_BLENDMODE_ADD);//色を加算で混ぜる}
void testApp::update(){! angle += 10; //角度の更新}
座標系の変換によるアニメーション‣ testApp.cpp (2 of 2)void testApp::draw(){! //座標の原点を画面の中心位置に! ofTranslate(ofGetWidth()/2, ofGetHeight()/2);! ofRotateZ(angle); //座標全体を回転
! ofPushMatrix(); //座標系の保存!! //円1! ofSetHexColor(0xff0000);! ofCircle(80, 0, 100);! ofRotateZ(120); //回転! //円2! ofSetHexColor(0x00ff00);! ofCircle(80, 0, 100);! ofRotateZ(120); //回転! //円3! ofSetHexColor(0x0000ff);! ofCircle(80, 0, 100);!! ofPopMatrix(); //座標系の復元}
座標系の変換によるアニメーション‣ 高速回転する3つの円
座標系の変換によるアニメーション‣ このプログラムにちょっとしたインタラクションを加えてみましょう
‣ マウスのx座標(mouseX)で、円の中心からの距離と円の半径を変更
‣ マウスのy座標(mouseY)で、回転速度を変更
座標系の変換によるアニメーション‣ testApp.cpp (1 of 2)#include "testApp.h"
void testApp::setup(){! ofSetFrameRate(60);! //更新を秒間60コマに(fps)! ofSetVerticalSync(true); //ちらつき防止! ofBackgroundHex(0x000000); //背景色を黒に! ofEnableBlendMode(OF_BLENDMODE_ADD);//色を加算で混ぜる! ofSetCircleResolution(64); //円の描画の精度}
void testApp::update(){! angle += mouseY / 4.0; //マウスのY座標で回転速度変更}
座標系の変換によるアニメーション‣ testApp.cpp (2 of 2)void testApp::draw(){! //座標の原点を画面の中心位置に! ofTranslate(ofGetWidth()/2, ofGetHeight()/2);! ofRotateZ(angle); //座標全体を回転
! ofPushMatrix(); //座標系の保存!! //円1! ofSetHexColor(0xff0000);! ofCircle(mouseX / 3.0, 0, 300 - mouseX / 6.0);! ofRotateZ(120); //回転! //円2! ofSetHexColor(0x00ff00);! ofCircle(mouseX / 3.0, 0, 300 - mouseX / 6.0);! ofRotateZ(120); //回転! //円3! ofSetHexColor(0x0000ff);! ofCircle(mouseX / 3.0, 0, 300 - mouseX / 6.0);!! ofPopMatrix(); //座標系の復元}
座標系の変換によるアニメーション‣ 回転スピードと、大きさがインタラクティブに変化
座標系の変換によるアニメーション‣ openFrameworksの描画は、OpenGLというライブラリを使用している
‣ OpenGL : Mac OSX, Windows, Linux (UNIX) などで使用できる3DグラフィックのためのAPI
座標系の変換によるアニメーション‣ いままで描いてきたアニメーションも実は3D‣ では、x軸もしくはy軸を回転軸にして回転するとどうなるか?‣ 実験してみる!!
座標系の変換によるアニメーション‣ draw() 関数に1行追加void testApp::draw(){! //座標の原点を画面の中心位置に! ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
! ofRotateX(mouseY);! ofRotateZ(angle);
! ofPushMatrix();
! ofSetHexColor(0xff0000);! ofCircle(mouseX / 3.0, 0, 300 - mouseX / 6.0);! ofRotateZ(120);! ofSetHexColor(0x00ff00);! ofCircle(mouseX / 3.0, 0, 300 - mouseX / 6.0);! ofRotateZ(120);! ofSetHexColor(0x0000ff);! ofCircle(mouseX / 3.0, 0, 300 - mouseX / 6.0);!! ofPopMatrix();}
追加
座標系の変換によるアニメーション‣ 3D空間上でのアニメーションに!!
今日のまとめ‣ フレーム毎の差分が、動きを生みだす‣ openFrameworksの構造、setup, update, draw
‣ 座標の更新によるアニメーション‣ 座標系の更新によるアニメーション
‣ 3D空間への拡張
‣ 来週は、関数を使用した、よりアルゴリズミックな動きに挑戦していく予定です!