【flash時計】線で描く時計 | _level0 - KAYAC Front Engineer Blog

haraです。 今週ももちろん時計です。 今回ご紹介する時計は、無数の線が飛散しつつ時間を表示したり、古い絵画っぽいものを表示したりする時計です。 今回は、色々合わせ技です。 イラストの座標データを取得する まずイラストや数字に沿ってラインが引かれていますが、ご覧の通り全ての絵は枝分かれしない直線だけで構成し、lineToで引きやすいような絵にしています。 この絵はIllustratorで描いたもので、描いた後でlineToさせるために座標データを取得する必要があります。 今回、イラストの座標データ取得にはfrocessingライブラリを利用しました。 frocessingライブラリのFShapeSVGクラスはSVGファイルを解析し、Flash内で再利用できるようにする機能を持っているのですが、このクラスの解析内容からSVGデータがいかなる座標を持っているかを読み取ることができます。（あま

[kkeisuke]

Illustrator イラストの座標データ取得 frocessing SVGデータ PerlinNoiseを生成したBitmapDataから色の値を読み取り、速度に反映

[nilab]

【flash時計】線で描く時計 | エントリー | _level0.KAYAC : 無数の線が飛散しつつ時間を表示したり、古い絵画っぽいものを表示したりする時計:PerlinNoiseを生成したBitmapDataから色の値を読み取り速度に反映:TweenerのCurveModifier

[yasu-log]

FrocessingでSVG読み込み座標取得。ランダムなうごきはperlineNoise。カーブっぽさはCurveModifier。

[mattodesign]

ほんと色んなアイデアあるなー