今月末のiPhoneの勉強会に備えて、昨年７月以来、久々にopenFrameworksをやろうと本を引っぱり出してきました。
まずは超基本な所からまとめていきます。
直線を書く
まず直線を引く。
12345
void testApp::draw(){ ofLine(100,200,500,900); }
|
1 2 3 4 5 |
void testApp::draw(){ ofLine(100,200,500,900); } |
ofLine()という関数を利用します。
引数は、左から＜出発点のｘ座標＞、＜出発点のｙ座標＞、＜終点のｘ座標＞、＜終点のｙ座標＞ です。
四角形、円、三角形を書く
四角形
12345
void testApp::draw(){ ofRect(100,100,200,300); }
|
1 2 3 4 5 |
void testApp::draw(){ ofRect(100,100,200,300); } |
円
|
1 2 3 4 5 6 7 |
void testApp::draw(){ ofCircle(400,400,80); ofEllipse(800,100,80,30); } |
楕円を書く際には、ofEllipse()を利用する。
三角形
|
1 2 3 4 5 |
void testApp::draw(){ ofTriangle(700,200,300,300,800,70); } |
色の設定
背景と実際に描画される絵の色を決める。
1234567
//背景ofBackground(255,255,255); //描画の色ofSetColor(124,123,124);ofCircle(200,200,80);
|
1 2 3 4 5 6 7 |
//背景 ofBackground(255,255,255); //描画の色 ofSetColor(124,123,124); ofCircle(200,200,80); |
色はRGBで指定する。
透明度を設定する
透明度を設定するために、ofEnableAlphaBlending()を使う。
後は色の設定の際に、第4引数に透明度を入力する。
|
1 2 3 |
ofEnableAlphaBlending(); ofSetColor(0,0,255,127); |
for 繰り返しを利用する
forを利用すれば、一度に複数の図形を書くことができます。
12345
int i;for(i = 1 ; i < 5 ; i++){ ofCircle(200*i ,120*i , 80); }
|
1 2 3 4 5 |
int i; for(i = 1 ; i < 5 ; i++){ ofCircle(200*i ,120*i , 80); } |
update()を利用する
update()を利用すれば、オブジェクトを動かしたりすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
#define NUM 100 float loc_x[NUM]; float loc_y[NUM]; float radius; float speedx[NUM]; float speedy[NUM]; //-------------------------------------------------------------- void testApp::setup(){ ofBackground(0 ,0 , 0); ofEnableAlphaBlending(); ofEnableSmoothing(); ofSetCircleResolution(64); radius = 20; int i; for (i=0; i< NUM; i++) { loc_x[i] = ofRandom(0, ofGetWidth()); loc_y[i] = ofRandom(0, ofGetHeight()); speedx[i] = ofRandom(0, 0.4); speedy[i] = ofRandom(0, 0.4); } } //-------------------------------------------------------------- void testApp::update(){ int i; for (i = 0;i < NUM; i++) { loc_x[i] = loc_x[i] + speedx[i]; loc_y[i] = loc_y[i] + speedy[i]; if (loc_x[i] + radius > ofGetWidth()) { speedx[i] = speedx[i] *-1; } if (loc_y[i] + radius > ofGetHeight()) { speedy[i] *= -1; } if(loc_x[i] -radius < 0){ speedx[i] *= -1; } if(loc_y[i] -radius < 0){ speedy[i] *= -1; } void testApp::draw(){ int i; ofSetColor(200,200, 29,79); for (i=0; i < NUM ; i++) { ofCircle(loc_x[i], loc_y[i], radius); } } |
インタラクティブな動きを作る
マウスやキーボードで操作することで、動作を変化させることができます。
幸いopenFrameworksにはデフォルトのテンプレートで便利な関数が既に定義されています。
マウスの場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
void testApp::mouseMoved(int x, int y ){ } void testApp::mouseDragged(int x, int y, int button){ } void testApp::mousePressed(int x, int y, int button){ } void testApp::mouseReleased(int x, int y, int button){ } |
引数のx ,y はマウスを動作した際のX座標の数字、Y座標の数字が代入されています。
bottomはよくわからにですが、int で数字は０になってました。
キーボード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
void testApp::keyPressed(int key){ if (key == 'x'){ ; // 条件で実行したいコード } else if (key == 'y'){ ; // 他の条件で実行したいコード } } void testApp::keyReleased(int key){ } |
