Edited at

openFrameworks、初心者脱出の鍵は、ofPolylineにアリ?

More than 3 years have passed since last update.

アクアリング鶴舞ラボラトリー、エンジニアのタイジマンです。

クリエイティブコーディング勉強会in名古屋で発表した際のまとめになります。


概要

今年の四月に入社した新人の教育係を現在やっています。

openFrameworksでの制作を教えているのですが、ノイズ関数だとか、セルオートマトンだとかは、本に載っているので、そんなもんあるんやなとなるんですが、どうもそこをグリグリして止まってしまったり・・・。

まぁそういう時は、その過程で使用したクラスのメソッドを調べて、いろいろあぁでもないこうでもないするのが一番なので、ofPolylineあたりでもいじくり倒してやりますかという話です。


ここらへんで使用されています

クラス名からもofPolylineって線を書く以外想像つかないのですが、例えば、以下を実行する時に内部的に使用しています。

ofTrueTypeFont フォントの表示

ofxSVG SVGの表示


ドキュメントを読んでみよう

oFのサイトから、ドキュメントを見てみることにします。

documentation:ofPolyline

結構、おもしろいのは以下のメソッドでしょうか。

getNormalAtIndex - 法線の取得

getResampledCount - 指定数分均等に配置しなおしたofPolylineの取得

getResampledSpacing - 指定距離分均等に配置しなおしたofPolylineの取得

getSmoothed - 指定量分のスムージング


テストアプリの作成

各メソッドを使用するとどうなるか、アプリを作成してみます。

スクリーンショット 2015-07-31 13.12.56.png

まず、フォントとSVGが表示されています。

上から、そのまま表示。

以降は、ofPolylineの各頂点と法線を表示し、

そのまま、spacingを設定したもの、countを設定したもの、smoothedを設定したもの、spacingとsmoothedを設定したもの、countとsmoothedを設定したものになります。

単純にsmoothedを設定すると形が派手に崩れてしまうのですが、spacingなら少なめに、countなら多めに設定し、smoothedを設定すると元のデータの形がわかりつつも、いいかんじに柔かい表現ができるのがわかるかと思います。

※ただSVGはパスを設定するときに、時計周りか反時計周りをちゃんと意識しないと、上図のように、意図と反する方向に法線が出るときがあるようです。


発展させよう

ということで、この結果をもとに新しい表現を探ってみます

スクリーンショット 2015-07-31 13.34.00.png

入力された文字をもとに、スムージングの量を変えたものを何個も表示させています。このスムージングの量をノイズで変更することで、いきものっぽい表現ができます。

スクリーンショット 2015-07-29 17.30.28.png

読み込んだSVGの各矩形をひとつづつ表示させています。countを同じ量設定することで、沖縄が鹿児島にすこしづつ形を変えていくというようなモーフィング加工ができるようになります。

真ん中に表示された点は、getCentroid2Dで取得した中点になります。


最後に

ソースはgitにあげておきましたので、参考にしてください。

https://github.com/aquaring/polylineStudy

svgとフォントは、/bin/data以下に用意する必要があります。

ロゴタイプのSVGとか読み込ませると今風ですね。

3Dだと、ofMeshあたりがいじくりがいのあるクラスでしょうか。