最近GraphicsPathと戯れているのですが、その関連で書いたGraphicsPathからシェイプの矩形を取得する関数を貼っておきます。滅多に使うことはないと思いますが、たまにはエントリーしてみるということで。

yossyさんが「x = x + (d - x) / 2.0 を時間に基づく関数に変換する」というエントリをアップしていたので、少し違う方面から解いてみる。結論から言えば結果は同じなんですが…、こういった問題はわりと見た目？から考える性格なのでちょっとやってみます。というかこういうこと考えるの好きで…。

7月に wonderfl で開催されていた fork大会 checkmate に参加していたのですが、Professionalの部で Queenをいただきました！ありがとうございます。

ActionScriptでグラデーションの塗りを行う場合、graphics.beginGradientFill() あるいは graphics.lineGradientStyle() で塗りの指定を行うわけだけど、グラデーションの位置などは Matrix で指定する。この Matrix は、matrix.createGradientBox() メソッドで作成できるのだけど、イマイチ使いにくい感がある。なんか気持ち悪い。

てなわけで、グラデーション的な Matrix をもう少し分かりやすく作りたいなぁ、というエントリーです。

最近、Tween系のライブラリは群雄割拠の様相を呈しているけど、僕は相変わらずTweenerです。慣れてるし量的な感じになると自前実装だし。 てなわけで、Tweenerの拡張をひとつ。Tweenerにはベジェ曲線上をTweenさせる「_bezier」があるのだけど、それのスプライン曲線版 「SplineModifiers」 です。

話題の「wonderfl」がおもしろいです。ブラウザでActionScriptを記述すると、あたりまえのようにSWFが再生される。すごいです。最近、25Line-ActionScript とか、小品的なものはやっぱりいいなぁと感じていたので、さらにほえぇと。

エディタはHTMLのフォームでコード補完とかお便利な機能はないですが、シンプルなエディタとプロンプトでプログラムを勉強(遊んで)いた頃の感覚があって僕は好きです。

で、ありがたいことに「frocessing」が使えるのです。他に利用できるライブラリが実案件などで十分安定化しているのに対して、オレオレリブ的なものをパスに加えていただけるとは懐深いです。(でも普段やらないような書き方したらバグ発見してもうた…やっぱ脆い)

せっかくなので、frocessingのサンプルなどつらつら書きながら、僕なりに楽しみたいですねぇ。僕の場所はここです。

というか、mrdoob氏にびびった。

先日Adobeから発表された、C/C++のコードをActionScriptで利用できるという Alchemy。いろいろと情報が揃ってからぼちぼち触ってみようと思っていたけど、ついついちょっとだけってことで。
全然わからんことばかりなので、試しやすそうな疑似乱数 MersenneTwister を錬金してみることにしました。

Alchemyを動かすには、Adobe の Get Start を見ればすんなりといった。amachangさんの「C/C++ のコードを Flash Player で動かす！ Alchemy を速攻試してみる。」も非常にわかりやすい。僕の場合は、Windows で Cygwin 環境でしたが同じような感じです。FlexSDK は Gumbo 使ってます。

Mersenne Twister については「Mersenne Twister with improved initialization (2002)」 のソース(mt19937ar.c)を利用しています。
比較する為に用意したクラスは、Onegameさんの記事を参考にさせていただきました。

FlashPlayer10が公開されてしばらく、そろそろFP10向けの勉強を初めてみようかと思ってます。とりあえずはGraphics辺りから始めようと思いますが、公開されたらテストしてみようと思ってたMatrix辺りから。
環境はなんとなく Flex4 Gumbo の Nightly Builds で（flashパッケージしか使わないけど）。

>> Flex4 Gumbo Downloads
>> flashplayer10 reference( 070208 )
>> Gumbo Language Reference

ADCに野中先生によるMatrixの解説記事が公開されていました。僕も同じようなエントリーを書いたことがありますが、先生の解説に比較して非常にそっけないですね。思いやりがいたらないなぁと。
それはそれとして、先生は記事の中で「Matrixのヘルプに間違いがある」と指摘していましたが、前から気になっていたのですっきりしました。で、何がというと。

最近久しぶりにAS2を触ったりしています。始める前は「ぬぅぅ」とか唸ってましたが、実際書いてみるとAS2のやわらかい感じが「けっこう楽しいね」とか思ったりとか。今ではFlashDevelopでAS2も書けるし、案外ストレスもないし。
とAS2とは関係ないですが、Box2Dの回転Jointのテストしてみようと。AS3はライブラリが豊富なのが魅力ですね。
Box2Dは、Box2DFlashAS3 2.0.1です。

Spark 勉強会 #2に行けなくて一人スパークしてみようと、昨日エントリーした「ProxyなAdapter」ですが、もう少し便利にしたいなぁということで細々改善してみました。あと、Proxyを継承して動的(dynamic)にしている関係で、指がヌルい僕にとってはFlashDevelopの補完ができずに、まだまだ指ダレしてしまう。なわけで、補完の聞く静的なAdapterをどうにかしようと。静的だといろいろ効率よさそうですし。

最近、よくProxy関連のエントリーを見るなぁとか思ったのは錯覚なのかわかりませんが、fladdictさんのエントリーがなるほど便利だなぁと思ったわけです。
で、Proxy使ってみようということで、イベントAdapter的なものを書いてみました。全然＜Proxy＞ぽくないけど。ありがちなので既出のような気もしますが。

いまさらながらBox2Dを勉強してみる。物理計算(特に力学系)をやる場合、毎回必要な分だけ生書きしてたのですが、やはりライブラリ使ったほうが効率的かなぁ(特にプロトタイプとか)、という当たり前な理由でまずは触ってみようということで。
勉強するにあたって「Flash OOP本の10章」と、「Box2DでActionScript物理プログラミング」にお世話になります。わかりやすいなぁ。
使用したのは、いつのまにかバージョンが上がっていた、Box2DFlashAS3 2.0.1です。

frocessingでは、Matrixを拡張してFMatrix2Dというクラスをつくっているのですが、その過程でどうもオリジナルの matrix.scale() と Matrix.rotate() が遅いんじゃないかと思いまして、以下試してみたものです。

今さらながら、flash.geom.Matrixによる変形のことで何か書いてみます。Matrixについてヘルプやマニュアルでは拡大やら回転やら移動やらの説明しかなくて何だかわかりにくく書いているように思える。学校で習ったアフィン変換としては素直な説明に読めるけど、変形したいだけの人からしたら何だかわかりにくい。この説明を読むとどうしても「回転」して「縦に伸ば」して「移動」、これらをconcatすればええのかなぁみたいな思考になってしまう。確かに行列として考えたほうが数学的には分かりはいいけど。あまり本とかサイトとかよく見ているほうではないので分かりませんが、Matrixについては大抵こんな説明なような気がする。(違ってたらごめんなさい)。というか「Matrixがいまいち」と言うとなりの人向けに書いているわけですが。

色のブレンドにアルファチャンネルを追加してみました。アルファがある場合に、どのようにして色が求められるかいまいちよくわからなかったのですが、Processingの「blendColor()」で出力される値を眺めながら謎解き気分でやってみました。なわけで、少々怪しいところがあると思いますが。

使い処は限られているとは思いますが、色のブレンド関係のスクリプトを書いて見ました。Proccessingでいうところの「blendColor()」です。
普段使っているblendModeの仕組みメモも兼ねて。

なんとなくちまちま。JSFLを勉強していたりします。で、Flash上で描いた線や塗りを、lineStyle(...)、beginGradientFill(...)の形式で出力するJSFLをつくってみました。特にグラデーションのパラメータはスクリプトで書くのが面倒なのがつくってみた訳です。

Tweenerの_bezierプロパティは制御点だけを指定するので動きとしては滑らかな軌道を描きますが(イラストレータでいうところのスムーズ)、コーナー連結のように滑らかでない動きができない。曲線のパラメータに連結点を指定すればよいので、_bezierプロパティを実装しているCurveModifiers.asに手を入れてみた。

先日エントリーしたJSFLですが、どうも実装が緩いのでちろちろ手直し入れていて。改めてアップすることにしました。主なところは、曲線の情報を得るのに使っているEdgeというオブジェクトが、始点と終点の情報が他の曲線と比べて逆になる場合がある、ということの対応と、書き出す座標値の方向を順方向、反転方向選べるようにしたところ。

Tweenerにはベジェ曲線上をトゥイーンさせるプロパティ「_bezier」があるのだけど、曲線の座標を指定するのが面倒だったりなかったりします。できればガイドのように自分で描いた曲線をトゥイーンさせたい。で、ペンツールなどで描いた曲線からTweenerの_bezier用のスクリプト出力する簡単なJSFLをつくってみた。

いつもお世話になっているTweenerのことをもう少し勉強してみようと思い立って、Modifierをつくってみることにした。Modifierは、Tweenerが対象Objectのプロパティを更新する際に何かしらの処理を割り込ませるようなもので、例えば「Tweener→displayObject.x」を「Tweener→Modifier→displayObject.x」という流れにするものらしい。試しに簡単な関数を間に挟む「FunctionModifiers」を書いてみる。

正規乱数というのは、統計確率の分野では形而上学的存在ではなかろうかと思われる正規分布(ガウス分布)に従う乱数のことで。今回はその乱数を生成するスクリプトです。

最近は季節変動で呼吸器系をやられつつゲームやり過ぎな毎日ですが、2つの2次ベジェ曲線の交点について簡単に書いてみます。最初は幾何学的に解けるんじゃないかと考えていたのですが、結局は数値解析的な方法で求めました。Bezier Clipping 法の考え方(FatLine)を参考にしています。

正直忘れてしまいそうなのでエントリしてみようと思いました。説明はぐだぐだやもですが…。で、3次ベジェから2次ベジェの近似変換について簡単に書いてみます。ソースには2次から3次も書いてありますが、使うことあるのかなぁ的でメモ的に書いているだけです。

2月はのんべんだらりと暮らしたかったのですが、なかなかそうもいかないようで。
最近は多変量解析の勉強をしているのですが、その関連で行列の計算が必要だったので簡単なものをつくってみました。

年末気分で、事務所でビール飲んでしまいました。不良社員です。うまいです。全体ベジェばっかりですが、今回は2次ベジェ曲線でgetRectです。素直にやれば、ShapeやらのDisplayObjectに描画してgetRect()すればRectangleを得れるのですが、2次ベジェの各点(始点・終点・制御点)から計算してみます。

12月第1週でゲーム3本購入。なんとも年末気分になっています。前回の流れで3次ベジェ曲線の切り出しを書いてみます。

久しぶりのエントリーです。仕事が忙しくなると物欲がたくましくなる今日この頃です。年末はゲームもプラモもいろいろ発売でゆるゆるです。バーチャとシュトルヒが欲しい…。で、懲りずにベジェです。3次ベジェの切り分けです。

最近の季の節で風邪をひいてへたってますが、先日書いた「ベジェ曲線と点の距離」の続きを書きます。計算のやり方としては、2次ベジェ関数から導いた距離の数式を微分して解を求める、という感じ。

FlashCS3で、ムービークリップのフレームに配置したオブジェクトの挙動が、いまいちピンとこないで困っている。よくわからないのは、フレームに配置された子ムービークリップのaddだとかremoveの挙動。スクリプトでいうところの、addChildやremoveChildを自動で実行してくれている、というイメージだったのだけど、どうも違うようで…。

相変わらず地味なことばかりスクリプトにしていますが、今回はベジェ曲線と点の距離です。言い換えると、点に対しての曲線上の最近傍点です。

2つの円に共通する接線を求めてみようと思います。接線は、それぞれの円の接点を求めることと同じになりますが、この接点は、Math.acos でわりと単純に求めることができます。

半径r、中心(x,y)の円の接線を求めてみようと思います。

もう少し交点です。今回は2次のベジェ曲線と直線の交点です。
とはいえ、この交点は、直線の式に、ベジェの式を代入すれば素直に求めることができます。

近頃になって、Adobeは城戸氏によるセッションのレポートを読みました。ページ内にあるデモサンプルが、とにかくサクサクと動いて、今更ながら驚いています。3D関連はライブラリも充実してきているし、次のバージョンでは3D的な表現もできるということで、その方面はまったく他人頼りにしていたのですが、城戸氏自身、ライブラリ的なものは0からスクラッチがお勧めだ、とレポート内で紹介されていて、簡単な座標計算だけでも手前でつくってみようと思った次第です。

交点ばかりですが、円と直線の交点を計算してみようと思います。

直線と直線の交点を計算してみようと思います。

直線と点の距離をActionScriptで計算してみようと思います。非常に月並みですが、地味な感じですが。

先のベジェ曲線の破線描画に、直線の破線描画を加えて、moveTo、lineTo、curveToで破線を描画するものをまとめてみました。 moveTo、lineTo、curveToといってもGraphicsの拡張ではありませんが…。

ベジェ曲線の分割の流れで、ActionScriptでベジェ曲線を破線で描画してみます。

ActionScriptのGraphics.curveToで描画する2次のベジェ曲線を等分する座標を求めてみます。とりあえずベタな方法です。

半径r0 中心(x0,y0) の円と、半径r1 中心(x1,y1) の円との交点を、ActionScript的に求めてみます。ActionScript的と言っても、プログラムをそれで記述するだけのことですが…

ActionScriptで3次ベジェ曲線を描く場合、自前で3次ベジェの関数を用意して描きます。しかしながら、正確じゃなくても、近似で描きたいなら、いろいろ方法があると思われます。その方法の内でも、かなり大雑把な方法を紹介します。

FlashCS3のUIコンポーネントは、デフォルトで通常のカーソルになっていて、いわゆる指カーソルになっていない。でも、ボタンだとか、指カーソルにしたいときだってある。「Button」の場合は、useHandCursor が false になっているので、これを true に変えればいい。

//btn:Buttonのインスタンス
btn.useHandCursor = true;

このノリで、「Slider」もいけるかと思って、同じことをしてみたが反応がない。というか、よく見ると目盛りの部分が指カーソルになってしまった。そんな簡単ではないのね…。
「Slider」全体ではダメなので、バーとハンドル？それぞれで指定すればよいかと、少し中を調べてみる。そうすると、「Slider」には子(DisplayObject)が２つあって、それぞれ fl.controls.BaseButton だった。これらがバーとハンドルっぽい。どちらも buttonMode が true だったので、後は useHandCursor を指定すればいいみたい。

//slider:Sliderのインスタンス
( slider.getChildAt(0) as BaseButton).useHandCursor = 
( slider.getChildAt(1) as BaseButton).useHandCursor = true;

これで無事に指カーソルにすることができる。もっと簡単にできそうな印象はあるのだけど。

格子上にDisplayObjectを配置するクラスです。特筆すべき点はないですが、よく使うかなぁと。
こんな感じです。

前回、ひとつだった曲線を、複数の曲線、直線を組み合わせて、その線上を動くものをテストです。
いくつかの曲線を、程度一定の割合で動かす為に、それぞれの曲線の長さを求めないといけない。その為には積分を使います。高校で習ったであろう、線分の積分、√(dx^2 + dy^2)を積分です。これでベジェ曲線を積分するわけです。いろいろ捏ね繰り回すとこんな感じになります。

Flashの曲線を描く関数curveToは、2次ベジェ曲線だ、とマニュアルに書いてあったのだけど、このスクリプトで描く線を、モーションガイドのように使いたいなぁ、と思った次第です。
ベジェ曲線の式は、リンク先の通りなので、とりあえずここから。

Adobe CS3 の販売がいよいよ間近になったこともあり、ActionScript3.0に少しでも触れておこうとFlash CS3 のデモ版をインストール。シンプルな描画処理とイベント処理を試して、まずは一歩を進めてみました。