概要
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);//透明度のある、黒っぽい長方形を描画
//方法1(こっちの方が明るさの差が出て綺麗っぽい)
ofEnableBlendMode(OF_BLENDMODE_MULTIPLY);//重なりあった色の暗い部分を強調する
ofDrawRectangle(0,0,ofGetWidth(),ofGetHeight());
ofEnableBlendMode(OF_BLENDMODE_ADD);//色を重ねるほど明るくなる
//方法2(そんなに差は無いが、透明度そのままって感じ)
/*
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
なのかを表示しています、違いはこんな感じです。