Help us understand the problem. What is going on with this article?

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

More than 5 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あたりがいじくりがいのあるクラスでしょうか。

tai_fukaya
元アクアリング鶴舞ラボ
groove-x
世界のどこにもない、心を満たすロボットを。私たちGROOVE Xは2015年に設立したスタートアップです。私たちの考えるロボットは、人々の生活に潤いを与える存在として、人が一緒にいたくなるような新世代の家庭用ロボットです。便利さや機能性ではなく、家族や伴侶として愛される存在になれるかどうか。 GROOVE Xが追求するのはあなたの感性の領域に訴えるロボットです。
https://groove-x.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした