わかめペン

注意：描画処理がヘビーなため、高速なPCでないと動きがもたつきます。最悪ブラウザを落とすかもなのでご注意！！

昨日エントリした「なんとなく遊んでしまう」を目指して作ってみました。ステージ上をマウスドラッグでわかめ線が描けます。左上の丸をクリックすると消せます。

あとでソースも公開しますが、しばし手入れします。

1.
ユーザにインタラクションを提供できてなんぼ、みたいなとこはあるのでペンで描画できるようにしました。BitmapData の draw() での描画はフレームレート＆処理速度の影響で点々になってしまうので、lineTo で線を描画するようにしました。昨日エントリしたサンプルの色変化効果も適応させました。

2.
ちょっと脱線。
まぁもともとはなぎまぐさんのサンプルなのですが、このへんまでいじれば別モノになったかなぁと勝手に判断して、アプリ名（クラス名）を考えます。「DrawAurora.as（ドロゥオーロラ）」とでも命名すると格好イイのでしょうが、僕は迷わず「WakamePen.as（わかめペン）」と命名します。線の太さも 1px と細くすればクールなラインアートっぽくなれそうなのですが、そこも迷わず 5px です。性格上、あんまりクールな感じになると照れてしまいます。サンプルとはいえ、性格って出るもんだなぁと思いました。
まぁこれで「わかめ業界の Flash サイト」制作の際は僕に声がかかると思います（謎）

3.
上の状態で色も変化してるしひと安心と思いきや、なんか違います。ステージ上のオブジェクトが変色していくのはいいのですが、同じタイミングで同じ色に変色しています。これは昨日のサンプルではステージ上のオブジェクトはマウスに吸着している丸一つだけで、その他は draw して生成された「過去の画像」だったのに対し、今回のサンプルは、ステージ上に今まで描画（lineTo）したすべての線が残っていて、そのすべてに同時にフィルタがかかっているせいです。僕はステージで虹色を表現したかったのです。そのためには毎フレーム：

_drawingBoard.graphics.lineStyle(ペンの太さ,ペンの色)
_drawingBoard.graphics.lineTo(mouseX, mouseY);

のペンの色を変化させてやれば良さそうです。レインボー変色したいときは色の色相（Hue:ヒュー）を変化させてやればよくて、同様のことは昨日のサンプルの gskinner さんの ColorMatrix クラスでできるのですが、gskinner さんのは ColorMatrixFilter を使って変色させるサンプルだったので、ちょっと大がかり、というか僕が直観的に使えないのです。
lineTo の色の変更は 0xFF0000 というような16進数で設定すればいいので、いちいち ColorMatrix を使う必要はありません。第一、ColorMatrix の色を都度16進数値に変換＆取得する方法がわかりません。目的は「毎フレーム色相の値を回転（値をループ）させ、その時の16進数値を取得し続ける」ことができればいいので、そういうサンプルをネットから探してみる（自分で作れよｗ）と、英語で世界中から検索したにも関わらず、

fladdict さんの「sketchbook ライブラリの ColorSB クラス」

だけがヒットしました。ライブラリは SVN 管理されているので Ko:ki 様のtortoiseSVN の使い方記事を参考に sketchbook ライブラリをゲットし、ColorSB クラスの中身を拝見すると、

col = new ColorSB(0x00FF00); //適当に初期色。わかめグリーン
col.hue = 0;

と初期化しておいて、あとは毎フレーム

col.hue += 1; //hueプロパティはクラスファイル内で0-360でループする内部処理が施されている
_drawingBoard.graphics.lineStyle(ペンの太さ,uint(col))

してやれば色相をレインボー変色し続けることができる簡単仕様。

ということで、僕が使ったのは sketchbook の機能のほんの一部なのですが、「fladdict さんが作ったライブラリなのだからさぞ超絶なスキルがないと使いこなせないのだろうなぁ。」と身構えている人がおられましたらそれは誤解です。たしかにクラスファイルでは僕の知らないような内部処理がスマートに実装されてますが、ライブラリを使う分にはそこを解読する必要はなくて、ドキュメントやクラス内のコメントを参考に気軽に使わせていただくだけなのです。（まぁ結局クラス内が気になりだすのですが、それはまた時間ができた時にでも。。）
ということで、ペン先を変色させ続けるようにできました。

4.
lineTo を使うお絵かきツールを作る上では欠かせない Tips だと思うのですが、lineTo で描画した線は、ステージ上に増えれば増えるほど、再生パフォーマンスは落ちていきます。対応策としてはどこかのタイミングで lineTo しているすべてを BitmapData として drawして（キャプチャ）、同じ位置に貼り付けた後、lineTo を clear してやるといいです。

今回はユーザーがラインを１本書き終えた（マウスアップ）タイミングでキャプチャしています。これは過去 AS2 で作ったことがあるので簡単でした。

「trick7.com blog: Flashで筆順再生２：色とブラシサイズ」ソースはこっち

5.
左上の消去ボタンをクリックするといい感じに消えていきますが、実は4で作ったBitmapDataをクリアするだけで勝手にああいう感じになりました。ラッキー。でもこれ「超絶技巧発表会」の munegon さんのプレゼン資料と同じ効果ですよね。。かぶってすいません。
ところでビットマップデータをクリア（全部透明に戻す）する時って

_drawingStockBMD.fillRect(new Rectangle(0,0,stage.stageWidth, stage.stageHeight),0x000000);

するのがベストですかね？
draw() で消せるかと思ったら、上書きされるだけだったのでちょっとハマった。前にもハマってた。
「trick7.com blog: bitmapData.draw(mc); を連続して実行すると」

6.
で一応できたかなと思ってサーバにアップしたらもたつく。。ローカルでは普通に動いてたスペックのマシンでもブラウザで見るともたつくんですね。Core2Duo の 2GHz オーバーのマシンでやっとという感じ。
おそらく ステージ全体に対して perlinNoise でもやもや画像を生成＆アニメーションさせ続けている部分が重たそうなので、ステージサイズを縮小すればマシになるのだろうけど、このステージサイズで気持ち良くなるように作ったので変えたくない。
perlinNoise ビットマップ画像を半分のサイズで作って Matrix で2倍に拡大するのも考えたけど、今までの実装上、ペンツールとの兼ね合いで頭がこんがらがりそうなのでちょっと躊躇中。

7.
作っててテンション上がったので、僕も「noughts::」さんや「黒板.in（大ヒットにつき管理運営が大変そうですね！）」さんみたいなものを作りたい。PHP 勉強する！（何度目の宣言だｗ）

以上、現時点でこんな状態。長々と解説してるよりソース出せという感じでしょうが、いつものように天真爛漫なコードを書いてしまったので清書してからということでお待ちくださいませ。

追記：
3の段階で FlashDevelop プロジェクト外のディレクトリにクラスパスを通した（プロジェクトエクスプローラーウィンドウのプロジェクトディレクトリ右クリックで propaties ＞ClassPaths から設定）のだけど通らない。import 補完で候補として表示はされるのだけど、パブリッシュ時に怒られる。結局同階層ディレクトリに sketchbook ディレクトリを持ってきて対応したのだけど、なぜクラスパス通ってないのでしょう！？

自己解決：
FlashDevelop 側はクラスパス通してたけど、僕は F6 キーで Flash IDE からパブリッシュするようにしていて、Flash 側でクラスパス設定してなかった。svn用フォルダを新規に作ったので忘れてた。アホや。