openFrameworksで図形描画するための基礎

openFrameworks

openFrameworksでの基礎的な処理についてです！

今回は

ウィンドウの設定、
円の描画
描画設定

についてです。

前回行った、セットアップについてはコチラ。

www.lisz-works.com

ライフサイクル
setup()
図形の描画
円のカクカクをなめらかにする
図形を塗りつぶし/輪郭線を切り替える
参考
あとがき

ライフサイクル

こんな感じ。

ライフサイクル

プロジェクト作成時に、ofApp.cpp/ofApp.hが作られるが、それを見ると

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 mouseEntered(int x, int y);
void mouseExited(int x, int y);
void windowResized(int w, int h);
void dragEvent(ofDragInfo dragInfo);
void gotMessage(ofMessage msg);

こんな感じで、関数を分けてテンプレートが作られている。

この上部3つ

setup()
update()
draw()

が、最初と定常で呼ばれるもの。

それ以外が、イベント実行時に呼ばれるもの。

という感じのようです。

setup()

setup()には、まさしくセットアップ、初期化処理を書きます。

なにも変更せずに実行しても、グレーの画面が出るので実行できなくはないよう。

が、参考ページでは

ウィンドウサイズの変更
フレームレートの設定
背景色の設定

を行っていました。
こんな感じ。

void ofApp::setup(){
    // 背景色グレー
    ofSetBackgroundColor(40, 40, 40);
    // 600x400 30 frames/sec のウィンドウ
    ofSetWindowShape(600, 400);
    ofSetFrameRate(30);
}

ウィンドウ設定

ofSetBackgroundColor()は、引数がそれぞれRGBの10進数を設定すれば良いようです。
サンプルは白でしたが、グレーにしてみました。

ofSetWindowShape()とofSetFrameRate()で、ウィンドウサイズとフレームレートが設定できます。

ウィンドウサイズは、X,Yで設定します。

なので例えばXを100とかにすると、ウィンドウの横幅が小さくなります。
(こんなサイズでは設定しないとは思いますが)

ウィンドウサイズ設定

図形の描画

参考ページ通り、赤い円を生成します。

void ofApp::draw(){
    ofSetColor(215, 19, 69);
    ofDrawCircle(300, 200, 120);        // 円の描画(中心X, 中心Y, 半径r)
}

実行するとこんな感じ。

円の描画

ちゃんと円が描かれましたね！

円のカクカクをなめらかにする

円を描画してみたものの、なんだかカクカクしていますよね？

これは円を正20角形で表現しているからだそうです。

この多角形の「角の数」を設定するには

ofSetCircleResolution()

で設定します。

例えばこのように設定した場合

void ofApp::draw(){
    static int r = 200;

    ofSetColor(215, 19, 69);
    ofNoFill(); // 輪郭線図形に設定
    
    // 左上
    ofSetCircleResolution(20);
    ofDrawCircle(0, 0, r);

    // 右上
    ofSetCircleResolution(32);
    ofDrawCircle(600, 0, r);

    // 左下
    ofSetCircleResolution(64);
    ofDrawCircle(0, 400, r);

    // 右下
    ofSetCircleResolution(128);
    ofDrawCircle(600, 400, r);
}

こんな感じのカクカク具合になります。

円のカクカク

図形を塗りつぶし/輪郭線を切り替える

塗りつぶし図形と輪郭線図形の切り替えは

ofFill() : 以降の図形を塗りつぶしにする
ofNoFill() : 以降の図形を輪郭線にする

で行います。

こんな感じで書くと

void ofApp::draw(){
    ofSetColor(215, 19, 69);
    
    ofFill();   // 塗りつぶし図形に設定
    ofDrawCircle(100, 100, 60);     // 円の描画(中心X, 中心Y, 半径r)

    ofNoFill(); // 輪郭線図形に設定
    ofDrawCircle(300, 100, 60);
}

このように描画されます。

塗りつぶし有無

ライフサイクルを見ると分かりますが、このウィンドウの処理は、draw()とupdate()をひたすらにループしています。

なので

「2個めの図形を枠線にしたいな！」

と思い、

void ofApp::draw(){
    ofSetColor(215, 19, 69);
    
    ofDrawCircle(100, 100, 60);     // 円の描画(中心X, 中心Y, 半径r)

    ofNoFill(); // 輪郭線図形に設定
    ofDrawCircle(300, 100, 60);
}