今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

【openFrameworks 冒険記16】アドオン ofxBox2d を使ってみる! バウンドするカラフルな円たち。

お詫び?お知らせ。

sudara-bluse.hatenablog.com

兼ねてより目標としてた笑顔検知は上手くいかんので、

来週あたりにofxFaceTrackerを使って実装してみることにしました。
しばらくはofxBox2dとofxOpenCvで遊びます。

 

今回はアドオンofxBox2dを使ってみます。

ofxBox2dってなんぞや?

ofxBox2dは、

Box2DというライブラリをopenFrameworksで使用できるよう移植したものです。

Box2Dは「物理エンジン」と呼ばれるライブラリの一つです。

物理エンジンは、重力や衝突、摩擦といった物理計算を複雑な計算をすることなく利用できるようにしたライブラリです。


以前頑張った摩擦や重力の計算などをちょっとした指示で簡単にやってくれる

ナイスなライブラリです。

sudara-bluse.hatenablog.com

 

GitHubのサンプル画像見るといろいろアーティスティック物理演算できるみたいですね。凄ぇ

f:id:sudara_bluse:20171122183442p:plain

しかし今回は残念ながらシンプルな基礎です。笑

このsampleたちは今のポンコツなわたしには難しそうだ。

 

今回のゴール : 画面上から落ちてきて跳ねかえる円達

こんな感じのをつくります!レッツゴー。

 

 

 

 

まずはofxBox2dをダウンロードしてaddonフォルダに追加

まずはGithubからアドオンをダウンロードします。

github.com

ここ注意:使ってるoFのバージョンにあわせてブランチを切り換えてdownloadしてください。 2017/11 現在。

f:id:sudara_bluse:20171122172223p:plain

私は、of_v0.9.8_osx_releaseなので、

f:id:sudara_bluse:20171122172552p:plain

 

スクショの箇所のブランチをstable(安定)に切り替えてダウンロード。

downloadしたzipファイルを解凍すると、ofxBox2d-stableというフォルダ名なので

ofxBox2dにリネーム。

of_v0.9.8_osx_release/addons/ 以下にフォルダごと格納してください!

 

プロジェクトを作成

Project Generatorを起動して、addonにofxBox2dを追加してジェネレート。

f:id:sudara_bluse:20171122173345p:plain

 

処理内容 (今回はコードとコメントみてちょという感じです。)

ofApp.h

ofxBox2d box2d; // box2dのインスタンス変数

ofxBox2dCircle circles[NUM]; // box2dの円

を宣言します。

 

ofApp.cpp

// box2dの世界を作る
box2d.init();

// y方向に9.8の重力を定義
box2d.setGravity(0, 9.8);

// 上下左右に壁を作る
box2d.createBounds();

// フレームレート設定
box2d.setFPS(30);

// 質量, 反発係数, 摩擦) を設定
circles[cnt].setPhysics(10.0,0.8,0);

// (x = ランダム、y = 0 の位置, 半系20の円)をbox2dの世界に投入。
circles[cnt].setup(box2d.getWorld(),x, y, 20);

 

コード

ofApp.h
#pragma once

#include "ofMain.h"
#include "ofxBox2d.h"

class ofApp : 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 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);

    static const int NUM = 100;
    ofxBox2d box2d; // box2dのインスタンス変数
    ofxBox2dCircle circles[NUM]; // box2dの円
    ofColor randColor[NUM];

};



ofApp.cpp
#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){

    // 背景黒に
    ofBackground(0, 0, 0);

    // box2dの世界を作る
    box2d.init();

    // y方向に9.8の重力を定義
    box2d.setGravity(0, 9.8);

    // 上下左右に壁を作る
    box2d.createBounds();

    // フレームレート設定
    box2d.setFPS(30);


    for(int cnt = 0; cnt < NUM; cnt++){

        // 引数 (質量, 反発係数, 摩擦)
        circles[cnt].setPhysics(10.0,0.8,0);

        int x = ofRandom(0, ofGetWidth());
        int y = 0;

        // (x = ランダム、y  = 0 の位置, 半系20の円)をbox2dの世界に投入。
        circles[cnt].setup(box2d.getWorld(),x, y, 20);

        // ランダムにカラフルな色セット
        randColor[cnt] = ofColor(ofRandom(255), ofRandom(255), ofRandom(255));
    }

}

//--------------------------------------------------------------
void ofApp::update(){

    // いろいろ更新
    box2d.update();

}

//--------------------------------------------------------------
void ofApp::draw(){

    // 円達をdraw
    for(int cnt = 0; cnt < NUM; cnt++){
        ofSetColor(randColor[cnt]);
        circles[cnt].draw();
    }

} 

 

以上です。

ofxOpenCvとの合わせ技で身体の輪郭で跳ね返るもやりたいとおもってます。