7jigen labs

前回作った算数の式表示するやつをその辺にぺたぺた貼り付けられるようにしたものを作ったので使ってやってください。

コレ→ mathdisplay0_1.zip （9KBくらい）

<xml>A=<fract><n>x</n><d>y<sup>n</sup></d></fract></xml>

↑のxmlをflashvarsで渡すと↓のように表示されます。

一応flashvars で、xml以外にfontsize, fontcolor, t_right , t_leftってのが送れまして、t_right, t_leftってのは、tracking right とleftのことです。
fontcolorは’ff00cc’みたいにしてRGBで送ってあげてください。
くわしくはzipの中にswfobject用のサンプルのhtmlが入ってるんでそれ見てください。
xml作成は前に作ったコレ使うと作りやすいかもしれません。

なんかWP-SWFObjectだとflashvarsが一個しか送れなくってこのブログでは色変更サンプル表示できませんorz
ともったらデキタ！

※WP-SWFObjectのタグ書くときに&を使うと駄目みたいレス。&と書いたらできますた。
var1=a&var2=b みたいに書けばflashvarsいっぱい送れまっす。

WP-SWFObjectでの貼り付け方は↓みたいになります。

[SWF]url, 幅, 高さ, fontcolor=0066cc&amp;fontsize=30&amp;t_left=1&amp;t_right=1&amp;xml=<xml>XMLの内容</xml>[/SWF]

admin ActionScript3, Flash, Flex

text.engine系の勉強がてら算数の計算式表示ツールを作ってみたの。

xmlから特定のタグ拾って算数(もしてかして: 数学）の式が表示できます。
これ

上のフィールドにxml書くと算数の式になります。

っても分数とべき乗（？）しか今のところ対応してませーん＜

↓のテケトーなXMLをつっこむと、

<xml>A^m = πr²<fract><n>2x³ⁿ </n><d>4y </d></fract></xml>

こんな感じで表示されます。<fract>タグが分数表示用で、<sup>タグがn乗の表示用です。fractの中には適当な入れ子タグが２つ必要です。サンプルでは、<n>と<d>になってまっす。

地味っちゃあ地味ですがね。HTMLじゃ表示できないんで、小学校の算数の先生とか趣味のブログ書くときとか不便じゃありませんか？

text.engine( 何とお呼びすれば良いのか・・・）は、TextElement とGraphicElementとGroupElementがContentElementっていう抽象クラスからできてるみたいなんで、xml突っ込んでレイアウトしてContentElement返すDecoratorみたいな構造のパーサにしてみました。なので、

<sup>タグの中に<fract>タグ突っ込むと

こんなんなります・・・

あと普通に文字も打てますよ。

いろいろElementFormatとかのパラメータいじくれるようにしてみたんですが、あんまりいじくると表示がぐちゃぐちゃになります Of course!

ElementFormatは全体で共有して一部オーバーライドしてるだけなので一応パラメータ変更すると中まで反映されますねオモロー

admin ActionScript3, Flash, Flex

Pixel Benderを勉強中なので今回はPixel Bender関係です。はまるとやばそうです。
Pixel Bender で 「Hello World」という文字をシェーダーで作るのはきっと大変です。でも四角や三角より円が簡単に描けるようなので今回は[ 誰でも描けるマル講座 ]でアリマス。パティパティ

まずParameterってのを用意してやります。デフォルトのシェーダーを作って、
output pixel4 dst;　って書いてあるところの次ぐらいの行に以下を追加しませう。

1
2
3
4
5
6
7
8
9
10
11
12
13

parameter float2 center
<
minValue: float2(0);
maxValue: float2(1000);
defaultValue:float2(100);
>;
 
parameter float radius
<
minValue: float(0);
maxValue: float(1000);
defaultValue:float(10);
>;

centerが円を表示する位置です。x,y 座標のセットなのでfloat2になります。
radiusは円の半径です。これは一個でいいので普通にfloatになります。

evaluatePixelってところがピクセルごとの処理内容になるようです。
evaluatePixelは、以下のようになります。

1
2
3
4
5
6
7

void
evaluatePixel()
{
dst = sampleNearest(src,outCoord());
if( distance( outCoord() , center ) < radius )
dst.r *= 2.5;
}

はい、これでシェーダーをRunさせてみると赤い円ができましたね！簡単です。
distance()っていうのは、その名のとおり距離を計算してくれる便利な関数で、
ここでは、center とoutCoord の距離を計算しています。outCoord ()とは現在計算されているピクセルの位置っぽいです。で見ての通り、その距離が、半径より小さい場合は、出力画像(dst)のr(赤)の値に2.5掛けてもっと赤くしてます。
( 2.5って数字は超いい加減なので妥当かどうか疑わしいです。)
この部分の処理をいろいろ変えてやるだけで、結構いろんな事ができちゃうので、円を描くってのもなかなかあなどれねーってことです。

富士山ライブカメラ(三ッ峠山頂カメラ)

↑のフィルターはマル描いて処理を適当に変えただけです。
evaluatePixelの中身は、それぞれ下のような感じです。
(どれもテケトーな処理です）

[Filter2]

1
2
3
4

float2 coord = outCoord();
if( distance( coord , center ) < radius)
coord *= distance( coord , center ) /radius;
dst = sampleNearest(src,coord);

[Filter3]

1
2
3
4
5

float2 coord = outCoord();
float a = distance( center , coord ) ;
if( a < radius )
cd = mix( coord , center , a/radius );
dst = sampleNearest( src , coord );

[Filter4]

1
2

dst = sampleNearest(src,outCoord());
dst.rgb *= radius / distance( outCoord() , center );

他にもlength() とか dot() とかでも簡単に円が描けちゃいますよ。lengthを使った場合は、

1

if( radius > length( center - outCoord() ) )

とすると全く同じようにマルが描けます。。。。。。。。

admin Flash, Flex, Pixel Bender

ページカールっぽい感じにしてみました。

admin ActionScript2, ActionScript3, Flash, Flex, 未分類

drawTrianglesの各入力パラメータが何なのか分かり易いようにサンプルを作りましたん。

[以下誰でも書ける三角形講座です]

verticesの値に 0, 150を追加してみましょう。(vertexになってますが気にしない。）
[0,0,100,0,100,150, 0, 150] となります。そして「draw」をクリック！

はい丸いのが一個増えましたね。
verticesは、x,y,x,yという順序で各頂点の座標を入力していくようです。三角形を書くには３つの点が必要なのでx,yで計６つになりますね。四角形なら８つですね♪

では、面を張りましょう。indicesのところが、0,1,2となっていますが、
これは頂点0,1,2に三角形の面を書くという事のようですね。
新しくできた丸は、verticesの順番上、頂点3のようですので、これに面を張るには、0と2と3の頂点を結んであげましょう。
[0,1,2,0,2,3]となります。フムフム。

さて次にUV(uvtData)です。これは各頂点ごとに画像（以下、テクスチャ）の位置を設定する必要があります。めんどいですねー。なので、verticesとuvのlengthは常に同じになるんです。（サンプルは、lengthが違う場合は自動でuvがnullになる「仕様」となっております。アシカラズ。

頂点３は画像,もといテクスチャの左下にあたりますねん。uvは、テクスチャの最小値が0で最大値が1みたいなので、左側はx軸的には0だよね？で、下はy軸的には1っぽいんで、例えば0,1って入力してやるとビンゴ！なわけです。
[0,0,1,0,1,1,0,1]ってなります。

verticesの値に0, 120を追加して[0,0,100,0,100,150, 0, 120]にした場合は、120÷150 =0.8なのでuvは、0 , 0.8を追加するとゆがみなく表示します。

でスクリプトで書くと
public function drawTriangles(vertices:Vector., indices:Vector. = null, uvtData:Vector. = null, culling:String = "none"):void
なので、テクスチャつけると

1
2
3
4
5

graphics.beginBitmapFill( bitmapdata );
graphics.drawTriangles(Vector.<Number>([0,0,100,0,100,150]), 
Vector.<int>([0,1,2]), 
Vector.<Number>([0,0,1,0,1,1]));
graphics.endFill();

みたいになります。

おまけ(丸を引っ張ると動くっす）

admin ActionScript3, Flash, Flex 新規タグの追加

Just started.

admin ActionScript2, ActionScript3, Flash, Flex, Pixel Bender, 未分類