5iVESTAR.ORG

パスが重なった時の描画

May 5th, 2009

ちょっとしたことだけど、メモ。

昔、Guilloches を書いた時、初めは線をつないでいく部分をこうしていた。

g.lineStyle(1, color, 0.3);
g.moveTo((r * 2 + R + p) * scale, 0);

for (var i:int = 1; i <= steps; i++) {
	t += dt;
	x = (rR * Math.cos(t) + rp * Math.cos(rR/r * t)) * scale;
	y = (rR * Math.sin(t) + rp * Math.sin(rR/r * t)) * scale;
	g.lineTo(x, y);
}

が、これだとこんな感じになって線の重なりが表現できない。

仕方なく bitmapData にちょっとずつ draw するという変なことして重なった部分がより濃くなるようにしていた。

g.lineStyle(1, color, 0.3);
g.moveTo((r * 2 + R + p) * scale, 0);

bitmap.lock();
bitmap.fillRect(bitmap.rect, 0x000000);
for (var i:int = 1; i <= steps; i++) {
    t += dt;
    x = (rR * Math.cos(t) + rp * Math.cos(rR/r * t)) * scale;
    y = (rR * Math.sin(t) + rp * Math.sin(rR/r * t)) * scale;
    g.lineTo(x, y);
    if ((i & 7) == 0) {
        bitmap.draw(shape, matrix);
        g.clear();
        g.lineStyle(1, color, 0.3);
        g.moveTo(x, y);
    }
}
bitmap.unlock();

でも実はこれでいいことにちょっと前気づいた。

g.lineStyle(1, color, 0.3);
g.moveTo((r * 2 + R + p) * scale, 0);

for (var i:int = 1; i <= steps; i++) {
	t += dt;
	x = (rR * Math.cos(t) + rp * Math.cos(rR/r * t)) * scale;
	y = (rR * Math.sin(t) + rp * Math.sin(rR/r * t)) * scale;
	g.lineTo(x, y);
	g.moveTo(x, y);
}

パスを一旦切ってやればよかったみたい。

Filed in ActionScript No comments

SoundMixer.computeSpectrum() で遊ぶ

February 5th, 2009

音の波形を動力にアニメーション

を参考にしながら muraken effect を音楽と同期させてみた。

muraken effect with music - wonderfl build flash online

Filed in ActionScript No comments

Wonderfl が楽しい

December 28th, 2008

Wonderfl Build Flash Online

Emotion Fractal in AS3 を投稿したら 10 人もの方に favorite をつけてもらった。嬉しい。

こんな風にすぐフィードバックがもらえるので Flash でちょっとしたものを作って公開するのには最適の場と言えるかもしれない。

もっとも最近はいよいよ年末ということで皆忙しくなってきたためか人が少ない気もするが。

ところで Flash ではクロスドメインでのデータの読み込みに少し制約があって、例えば画像なら読み込んで表示させること自体は可能なのだが、BitmapData に落とし込もうとするとセキュリティサンドボックスの侵害になってしまう。

その辺はここが詳しい。 AS で別ドメインの画像を読み込むときの注意点

そのため、wonderfl で外部画像を取得してピクセルを読んだりする場合には、crossdomain.xml を設置した自分のサーバにまずアップロードしておいてから、それを読むようにしなくてはならない。

これでは不便なので、プロキシを介することで解決した。

http://5ivestar.org/proxy/

wonderfl にも投稿したこれはプロキシを経由して Google のロゴを取ってきている。(クリックで停止)

プロキシを経由すると当然読み込みには時間がかかってしまうので一応キャッシュするようにしておいた。

wonderfl の Flasher の方でこの辺りのことで煩雑な思いをしておられる方がおられましたらどうぞご利用ください。

使い方:

1. ポリシーファイルを読み込む

Security.loadPolicyFile("http://5ivestar.org/proxy/crossdomain.xml");

ちなみに LoaderContext を利用したやり方だとドメイン直下の crossdomain.xml しか読んでくれないので動かない。

2. ロード

loader = new Loader();
loader.contentLoaderInfo.addEventListener("complete", loadingComplete);
loader.load(new URLRequest("http://5ivestar.org/proxy/{取得するURL}"));

3. あとは煮るなり焼くなりご自由にどうぞ

var bitmap:BitmapData = new BitmapData(loader.width, loader.height, true, 0x00000000);
bitmap.draw(loader);

Filed in ActionScript No comments

Emotion Fractal in AS3

December 21th, 2008

original by jtarbell: Levitated | Emotion Fractal

It's using these fonts.

Times
Helvetica
Didot
COM4t Fine Regular by Hideki Katayama
Maximumline Speeder by Hideki Katayama
OLDNEW by Hideki Katayama
Gt informat-AL by Masayuki Sato & OMNIKONO
Nihonbashi 2.0-AL by Masayuki Sato

source:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.net.*;
	import flash.text.*;
	import flash.ui.*;
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.TextShortcuts;
	import com.adobe.serialization.json.JSON;

	[SWF(backgroundColor="#000000", frameRate=30)] 

	public class EmotionFractal extends Sprite {

		private var queue:Array;
		private var words:Array;
		private var fonts:Array = ["Times", "Helvetica", "Didot", "COM4t Fine Regular", "OLDNEW Axis", 
		                           "Maximum Line Speeder", "GtinformatAL", "NihonbashiAL"];

		[Embed(systemFont="Times", fontName="Times", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font1:Class;
		[Embed(systemFont="Helvetica", fontName="Helvetica", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font2:Class;
		[Embed(systemFont="Didot", fontName="Didot", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font3:Class;
		[Embed(source="COM4F_RG.TTF", fontName="COM4t Fine Regular", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font4:Class;
		[Embed(source="OLDNEW_A.TTF", fontName="OLDNEW Axis", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font5:Class;
		[Embed(source="MAXI_L_S.TTF", fontName="Maximum Line Speeder", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font6:Class;
		[Embed(source="GTINA___.TTF", fontName="GtinformatAL", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font7:Class;
		[Embed(source="NIHOA___.TTF", fontName="NihonbashiAL", unicodeRange="U+0041-U+005A", mimeType="application/x-font")]
		private var font8:Class;

		public function EmotionFractal() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, loadingComplete);
			loader.load(new URLRequest("/misc/emotion.json"));
		}

		public function loadingComplete(e:Event):void {
			var json:String = URLLoader(e.currentTarget).data;
			words = JSON.decode(json);

			TextShortcuts.init();
			init();
			addEventListener(MouseEvent.MOUSE_DOWN, init);
			stage.addEventListener(FullScreenEvent.FULL_SCREEN, init);

			var menu:ContextMenu = new ContextMenu();
			var item:ContextMenuItem = new ContextMenuItem("Full Screen");
			contextMenu = menu;
			menu.hideBuiltInItems();
			menu.customItems.push(item);
			menu.addEventListener(ContextMenuEvent.MENU_SELECT, function(e:ContextMenuEvent):void {
				switch (stage.displayState) {
					case "normal":
						item.enabled = true;
						break;
					case "fullScreen":
						item.enabled = false;
						break;
				}
			});
			item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e:ContextMenuEvent):void {
				stage.displayState = "fullScreen";
			});
		}

		public function init(...args):void {
			Tweener.removeAllTweens();
			while (numChildren) removeChildAt(0);
			queue = [new Rectangle(0, 0, stage.stageWidth, stage.stageHeight)];
			addEventListener(Event.ENTER_FRAME, fill);
		}

		public function fill(e:Event):void {
			var i:int = 0;
			while (queue.length > 0 && i < 3) {
				var rect:Rectangle = queue.pop();
				if (rect.width > 2 && rect.height > 2) {
					fillRegion(rect);
					i++;
				}
			}
			if (!queue.length) removeEventListener(Event.ENTER_FRAME, fill);
		}

		public function fillRegion(region:Rectangle):void {
			var tf:TextField = new TextField();
			var fmt:TextFormat = new TextFormat();
			fmt.font = choice(fonts);
			fmt.size = 24;
			fmt.letterSpacing = -0.3;
			fmt.rightMargin = 0.3;
			tf.defaultTextFormat = fmt;
			tf.text = choice(words).toUpperCase();
			tf.autoSize = "left";
			tf.embedFonts = true;
			tf.selectable = false;

			var bitmap:BitmapData = new BitmapData(tf.width, tf.height, true);
			bitmap.draw(tf);
			var bound:Rectangle = bitmap.getColorBoundsRect(0xFFFFFFFF, 0xFFFFFFFF, false);
			bitmap.dispose();

			var s:Number = region.width / bound.width * (Math.random() * 0.3 + 0.1);
			if (bound.height * s > region.height) s = region.height / bound.height;
			tf.scaleX = s;
			tf.scaleY = s;
			bound.x *= s;
			bound.y *= s;
			bound.width  *= s;
			bound.height *= s;

			switch (choice([1,2,3,4])) {
				case 1:
					tf.x = region.x - bound.x;
					tf.y = region.y - bound.y;
					queue.push(
						new Rectangle(region.x + bound.width, region.y, region.width - bound.width, bound.height),
						new Rectangle(region.x, region.y + bound.height, region.width, region.height - bound.height)
					);
					break;
				case 2:
					tf.x = region.x - bound.x;
					tf.y = region.bottom - bound.bottom;
					queue.push(
						new Rectangle(region.x + bound.width, region.bottom - bound.height, region.width - bound.width, bound.height),
						new Rectangle(region.x, region.y, region.width, region.height - bound.height)
					);
					break;
				case 3:
					tf.x = region.right - bound.right;
					tf.y = region.y - bound.y;
					queue.push(
						new Rectangle(region.x, region.y, region.width - bound.width, bound.height),
						new Rectangle(region.x, region.y + bound.height, region.width, region.height - bound.height)
					);
					break;
				case 4:
					tf.x = region.right - bound.right;
					tf.y = region.bottom - bound.bottom;
					queue.push(
						new Rectangle(region.x, region.bottom - bound.height, region.width - bound.width, bound.height),
						new Rectangle(region.x, region.y, region.width, region.height - bound.height)
					);
					break;
			}

			addChild(tf);
			Tweener.addTween(tf, {_text_color: 0xFFFFFF, time: 5, transition: "liner"});
		}

		private function choice(ary:Array):* {
			return ary[Math.floor(ary.length * Math.random())];
		}

	}
}

Filed in ActionScript No comments

パスが重なった時の描画

May 5th, 2009

SoundMixer.computeSpectrum() で遊ぶ

February 5th, 2009

Wonderfl が楽しい

December 28th, 2008

Emotion Fractal in AS3

December 21th, 2008

Pages

Archives

Categories

Links