「生える」表現

失礼、生やしすぎました。

毛や植物など、形状に対して「生えている」ような見た目にしたい時の考え方のメモです。
文字から何か生えてるとか、よく見るけどかっこいいな、どうやるのかなと思ってちょっと試してみました。
 

馬の絵から生やすとこんな感じ

馬

 

これはバイク・・毛の量多すぎて毛虫みたいですが

バイク

 

これは骸骨です。パラメータ調整に若干ミスって寝ぐせみたいになってます。

骸骨

以下、解説です。

 

考え方

1:シェイプを構成する頂点に対して何かを生成すればよい

「生える」ってずいぶん複雑そうだな、と一瞬思いましたが、単純に頂点から何か出てくる表現を
複製する、という表現ができれば目的は果たせそうです。

2:線の進む方向と直角なベクトルで生やす。左なら左、右なら右に固定で

例えば四角形に毛が生えている表現は、一筆で四角形を描いた時に、向かうベクトルに対して左側に毛が生え続ければ
四角から毛が生えているように見える。

3:発生するポイントの制御と、ポイントから発生する枝の制御の2本立てと考える。

今回は、マウスドラッグで座標を配列に追加する処理[MouseMove]
配列を巡回して、それぞれの座標について描画する処理[draw]
という2本立てにしました。

構成

大雑把にこんな感じです

メインクラス

--- 今回はFrocessingで書きます

mousePressedメソッド

addRootメソッドが走ります

mouseMovedメソッド

ドラッグ時にaddNodeメソッドが走ります

addRootメソッド

currentListIndexを更新してpointListList配列に新しい配列をつっこみます

addNodeメソッド

pointListList配列内の、インデックスがcurrentListIndexの配列に対して(pointListListは二重配列です)
LinePointインスタンスを追加します。
LinePointインスタンスは引数で受け取ったpx,pyを参照し、vx,vy,r,vectorの大きさを計算します。

drawメソッド

pointListList配列に入った座標群に対して描画処理を実行します。
基本要素は座標、速度、回転で、
ここのコードでこれらを使ってどう描画するかを設定します。
また、drawメソッドの最初にbackgraond(0,1)を入れると
毎フレームクリアして再描画、つまりアニメーション表現になり、
入れない場合は塗り重ねの静止画表現系になります

LinePointクラス

Pointクラスを拡張して、速度や回転のパラメータを追加したクラスです。

実際のプログラムはこんな感じ。自由にご利用ください。っつてもあんまり使う機会は少なそうですが・・
静止画系

Hair Draw - wonderfl build flash online

 

アニメーション系

forked from: Hair Draw(Animation) - wonderfl build flash online

HTML5飯