こんにちは、原です。

今日は七夕ですね。織り姫とか彦星とか短冊とか、何かしらロマンチックな気分をかき立てられます。

七夕といえば星。星といえばきらきら星ということで、
デザイナーさんに「きらきら星」の曲をイメージした絵を描いてもらいました。
 
普通に描いたのでは面白くないので、「きらきら星」の曲に合わせて
ライブペインティングできるようなflashを用意してみました。
こんな感じ！（いずれも音が出ます）

feat.IKOYAMA

feat.USSY

feat.KINOPPY

軽く仕組みを解説すると、
・曲を流しながら絵を描いてもらい、マウスの座標と時間、色などを記録
・JSON形式で出力した軌跡の記録をもらう
・出力用のflashに入れる
という感じです。

入力用のflashも貼っておきますね。よろしければお試しください。

「start」をクリックでPaint開始です。

ただし、「plot」を押してもwonderfl上では何も起きないので、出力結果が見たい方はダウンロードしてご確認ください。FireBugのコンソール上に描画した座標情報が出力されます。

曲のファイルは

夢幻のオルゴール工房さんのものを使用させていただきました。

ではでは、よい7/7を！

 大分間をあけてしまいました。おひさしぶりです。haraです。

前回に引き続き、光の表現研究エントリです。

今回は、水面やシャボン玉の表面に光が反射した時のように、歪んで揺らいでいるようにできないか、ということで表現を探ってみました。
試行錯誤しつつ、最終的におちついた表現がこちら。woderflでどうぞ。

ホワイト版

カラー版 

（例によって、クリックやドラッグで光が発生します）

ホワイト版の方が、粒子が溶け合ってる感が強くて気持ちいいかと思います。
しかし静止画として見栄えがするのはカラー版でして、冒頭のイメージ画像はカラー版を採用してみました。

Bitmapのゆらぎと言えば、muraken effectが最初に思いつきます。

しかし今回試してみたかった表現はFluid on the Videoでやられていることとほぼ同じ（アニメーションが水のようにゆらぐ）です。
そう、今回はFluid on the VideoをFORKさせてもらっています。

Fluid on the Videoでビデオ映像にマップ変換をかけているところを、前回記事の
パーティクルが乗ったBitmapDataに差し替える、という改造をしています。
あとは色や動きを気持ちいい感じになるように、適宜調整しています。

Displacementの解説は弊社島田の記事がわかりやすいですのでご参考にどうぞ。

それではまた。

haraです。
今回は光の表現を試みてみます。

光の表現？

光の表現、もう少し詳しく言うと、「空間を感じさせる光の表現」ですね。

これの難しいところは、単純に「暗い中に明るい色でモチーフが描かれている」だけでは
光を表現した感じにはならず、空間があって、その空間全体に光の影響が出ているところを
見せないといけないところかな、と思います。

今回は、素直にこの発想で試作してみました。

クリックするとじわじわと浮かんでいくパーティクルが発生しますが、このパーティクルの発生と同時に強い光が放たれて、画面全体が照らされたようになります。

どうでしょう、そこそこに光らしく表現できているでしょうか。

仕組み

仕組みとしてはごくごく単純で、手前で発生させているパーティクルを背面に配置しているBitmapDataに、拡大率をランダムにずらしながら描写しているというものになります。

動きの素材にしているパーティクルは、大分以前にForkさせていただいたParticle Sample Part2です。

BitmapDataはDisplayObjectの像を転写しますが、この転写というのが反射・屈折の表現に利用できるので、光の表現にはなかなか相性がよさそうです。

より光をリアルに表現するためには、霧、霞のようなものがかかっていてそこだけ明るかったり、光の方向にしたがって物体に影がさしていたりするなどの工夫が必要になってくるでしょうか。


この探求はしばらく続きます。では！

 

さて、drawTrianglesであそぼの第３回。
今回は、drawTrianglesを使ってモーフィングっぽいアニメーションをさせます。
モーフィングとは絵と絵の間を補間して、スムーズに変化させる映像手法の１つです。
映像の分野では色々な場面で使われているおなじみの手法ですが、
前回、前々回で使ったクラスを応用して、モーフィング「っぽい」動きをさせることができます。
 

今年１年、wonderflを見ない日はなかったと言ってもいいほどwonderflを見ていたし、
実際毎日見に行って余りあるくらいに色々面白い作品が投稿されていました。

そこで今回は、ここ１年でwonderflを見ていて、個人的に「これはすごい」と感嘆した作品、
ベスト３をご紹介します。
 

drawTrianglesであそぼ、第２回です。
前回は、とりあえず使ってみるということでdrawTrianglesを扱うためのクラスを作り、適当にエフェクトを作ってみました。
今回は前回の仕組みを利用し、ちょっとおしゃれっぽく見えるエフェクトを作ってみます。

haraです。FlashCS5の新機能についていけるのやら、とびくびくしつつ、
今回はPlayer10限定の機能、drawTrianglesを使って遊びつつ、使い方を覚えていきます。
 

haraです。

前回のエントリのおまけで車が走るコンテンツを作りましたが、ここのところ絵をちょっとのっけるだけで大分コンテンツがかわいく仕上がることに味をしめてまいりました。

しかし、前回もそうだったのですが、タイムラインアニメをpng書き出しして利用しようとしたりするとロード時間で結構待たされてしまいます。（帯域にもよりますが）

おそらくこういう画像の利用の仕方が今後増えると思ったので、wonderflで呼び出す用にwonderflでローディング表示を作ってみました。

おかげで前回の車コンテンツもこのような感じ、ストレス軽減です。

haraです。

衝突判定、物理計算とかが絡まず、単純に「ぶつかった・ぶつかってない」だけ取りたいなあ、と思ったのですが、参考書などを見てやってみても、なかなかうまくいかないというかすり抜けまくる！

ということで、僕は衝突判定がとても苦手です。

taroのエントリによると、Box2Dの衝突判定がいいらしいですが。。そりゃ確かに優秀だしsleepとかできてCPUにもやさしいだろうけど、b2Worldとかb2AABBとか、なんかめんどくせーYO・・

と思っていたら、wonderflにいい感じの衝突判定を利用した作品を見つけました。

Box2D使わないでこんなにきれいに衝突取れてる！　というわけでコードを読ませていただきました！

このコードを応用すると、こちらの例のように

向かう方向は適当に、衝突だけ取るみたいなことが

そこそこ簡単にできます。

ではでは、動いてるもの同士の衝突判定で、気をつけた方がよさそうなポイントがあったので解説しましょう。