lisz-works

技術と興味の集合体

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

【スポンサーリンク】

openFrameworks

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

今回は

  1. ウィンドウの設定、
  2. 円の描画
  3. 描画設定

についてです。

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

www.lisz-works.com

ライフサイクル

こんな感じ。

ライフサイクル

プロジェクト作成時に、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つ

  1. setup()
  2. update()
  3. draw()

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

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

という感じのようです。

setup()

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

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

が、参考ページでは

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

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

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);
}

このようにコーディングしてしまうと

片方だけ枠線の失敗例

このように両方の図形が輪郭線になってしまいます。

アプリ側としては、ofNoFill()で「輪郭線にしてね!」と設定し、2個めの図形を描きます。

しかしその設定のまま、次のライフサイクルが来てしまいます。

そのため以降、1個めの図形も輪郭線となってしまいます。

参考

コチラを参考にしました!ありがとうございました!

www.ei.tohoku.ac.jp

あとがき

openFrameworksで図形描画するための基礎についてでした!

「単純な図形を描画する」くらいなら、結構簡単に作れますね!

これ以外にも色々APIがあると思いますが、それらを応用して、どんなものが作れるか!?って感じですね。

やってて楽しいので徐々に勧めていこうと思いますー。

皆様も試してみてはいかがでしょうか??

前回のセットアップ記事はコチラ。

www.lisz-works.com