drawlogo.gif

haraです。

今週ももちろん時計です。

今回ご紹介する時計は、無数の線が飛散しつつ時間を表示したり、古い絵画っぽいものを表示したりする時計です。

今回は、色々合わせ技です。

イラストの座標データを取得する

まずイラストや数字に沿ってラインが引かれていますが、ご覧の通り全ての絵は枝分かれしない直線だけで構成し、lineToで引きやすいような絵にしています。

この絵はIllustratorで描いたもので、描いた後でlineToさせるために座標データを取得する必要があります。

今回、イラストの座標データ取得にはfrocessingライブラリを利用しました。

frocessingライブラリのFShapeSVGクラスはSVGファイルを解析し、Flash内で再利用できるようにする機能を持っているのですが、このクラスの解析内容からSVGデータがいかなる座標を持っているかを読み取ることができます。(あまりスマートな方法ではないかもしれませんが・・)

このクラスを用いることで、いくつもあるイラストの座標データをそれほど労せずして取得することができました。

流れるような動きをさせる

待機状態の時の線は、空気の流れのような動きをしていますが、これは見覚えのある方もいるでしょう。

パーティクル祭りの手法と同じく、PerlinNoiseを生成したBitmapDataから色の値を読み取り、速度に反映させています。

絵の方向に線を移動させる

何の話かというと、絵を描く直前、絵のモチーフに向かって動く線についてです。

ここの動きは前回の時計で使った、ミサイル的な動きをさせるTweenerの使い方で実現しています。

 ここを普通にTweenさせてしまうと、あまりに直線的で味気ない動きになってしまうのです。よりエモーショナルな演出が必要な時に、TweenerのCurveModifierは大変有効に働くことがわかります。

 

いかがでしたか?

今回はイラストを無理矢理lineToで描くというニッチな手法でしたが、frocessingライブラリにかなーり助けられました。ありがとうございました!

HTML5飯