ActionScriptでグラデーションの塗りを行う場合、graphics.beginGradientFill() あるいは graphics.lineGradientStyle() で塗りの指定を行うわけだけど、グラデーションの位置などは Matrix で指定する。この Matrix は、matrix.createGradientBox() メソッドで作成できるのだけど、イマイチ使いにくい感がある。なんか気持ち悪い。 てなわけで、グラデーション的な Matrix をもう少し分かりやすく作りたいなぁ、というエントリーです。 createGradientBox のイヤなところ createGradientBox()メソッドは以下のように使いますね。 //幅、高さ、回転、左上の座標で指定 var mat:Matrix = new Matrix(); mat.createGradientBox(

Tweenerにはベジェ曲線上をトゥイーンさせるプロパティ「_bezier」があるのだけど、曲線の座標を指定するのが面倒だったりなかったりします。できればガイドのように自分で描いた曲線をトゥイーンさせたい。で、ペンツールなどで描いた曲線からTweenerの_bezier用のスクリプト出力する簡単なJSFLをつくってみた。 とりあえず、できあがりはこんな感じ。グレーの曲線がペンツールで描いた曲線です。 手順としては、まず下のスクリプトを適当なファイルに保存します。例えば「makeBezierTweenOption.jsfl」とかいうファイル名で。 //**************************************************************************** // Script for Tweener _bezier Option // // sa

OpenGLの勉強してたら、順当にGLSL(Shader)のことになって、GLSLってPixelBenderに似てるなぁとか思ったら、それもそのはずPixelBenderはGLSLをベースに開発されたっていうし、んだらPixelBenderやってみよう(主にShaderJob系)ってしてたら、flash.geomのUtils3Dとか悪くないなぁとか思いつつ、Flashビルトイン？の3D系APIに向き合ってみよう、といった最近。遅いけど。 で、FLARToolkitは大抵PV3Dとかライブラリと連携してると印象してるのだけど、flash.geomパッケージでやってみようとテストしてみました。 とりあえずUtils3D まずは、drawTrianglesとセットな感じのあるUtils3Dから。ライブラリ使わないのであれば、速度的にもお手軽度的にもUtils3D→drawTrianglesの流れ

昨日のエントリ「SVG出力」に続いて HTML Canvas に出力してみるテストです。単純に Canvas を使ってみたかっただけなんですが、ものは試しということで。とはいえ役には立たないローテクであります。 上の画像は試作のキャプチャなのですが、左のSWFで描画している内容を ENTER_FRAME で 描画JSを ExternalInterface.call() する、といった内容です。同じ絵ができるだけ、なのですが。 試作は以下のURLからご覧ください。こちらノリで作っているモノなので動かない場合はご愛敬です。Winの Chrome と FireFox は普通に動いてましたが、Mac は未確認です。もちろんIEはスルーです。 html out test( canvas api required ) 予想よりも動作が快適でありました。SVGと同様に線幅は Canvas の方が細かく表

最近は季節変動で呼吸器系をやられつつゲームやり過ぎな毎日ですが、2つの2次ベジェ曲線の交点について簡単に書いてみます。最初は幾何学的に解けるんじゃないかと考えていたのですが、結局は数値解析的な方法で求めました。Bezier Clipping 法の考え方(FatLine)を参考にしています。 交点を求める過程の基本的な考え方は次のような感じです。 図のように曲線Aと曲線Bがあるとき、一方の曲線を包括する矩形を求めます。この矩形は、曲線の始点、終点を水平にしたときのgetRectに相当します。この矩形で、fig2のように一方の曲線を切り出します。 上図の場合、一本の曲線が切り出されていますが、場合によっては複数本の曲線が切り出されることになります。 次に、切り出した曲線について同じように矩形を求めて、他方の曲線を切り出すわけです。 この、曲線の矩形化・曲線切り出しの処理を繰り返すと、最終的に矩

9月11日に行われた「Spark勉強会 APMT:WEEK特別版」で少し発表しました。BetweenAS3のUpdater・カスタムTweenについて話したのですが…喋り始めてすぐに話題がニッチ過ぎたかと感じて心持ち微妙でしたがyossyさんがニヤリしてくれたみたい？なのでそれはそれでよいのかと。 一応、発表スライドなどの資料を上げておきます。BetweenAS3でカスタムTweenとかしたい、という奇特な方は参考にしていただけると幸いです。 http://nutsu.com/spark/apmt/spark_apmt_slides.pdf スライドで記載しているデモは下記のものです。カスタムUpdater(MatrixUpdate)のデモとシェイプTweenのデモです。シェイプTweenはまだまだ開発途中で例外などご愛敬ということで。 4000SpriteMatrixTween(カスタム

最近GraphicsPathと戯れているのですが、その関連で書いたGraphicsPathからシェイプの矩形を取得する関数を貼っておきます。滅多に使うことはないと思いますが、たまにはエントリーしてみるということで。 使い方は以下の通りです。 var gp:GraphicsPath = new GraphicsPath(...); ... var rect:Rectangle = getGraphicsPathRect( gp.commands, gp.data ); つまり描画と関係なく矩形をいただこうということです。DisplayObjectのgetRect()と同じようなノリです。 関数は以下の通りです。 function getGraphicsPathRect( commands:Vector., data:Vector. ):Rectangle { var minX:Number

yossyさんが「x = x + (d – x) / 2.0 を時間に基づく関数に変換する」というエントリをアップしていたので、少し違う方面から解いてみる。結論から言えば結果は同じなんですが…、こういった問題はわりと見た目？から考える性格なのでちょっとやってみます。というかこういうこと考えるの好きで…。 とりあえず問題の式です。dは目標値、kは比率(0<k<1)です。 x' = x + ( d - x ) * k (式1) この式について「時間から現在値」と「任意の値までにかかる時間」を算出するということですね。見た目から入るのでとりあえずグラフでイメージを書きます。x0 は x の初期値で、hi 目標値までの距離 ( d – xi ) を表しています。 グラフを見ると現在値である x より、目標値までの距離 h が単純な推移をしているような感じです。試しに式にしてみます。 [xの式] x

7月に wonderfl で開催されていた fork大会 checkmate に参加していたのですが、Professionalの部で Queenをいただきました！ありがとうございます。 投稿したいたのは以下のものです。 お題がBitmapのパターン塗りってことで単純に思いつきでイ○ベイダーに。後はMatrixを使ってモーションやインタラクションをつける、パターン自体に動きをつける、単純なパターンにならないように左右の動きをつける、といったノリでコーディングを始めました。 始めは左右の動きをDisplacementMap(マップの絵もパターン)で実装しようと思ったのですがちょと重いので却下。画像2パターンとtranslateで実装することに。色はBitmapパターンといとこ関係？にあるグラデのリピートを使うことにしました。 余談ですが、プログラム冒頭の「background」は誤記です…。表