位置・速度ベクトルを使ってパーティクルを動かす

demo

円の位置と座標をベクトルで定義して動かします。ベクトルを使わないときよりも、記述が簡単になります。

・参考

メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション from Atsushi Tadokoro

code

ofApp.h

static const int CIRCLE_NUM = 300;

「#define」を使わないのは型を指定した方が厳密だからです。staticをつけているのはヘッダファイルに変数を書くと、グローバルになるので、名前の重複を防ぐためです。
サービス終了のお知らせ

//位置ベクトル
ofVec2f position[CIRCLE_NUM];
//速度ベクトル
ofVec2f velocity[CIRCLE_NUM];

ofVec2fクラスを使用して、位置ベクトル、速度ベクトルの配列を定義します。

setup

void ofApp::setup(){
    //基本設定
    ofSetFrameRate(60);
    ofBackground(0xecf0f1);
    ofSetCircleResolution(32);
    
    //円の位置
    for(int i = 0;i < CIRCLE_NUM;i++){
        position[i].x = ofRandom(ofGetWidth());
        position[i].y = ofRandom(ofGetHeight());
        velocity[i].x = ofRandom(-10, 10);
        velocity[i].y = ofRandom(-10, 10);
    }
}

ベクトルを使う利点はX,Y座標を配列の各要素が保持していることで、記述が簡単になることにあります。

update

void ofApp::update(){
    //円の座標を更新
    for(int i = 0;i < CIRCLE_NUM;i++){
        position[i] += velocity[i];
        
        //画面の外枠
        if(position[i].x < 0 || position[i].x > ofGetWidth()){
            velocity[i].x *= -1;
        }
        
        if(position[i].y < 0 || position[i].y > ofGetHeight()){
            velocity[i].y *= -1;
        }
    }
}

「position[i] += velocity[i];」でX,Yの座標に各方向の速度ベクトルを足すことができます。簡単に記述できますね。

画面の外枠を定義して、跳ね返りを表現しています。厳密に言えば、円の中心が円の座標となるので、半径を考慮して、跳ね返りの条件を決めなければなりません。しかしめんどくさいので省略しています笑。

draw

void ofApp::draw(){
    ofSetHexColor(0x3498db);
    
    //ランダムな位置に円を描画
    for(int i = 0;i < CIRCLE_NUM;i++){
        ofCircle(position[i], 20);
    }
}

ofCircleに位置と半径を定義して、円を描画します。