NUTSU » [f5]HTML output test.
昨日のエントリ「SVG出力」に続いて HTML Canvas に出力してみるテストです。単純に Canvas を使ってみたかっただけなんですが、ものは試しということで。とはいえ役には立たないローテクであります。 上の画像は試作のキャプチャなのですが、左のSWFで描画している内容を ENTER_FRAME で 描画JSを ExternalInterface.call() する、といった内容です。同じ絵ができるだけ、なのですが。 試作は以下のURLからご覧ください。こちらノリで作っているモノなので動かない場合はご愛敬です。Winの Chrome と FireFox は普通に動いてましたが、Mac は未確認です。もちろんIEはスルーです。 html out test( canvas api required ) 予想よりも動作が快適でありました。SVGと同様に線幅は Canvas の方が細かく表
[as]なにやらめちゃくちゃわかりやすいMatrixによる変形のこと [NUTSU]
今さらながら、flash.geom.Matrixによる変形のことで何か書いてみます。Matrixについてヘルプやマニュアルでは拡大やら回転やら移動やらの説明しかなくて何だかわかりにくく書いているように思える。学校で習ったアフィン変換としては素直な説明に読めるけど、変形したいだけの人からしたら何だかわかりにくい。この説明を読むとどうしても「回転」して「縦に伸ば」して「移動」、これらをconcatすればええのかなぁみたいな思考になってしまう。確かに行列として考えたほうが数学的には分かりはいいけど。あまり本とかサイトとかよく見ているほうではないので分かりませんが、Matrixについては大抵こんな説明なような気がする。(違ってたらごめんなさい)。というか「Matrixがいまいち」と言うとなりの人向けに書いているわけですが。 で、下のサンプルですが、白○をドラッグすると青いMovieClip(mc)
NUTSU » [f5]Processing的なFrocessing
Processingがたのしくて、勉強しているうちになんとなくProcessin的なASドロー系ライブラリをちまちま作っているわけですが、フライング気味にSparkPorjectにコミットしてみました。実装している機能は一部だし、テスト不十分でこれからデバッグなんですけど。なんとなく遊んでいただける方はこちら(SparkProject-Frocessing)からどうぞ。 Frocessingを使った場合の雰囲気なんですが、例えば下のような。 これの場合、flaのDocumentClassを「frocessing.display.F5MovieClip3D」と指定して、フレームスクリプトに以下のような感じで書いています。 QMedium(); var num:int = 100; var a:Number = 0; var i:int; var ss:Number = 100; var vs
NUTSU » [as]ベジェ曲線と点の距離(2)
最近の季の節で風邪をひいてへたってますが、先日書いた「ベジェ曲線と点の距離」の続きを書きます。計算のやり方としては、2次ベジェ関数から導いた距離の数式を微分して解を求める、という感じ。 さて、2次ベジェのx,y座標を、tの関数とすると、それぞれ // 始点 point0 // 終点 point1 // コントロール点 control //x座標の関数 fx(t) = point0.x*tp*tp + 2*control.x*t*tp + point1.x*t*t; //y座標の関数 fy(t) = point0.y*tp*tp + 2*control.y*t*tp + point1.y*t*t; というような2次式になります。ここで、任意の点(x,y)からの距離を考えると、距離はtの関数で //点(x,y)と曲線の距離平方の関数 fd2(t) = (fx(t)-x)*(fx(t)-x) +
NUTSU » [as]破線描画
先のベジェ曲線の破線描画に、直線の破線描画を加えて、moveTo、lineTo、curveToで破線を描画するものをまとめてみました。 moveTo、lineTo、curveToといってもGraphicsの拡張ではありませんが…。 サンプルでは、以下のようなスクリプトで破線を描画しています。 //引きのoffsetは破線開始オフセット function draw(offset:Number):void{ //破線描画オブジェクト var g:DashLine = new DashLine( graphics, 6 ); //ShapeData var dat:XML = <shape> <edge x0="334.35" y0="60.15" x1="338.1" y1="63" x2="341.6" y2="66.5" line="0" /> <edge x0="341.6" y0="6
NUTSU » [as]ベジェ曲線の分割(2) 破線の描画
ベジェ曲線の分割の流れで、ActionScriptでベジェ曲線を破線で描画してみます。 前回、等分の座標を求めるのに、変数tを0から1まで小刻みに増やして逐一チェックする方法をとっていました。この部分を若干汎用化して、任意の長さからt値を得るようにしてみました。 /** * 長さからtを得る * @param 長さ( 0～length：曲線の長さ ) * @param 許容誤差 * @return t */ public function length2T( len:Number, d:Number=0.1 ):Number{ if( len<0 || len>_length ){ //0以下、曲線より大きい場合NaN return Number.NaN; }else{ //再帰的関数でt値を得る return seekL( len, d ); } } /** * 長さに対するtを得る *
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
