##概要
satoruhigaさんが作られたopenFrameworksのAddon ofxPDFの(私が個人的に)便利だなあと思った使い方について紹介します。
ここで適当なpathだけの状態のpdfがあればいいのですが、ない場合Illustratorで作成する方法を、この記事の最後に載せておくのでそちらを参照してください。以降、そのようなpdfがあることを前提に紹介します。
またここで解説するサンプルプロジェクトはgithubで公開しています。
https://github.com/Hiroki11x/openFrameworksSample/tree/master/ofxPDF_Sample
##下整備
まずはじめに、ofxPDFのaddonをof_0.9.~/addons/内に用意します。
https://github.com/satoruhiga/ofxPDF
そのaddonを追加したプロジェクトを作ります。(既存のプロジェクトに追加でも大丈夫です)
##ofxPDFのみを使ったサンプルの作成
ofApp.hにofxPDFをincludeし、メンバ変数も宣言しておきます。
#pragma once
#include "ofMain.h"
#include "ofxPDF.h"
class ofApp : public ofBaseApp{
private:
ofxPDF mPDF;
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);
};
次に、ofApp.cpp内に、pdfのロード、描画命令を記述します。
#include "ofApp.h"
//--------------------------------------------------------------
void ofApp::setup(){
mPDF.load("sample.pdf");
}
//--------------------------------------------------------------
void ofApp::update(){
}
//--------------------------------------------------------------
void ofApp::draw(){
mPDF.draw();
}
ここで記述したものはaddon内のsampleと同じものです。
実行結果は以下のとおり
次に、このPDFのpathをofPathを用いて書く方法を紹介します。ofPathで書くことにより、線の太さ色、さらにはアニメーションなど様々なことができるようになります。
##ofPathを用いた拡張
ofApp.hにofPath型のメンバ変数を新たに宣言しておきます。
#pragma once
#include "ofMain.h"
#include "ofxPDF.h"
class ofApp : public ofBaseApp{
private:
ofxPDF mPDF;
ofPath mPath;
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);
};
次に、ofApp.cpp内に、pdfからpathのロード、pathの描画命令を記述します。
#include "ofApp.h"
//--------------------------------------------------------------
void ofApp::setup(){
mPDF.load("sample.pdf");
mPath.setFilled(false);
mPath.setStrokeWidth(5);
mPath.setStrokeHexColor(0x0022ff);
for (int i = 0; i < mPDF.getNumPath(); i++){
ofPath& path = mPDF.getPathAt(i);
mPath.append(path);
}
mPath.close();
}
//--------------------------------------------------------------
void ofApp::update(){
}
//--------------------------------------------------------------
void ofApp::draw(){
mPath.draw();
}
これで実行すると以下のようになります
##ofPolylineを用いたアニメーション
次に先ほどのPDFをアニメーションさせて描画させます。
まずはofApp.hにofPolyline型のvectorを宣言します。また、pathのアニメーションを描画する関数drawAnimation()も宣言します。
#pragma once
#include "ofMain.h"
#include "ofxPDF.h"
class ofApp : public ofBaseApp{
private:
ofxPDF mPDF;
// ofPath mPath; //<-今回は使わない
vector<ofPolyline> polys;
public:
void setup();
void update();
void draw();
void drawAnimation();
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);
};
ofApp.cppにsetupでのPolylineへのpathのpush_back、また関数drawAnimation()の宣言を以下のようにしました。
#include "ofApp.h"
//--------------------------------------------------------------
void ofApp::setup(){
mPDF.load("sample.pdf");
/* ofPathは今回使わない
mPath.setFilled(false);
mPath.setStrokeWidth(15);
mPath.setStrokeHexColor(0x0022ff);
for (int i = 0; i < mPDF.getNumPath(); i++){
ofPath& path = mPDF.getPathAt(i);
mPath.append(path);
}
mPath.close();
*/
// PDFのパスを順番に取り出し、細かく分けたやつをpolysにpush_backしていく
for (int i = 0; i < mPDF.getNumPath(); i++){
ofPath& path = mPDF.getPathAt(i);
const vector<ofPolyline > &tmpPoly = path.getOutline();
for (int k = 0; k < tmpPoly.size(); k++){
polys.push_back(tmpPoly[k]);
}
}
}
//--------------------------------------------------------------
void ofApp::update(){
}
//--------------------------------------------------------------
void ofApp::draw(){
// mPath.draw();
drawAnimation();
}
//--------------------------------------------------------------
void ofApp::drawAnimation(){
ofPolyline tmpPoly;
float animation_time = fmodf(ofGetElapsedTimef(), 1) * 4;
for (int k = 0; k < polys.size(); k++){
tmpPoly = polys.at(k).getResampledByCount(100);
int target_size = polys.size() * animation_time;
tmpPoly.resize(target_size);
tmpPoly.draw();
}
}
これを実行すると、次のようになります。
##応用例
他にも、このパスの座標を用いてparticleのアニメーションが作れたり、そのpath上をオブジェクトが動いたりします、例えば以下のようなのもofxPDFを用いて作りました。
ofxPDFの紹介は以上です、以降Illustratorでpathだけのpdfを作成する方法を紹介します。
##Illustratorでのpathだけのpdfの作成方法
以下の5stepで出来ます！簡単です！
###01
Illustratorを開き新規作成
###02
適当な描画したいものを作る
###03
アウトライン化できるものはアウトライン化(文字とか)
###04
図形などの最初からpathのオブジェクトは塗りをなくす
###05
最後にPDFで書き出しを選択
以上となります。