openFrameworks 軌跡を描く

概要

openFrameworksを使って以下のgifのように軌跡を描く方法を紹介します。

仕組み

今回紹介する方法はProcessingでも定石になっているそうな、薄い透明度をかけた画面いっぱいの長方形をフィルターとして重ねる方法です。
ただし、塗りをリセットしないようにofSetBackgroundAuto(false);を呼び出す必要があります。
また、フィルターとして使う薄い透明度をかけた画面いっぱいの長方形はOF_BLENDMODE_MULTIPLYで軌跡を描きたいものはOF_BLENDMODE_ADDで描画すると綺麗になります。(ofEnableBlendMode(OF_BLENDMODE_ALPHA);だけでも問題無いです)

軌跡とは関係無いですが、軌跡をつける対象として例えば今回はofBoxPrimitiveを使いたいので100個くらい配列として宣言しておきます。

ソースコード

ofApp.h

#pragma once

#include "ofMain.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 windowResized(int w, int h);
    void dragEvent(ofDragInfo dragInfo);
    void gotMessage(ofMessage msg);
    ofBoxPrimitive mBox[100];
};

ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetBackgroundAuto(false);
    ofBackground(0, 0, 0);
    ofSetFrameRate(60);
    ofSetVerticalSync(true);

    int boxSize = 3;
    for(int i=0; i<100;i++) {
        mBox[i].setPosition(ofRandom(-300,300),ofRandom(-300,300),ofRandom(-300,300));
        mBox[i].set(boxSize);
    }
}
//--------------------------------------------------------------
void ofApp::update(){

}

//--------------------------------------------------------------
void ofApp::draw(){
    ofSetColor(0,0,0,20);//透明度のある、黒っぽい長方形を描画

    //方法１(こっちの方が明るさの差が出て綺麗っぽい)
    ofEnableBlendMode(OF_BLENDMODE_MULTIPLY);//重なりあった色の暗い部分を強調する
    ofDrawRectangle(0,0,ofGetWidth(),ofGetHeight());
    ofEnableBlendMode(OF_BLENDMODE_ADD);//色を重ねるほど明るくなる

    //方法２(そんなに差は無いが、透明度そのままって感じ)
    /*
    ofEnableBlendMode(OF_BLENDMODE_ALPHA);//透明の表現を与えるときに使う
    ofDrawRectangle(0,0,ofGetWidth(),ofGetHeight());
     */

    ofTranslate(ofGetWidth()/2, ofGetHeight()/2);

    ofRotateY(ofGetFrameNum());
    ofSetColor(ofColor::fromHsb(ofGetFrameNum()%225,225,225),175);
    for(int i=0; i<100; i++){
        mBox[i].draw();
    }
}
//------------------------以下略--------------------------

BlendModeによる違い

gifの右上に、OF_BLENDMODE_ALPHAなのかOF_BLENDMODE_MULTIPLY&OF_BLENDMODE_ADDなのかを表示しています、違いはこんな感じです。