<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>miniapp &#187; flash</title>
	<atom:link href="http://miniapp.org/blog/category/flash/feed/" rel="self" type="application/rss+xml" />
	<link>http://miniapp.org/blog</link>
	<description>ログ</description>
	<lastBuildDate>Mon, 06 Sep 2010 11:01:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>経路探索 + クォータービュー</title>
		<link>http://miniapp.org/blog/2010/09/06/248/</link>
		<comments>http://miniapp.org/blog/2010/09/06/248/#comments</comments>
		<pubDate>Mon, 06 Sep 2010 10:53:51 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2010/09/06/248/</guid>
		<description><![CDATA[				
				クォータービューでの経路探索を試作。いまさらですが。
				青い障害物を避け、クリックした箇所に赤い箱が移動します。
				障害物はランダムに配置されます。
				iso + A*
				見てお分かりの通り詳解 ActionScript 3.0アニメーションの3章・4章の組み合わせです。
				メインとなるソースコードのみ貼っておきます。他の使用しているクラスは書籍と同じなので省きます。
				
package {
	import com.friendsofed.isometric.DrawnIsoBox;
	import com.friendsofed.isometric.DrawnIsoTile;
	import com.friendsofed.isometric.IsoUtils;
	import com.friendsofed.isometric.IsoWorld;
	import com.friendsofed.isometric.Point3D;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
	import flash.geom.Point;
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Linear;
	import org.libspark.betweenas3.tweens._iTween;

	[SWF(backgroundColor=0xFFFFFF, width=830, height=500, frameRate=60)]
    public class GameIso extends Sprite {
		private static const _NUM_COLS:int [...]]]></description>
			<content:encoded><![CDATA[				<p><a target="_blank" href="http://miniapp.org/sample_flash/iso_astar/"><img src="http://miniapp.org/wordpress/wp-content/uploads/2010/09/iso1.png" alt="iso" title="iso" width="519" height="277" class="alignnone size-full wp-image-250" /></a></p>
				<p>クォータービューでの経路探索を試作。いまさらですが。<br />
				青い障害物を避け、クリックした箇所に赤い箱が移動します。<br />
				障害物はランダムに配置されます。<br />
				<a target="_blank" href="http://miniapp.org/sample_flash/iso_astar/">iso + A*</a></p>
				<p>見てお分かりの通り<a href="http://www.amazon.co.jp/gp/product/4873114373?ie=UTF8&#038;tag=miniapp-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=4873114373">詳解 ActionScript 3.0アニメーション</a><img src="http://www.assoc-amazon.jp/e/ir?t=miniapp-22&#038;l=as2&#038;o=9&#038;a=4873114373" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />の3章・4章の組み合わせです。</p>
				<p>メインとなるソースコードのみ貼っておきます。他の使用しているクラスは書籍と同じなので省きます。</p>
				<pre name="code" class="actionscript">
package {
	import com.friendsofed.isometric.DrawnIsoBox;
	import com.friendsofed.isometric.DrawnIsoTile;
	import com.friendsofed.isometric.IsoUtils;
	import com.friendsofed.isometric.IsoWorld;
	import com.friendsofed.isometric.Point3D;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
	import flash.geom.Point;
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Linear;
	import org.libspark.betweenas3.tweens._iTween;

	[SWF(backgroundColor=0xFFFFFF, width=830, height=500, frameRate=60)]
    public class GameIso extends Sprite {
		private static const _NUM_COLS:int = 20;
		private static const _NUM_ROWS:int = 20;
		private static const _CELL_SIZE:int = 20;
		private static const _BOX_HEIGHT:int = 22;

		private var _world:IsoWorld;
        private var _grid:Grid;
        private var _player:DrawnIsoBox;
        private var _index:int;
        private var _path:Array;
		private var _iTween:_iTween;

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

			_world = new IsoWorld();
            _world.x = stage.stageWidth / 2;
            _world.y = 50;
            addChild(_world);

            makePlayer();
            makeGrid();
			drawGrid();

            _world.addEventListener(MouseEvent.CLICK, onGridClick);
        }

        private function makePlayer():void {
			_player = new DrawnIsoBox(_CELL_SIZE, 0xff0000, _BOX_HEIGHT);
            _player.x = _CELL_SIZE * int(Math.random() * _NUM_COLS);
            _player.z = _CELL_SIZE * int(Math.random() * _NUM_ROWS);
            _world.addChildToWorld(_player);
        }

        private function makeGrid():void {
            _grid = new Grid(_NUM_COLS, _NUM_ROWS);
            for (var i:int = 0; i < 60; i++) {
                _grid.setWalkable(Math.floor(Math.random() * _NUM_COLS),
                                  Math.floor(Math.random() * _NUM_COLS),
                                  false);
            }
        }

        private function drawGrid():void {
            for (var i:int = 0; i < _grid.numCols; i++) {
                for (var j:int = 0; j < _grid.numRows; j++) {
                    var node:Node = _grid.getNode(i, j);
					if (node.walkable) {
						var tile:DrawnIsoTile = new DrawnIsoTile(_CELL_SIZE, 0xffffff);
						tile.position = new Point3D(i * _CELL_SIZE, 0, j * _CELL_SIZE);
						_world.addChildToFloor(tile);
					}
					else {
						var box:DrawnIsoBox = new DrawnIsoBox(_CELL_SIZE, 0x336699, _BOX_HEIGHT);
						box.x = i * _CELL_SIZE;
						box.z = j * _CELL_SIZE;
						_world.addChildToWorld(box);
					}
                }
            }
        }

        private function onGridClick(event:MouseEvent):void {
			var p:Point3D = IsoUtils.screenToIso(new Point(_world.mouseX, _world.mouseY));

			var xpos:int = Math.floor((p.x + _CELL_SIZE / 2) / _CELL_SIZE);
            var ypos:int = Math.floor((p.z + _CELL_SIZE / 2) / _CELL_SIZE);
            _grid.setEndNode(xpos, ypos);

			xpos = Math.floor((_player.x + _CELL_SIZE / 2) / _CELL_SIZE);
            ypos = Math.floor((_player.z + _CELL_SIZE / 2) / _CELL_SIZE);

            _grid.setStartNode(xpos, ypos);
            findPath();
        }

        /**
         * AStarのインスタンスを生成して、経路探索に用いる。
         */
        private function findPath():void {
            var astar:AStar = new AStar();
            if (astar.findPath(_grid)) {
				if(_iTween &#038;&#038; _iTween.isPlaying) _iTween.stop();
                _path = astar.path;
                _index = -1;
				move();
            }
        }

		private function move():void {
			if (_path[++_index]) {
				var targetX:Number = _path[_index].x * _CELL_SIZE;
				var targetY:Number = _path[_index].y * _CELL_SIZE;

				_iTween = BetweenAS3.tween(_player, { x: targetX, z:targetY }, null, 0.1, Linear.easeNone);
				_iTween.onComplete = move;
				_iTween.onUpdate = _world.sort;
				_iTween.play();
            }
		}
    }
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2010/09/06/248/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>テトリスを作ってみた</title>
		<link>http://miniapp.org/blog/2010/08/31/233/</link>
		<comments>http://miniapp.org/blog/2010/08/31/233/#comments</comments>
		<pubDate>Tue, 31 Aug 2010 13:45:30 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[game]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2010/08/31/233/</guid>
		<description><![CDATA[				ふとテトリスのプログラムに興味を持ち、練習がてらに作ってみました。
				なんの装飾も演出ない、むき出し状態です。
				スペースで回転、十字キーで移動。
				
				去年のCEDECに行かれた方がいて、その時の資料を頂いたんですが、
				その資料の中にテトリスの作り方が載っていたので、それを参考にしてみました。
				資料を書いた方はゲームプログラマになる前に覚えておきたい技術の著者の方です。この方は凄いですね‥。
				たかがテトリスですが、かなり勉強になりました。
				色々な実装方法があるようで、奥が深いですね。
				例えばflashrodさんのTetrisがありますが、ソースが短いです。
				かなりテクニカルな事をしてるっぽい感じで、ぱっと見、何をしているのか分かりません。
				さらに、500バイト以下のテトリスとかありますしね。
]]></description>
			<content:encoded><![CDATA[				<p>ふとテトリスのプログラムに興味を持ち、練習がてらに作ってみました。</p>
				<p>なんの装飾も演出ない、むき出し状態です。<br />
				スペースで回転、十字キーで移動。</p>
				<div style="text-align:center;width:465px;"><iframe title="tetris - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/8vkq" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.net/c/8vkq"></a></div>
				<p>去年の<a href="http://cedec.cesa.or.jp/2010/">CEDEC</a>に行かれた方がいて、その時の資料を頂いたんですが、<br />
				その資料の中にテトリスの作り方が載っていたので、それを参考にしてみました。<br />
				資料を書いた方は<a href="http://www.amazon.co.jp/gp/product/4798021180?ie=UTF8&#038;tag=miniapp-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=4798021180">ゲームプログラマになる前に覚えておきたい技術</a><img src="http://www.assoc-amazon.jp/e/ir?t=miniapp-22&#038;l=as2&#038;o=9&#038;a=4798021180" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />の著者の方です。この方は凄いですね‥。</p>
				<p>たかがテトリスですが、かなり勉強になりました。<br />
				色々な実装方法があるようで、奥が深いですね。</p>
				<p>例えば<a href="http://wonderfl.net/c/d3L4">flashrodさんのTetris</a>がありますが、ソースが短いです。<br />
				かなりテクニカルな事をしてるっぽい感じで、ぱっと見、何をしているのか分かりません。</p>
				<p>さらに、<a href="http://zapanet.info/blog/item/1130">500バイト以下のテトリス</a>とかありますしね。</p>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2010/08/31/233/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>マウスで操作出来るスリットスキャン</title>
		<link>http://miniapp.org/blog/2010/01/15/176/</link>
		<comments>http://miniapp.org/blog/2010/01/15/176/#comments</comments>
		<pubDate>Fri, 15 Jan 2010 10:44:49 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2010/01/15/176/</guid>
		<description><![CDATA[				スリットスキャンに、
				マウスのインタラクションを付けるとどうなるかな、と思い、作ってみました。
				
				最初は意識していなかったんだけど、以前教えてもらったこちらに似てしまった。
				BitmapData::drawで毎フレーム動画をキャプチャし、配列に保存しています。
				今回は過去400枚を保存しています。かなり多いと思うんですが、いけるもんですねぇ。
				映像を縦1pxづつに区切って管理し、それぞれに何フレーム早めるか、遅らせるかを管理しています。
				デフォルトでは保存したキャプチャの真ん中を表示。(今回は400枚保存してるから、200枚目を表示。)
				BetweenAs3のイージングを変えるとまた違った感じになります。
				ちょっとハマったのが、NetStreamインスタンスをローカル変数にすると、drawする時に下のセキュリティエラーが出る事。
				SecurityError: Error #2123: セキュリティサンドボックス侵害 : BitmapData.draw: file:///hoge.swf は unknown URL にアクセスできません。ポリシーファイルへのアクセスも許可されていません。
drawする時にNetStreamインスタンスを参照して何かチェックしてるんですかね？
すぐにエラーが出ずに、しばらくすると出るのも謎でした。
一番良かったのは、絶好の映像ネタが見つかった事w
背景が固定で人が動く映像が見つかって良かった。
背景まで動いているとグチャグチャになりすぎてしまい、良く分からない映像になってしまいます。
ムーンウォークしてる人は、もちろん僕じゃないですよ！w
]]></description>
			<content:encoded><![CDATA[				<p><a href="http://www.youtube.com/watch?v=rzA3QBioYw4">スリットスキャン</a>に、<br />
				マウスのインタラクションを付けるとどうなるかな、と思い、作ってみました。</p>
				<div style="text-align:center;width:465px;"><iframe title="マウスで操作するSlitScan - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/18f74cae690c882e0765189fedef2150f6d55638" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.net/code/18f74cae690c882e0765189fedef2150f6d55638" title="flash on 2010-1-15 - wonderfl build flash online"></a></div>
				<p>最初は意識していなかったんだけど、以前教えてもらった<a href="http://www.k2.t.u-tokyo.ac.jp/members/alvaro/Khronos/Khronos_P5/Khronos_Applets.htm">こちら</a>に似てしまった。</p>
				<p>BitmapData::drawで毎フレーム動画をキャプチャし、配列に保存しています。<br />
				今回は過去400枚を保存しています。かなり多いと思うんですが、いけるもんですねぇ。</p>
				<p>映像を縦1pxづつに区切って管理し、それぞれに何フレーム早めるか、遅らせるかを管理しています。<br />
				デフォルトでは保存したキャプチャの真ん中を表示。(今回は400枚保存してるから、200枚目を表示。)</p>
				<p>BetweenAs3のイージングを変えるとまた違った感じになります。</p>
				<p>ちょっとハマったのが、NetStreamインスタンスをローカル変数にすると、drawする時に下のセキュリティエラーが出る事。</p>
				<pre>SecurityError: Error #2123: セキュリティサンドボックス侵害 : BitmapData.draw: file:///hoge.swf は unknown URL にアクセスできません。ポリシーファイルへのアクセスも許可されていません。</pre>
<p>drawする時にNetStreamインスタンスを参照して何かチェックしてるんですかね？<br />
すぐにエラーが出ずに、しばらくすると出るのも謎でした。</p>
<p>一番良かったのは、絶好の映像ネタが見つかった事w<br />
背景が固定で人が動く映像が見つかって良かった。<br />
背景まで動いているとグチャグチャになりすぎてしまい、良く分からない映像になってしまいます。<br />
ムーンウォークしてる人は、もちろん僕じゃないですよ！w</p>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2010/01/15/176/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fluid</title>
		<link>http://miniapp.org/blog/2009/10/22/131/</link>
		<comments>http://miniapp.org/blog/2009/10/22/131/#comments</comments>
		<pubDate>Thu, 22 Oct 2009 13:09:22 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2009/10/22/131/</guid>
		<description><![CDATA[				前回asに書き直しただけのFluid \ Learning \ Processing 1.0のソースを解体して整理。クラス構造も大幅に変えてます。
				それから、オリジナルはマス目に色を塗って動きを出していますが、パーティクルを表示して動かす形に変更しました。
				オリジナルは作製途中なのかな、って感じがしました。。
				気泡っぽい感じが出た。
				流体パーティクル
]]></description>
			<content:encoded><![CDATA[				<p><a href="http://miniapp.org/blog/2009/10/09/108/">前回</a>asに書き直しただけの<a href="http://processing.org/learning/topics/fluid.html">Fluid \ Learning \ Processing 1.0</a>のソースを解体して整理。クラス構造も大幅に変えてます。<br />
				それから、オリジナルはマス目に色を塗って動きを出していますが、パーティクルを表示して動かす形に変更しました。</p>
				<p>オリジナルは作製途中なのかな、って感じがしました。。</p>
				<p>気泡っぽい感じが出た。</p>
				<div style="text-align:center;width:465px;"><iframe title="flash on 2009-10-22 - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/23f89f2a5e8d9df21c8a72210c2a22c9c7490600" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.net/code/23f89f2a5e8d9df21c8a72210c2a22c9c7490600" title="flash on 2009-10-22 - wonderfl build flash online">流体パーティクル</a></div>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2009/10/22/131/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Processingの流体サンプルをasに</title>
		<link>http://miniapp.org/blog/2009/10/09/108/</link>
		<comments>http://miniapp.org/blog/2009/10/09/108/#comments</comments>
		<pubDate>Fri, 09 Oct 2009 14:35:04 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>
		<category><![CDATA[processing]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2009/10/09/108/</guid>
		<description><![CDATA[				[Flash]流体っぽいのを作ろうと思った &#124; blog ViolentCoding
				を見てずっと気になっていたんですが、同記事で紹介されている
				Fluid \ Learning \ Processing 1.0
				をそのままas3に持ってきてみました。
				Processingの流体サンプルをそのまま持ってきたもの &#8211; wonderfl build flash online
				変数宣言が微妙に違うぐらいで、そこを直せば割とあっさり動きました。
				最適化してないせいもあるけど、やっぱFlashは重いですね。
				変数名なんかはそのままです。
				スパイス的な謎の定数が結構あって完全に読み解くのは大変そう。
				しかし紹介して下さったe_s_jpさんが作ってるDisplacementMapFilterのバージョンですが、
				よくあそこまで膨らませたなぁ、と思います。
				凄いす。
				僕も、processing.orgから持ってきたコードを、もうちょっと分かりやすく分解して理解してみようと思います。
				変数名なんかを自分用に置き換えただけなのはコレ。
				
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageQuality;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;

	[SWF(backgroundColor="0x0", width="465", height="465", frameRate="60")]
	public class Main2 extends Sprite {

		public function Main2():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private var pmouseX:Number;
		private var pmouseY:Number;

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.quality = StageQuality.MEDIUM;

			addChild(new Bitmap(canvas));

			numCols = width / [...]]]></description>
			<content:encoded><![CDATA[				<p><a href="http://violentcoding.com/blog/2008/07/26/archives/135">[Flash]流体っぽいのを作ろうと思った | blog ViolentCoding</a><br />
				を見てずっと気になっていたんですが、同記事で紹介されている</p>
				<p><a href="http://processing.org/learning/topics/fluid.html">Fluid \ Learning \ Processing 1.0</a><br />
				をそのままas3に持ってきてみました。</p>
				<div style="text-align:center;width:465px;"><iframe title="Processingの流体サンプルをそのまま持ってきたもの - wonderfl build flash online" scrolling="no" src="http://wonderfl.net/blogparts/1cd3332c01c3d8f720fbb03560a9d7e0818fc10e" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.net/code/1cd3332c01c3d8f720fbb03560a9d7e0818fc10e" title="Processingの流体サンプルをそのまま持ってきたもの - wonderfl build flash online">Processingの流体サンプルをそのまま持ってきたもの &#8211; wonderfl build flash online</a></div>
				<p>変数宣言が微妙に違うぐらいで、そこを直せば割とあっさり動きました。<br />
				最適化してないせいもあるけど、やっぱFlashは重いですね。<br />
				変数名なんかはそのままです。<br />
				スパイス的な謎の定数が結構あって完全に読み解くのは大変そう。</p>
				<p>しかし紹介して下さったe_s_jpさんが作ってるDisplacementMapFilterのバージョンですが、<br />
				よくあそこまで膨らませたなぁ、と思います。<br />
				凄いす。</p>
				<p>僕も、processing.orgから持ってきたコードを、もうちょっと分かりやすく分解して理解してみようと思います。</p>
				<p>変数名なんかを自分用に置き換えただけなのはコレ。</p>
				<pre name="code" class="actionscript">
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageQuality;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;

	[SWF(backgroundColor="0x0", width="465", height="465", frameRate="60")]
	public class Main2 extends Sprite {

		public function Main2():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private var pmouseX:Number;
		private var pmouseY:Number;

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.quality = StageQuality.MEDIUM;

			addChild(new Bitmap(canvas));

			numCols = width / resolution;
			numRows = height / resolution;

			vsquaresVectors = new Vector.&gt;(numRows + 1);
			vbuffersVectors = new Vector.&gt;(numRows + 1);

			for (var i:int = 0; i &lt; numParticles; i++) {
				particles[i] = new Particle(Math.random() * width, Math.random() * height);
			}

			for (var col:int = 0; col &lt;= numCols; col++) {
				vsquaresVectors[col] = new Vector.(numCols + 1);
				vbuffersVectors[col] = new Vector.(numCols + 1);
				for (var row:int = 0; row &lt;= numRows; row++) {
					vsquaresVectors[col][row] = new Vsquare(col * resolution, row * resolution);
					vbuffersVectors[col][row] = new Vbuffer(col * resolution, row * resolution);
				}

				vsquaresVectors[col].fixed = true;//付け足し
				vbuffersVectors[col].fixed = true;//付け足し
			}

			vsquaresVectors.fixed = true;//付け足し
			vbuffersVectors.fixed = true;//付け足し

			addEventListener(Event.ENTER_FRAME, draw);
		}

		private function draw(e:Event):void {
			mouseX = this.mouseX;
			mouseY = this.mouseY;

			var axvel:int = mouseX - pmouseX;
			var ayvel:int = mouseY - pmouseY;

			mouseXvel = (axvel != mouseXvel) ? axvel : 0;
			mouseYvel = (ayvel != mouseYvel) ? ayvel : 0;

			for (var col:int = 0; col &lt; numCols; col++) {
				for (var row:int = 0; row &lt; numRows; row++) {
					vbuffersVectors[col][row].updatebuf(col, row);
					//何にも無い色の設定
					vsquaresVectors[col][row].color = 32;
				}
			}

			for each(var p:Particle in particles) {
				p.updatepos();
			}

			canvas.lock();//付け足し
			for (col = 0; col &lt; numCols; col++) {
				for (row = 0; row &lt; numRows; row++) {
					vsquaresVectors[col][row].addbuffer(col, row);
					vsquaresVectors[col][row].updatevels(axvel, ayvel);
					vsquaresVectors[col][row].display(col, row);
				}
			}
			canvas.unlock();//付け足し

			pmouseX = mouseX;
			pmouseY = mouseY;
		}

		private function mouseDownHandler(e:Event):void {
			mousePressed = true;
		}

		private function mouseUpHandler(e:Event):void {
			mousePressed = false;
		}
	}

}

import flash.display.BitmapData;
var width:int = 200;
var height:int = 200;
var mousePressed:Boolean;
var mouseX:Number = 0;
var mouseY:Number = 0;
var resolution:int = 5;
var penSize:int = 30;
var numCols:int;
var numRows:int;
var numParticles:int = 7000;
var vsquaresVectors:Vector.&gt;;
var vbuffersVectors:Vector.&gt;;
var particles:Vector. = new Vector.(numParticles, true);
var pcount:int = 0;
var mouseXvel:int = 0;
var mouseYvel:int = 0;
var canvas:BitmapData = new BitmapData(width, height, false, 0x0);

class Particle{
	public function Particle(xIn:Number, yIn:Number) {
		x = xIn;
		y = yIn;
	}

	public var x:Number;
	public var y:Number;
	public var xvel:Number = 0;
	public var yvel:Number = 0;
	public var pos:int = 0;

	public function updatepos():void {
		//var col1:Number;//使われていない
		if (x &gt; 0 &amp;&amp; x &lt; width &amp;&amp; y &gt; 0 &amp;&amp; y &lt; height) {
			var col:int = int(x / resolution);//自身が属しているvsquareを見つける
			var row:int = int(y / resolution);
			var vsquare:Vsquare = vsquaresVectors[col][row];

			var ax:Number = (x % resolution) / resolution;
			var ay:Number = (y % resolution) / resolution;

			xvel += (1 - ax) * vsquaresVectors[col][row].xvel * 0.05;
			yvel += (1 - ay) * vsquaresVectors[col][row].yvel * 0.05;

			xvel += ax * vsquaresVectors[col + 1][row].xvel * 0.05;
			yvel += ax * vsquaresVectors[col + 1][row].yvel * 0.05;

			xvel += ay * vsquaresVectors[col][row + 1].xvel * 0.05;
			yvel += ay * vsquaresVectors[col][row + 1].yvel * 0.05;

			//自身がいるマスの色を濃くする
			vsquare.color += 4;

			x += xvel;
			y += yvel;
		}
		else {
			x = Math.random() * width;
			y = Math.random() * height;
			xvel = 0;
			yvel = 0;
		}

		xvel *= 0.5;
		yvel *= 0.5;
	}
}

class Vbuffer {
	public function Vbuffer(xIn:int, yIn:int) {
		x = xIn;
		y = yIn;
		pressureX = 0;
		pressureY = 0;
	}

	public var x:int;
	public var y:int;
	public var xvel:Number = 0;
	public var yvel:Number = 0;
	public var pressureX:Number = 0;
	public var pressureY:Number = 0;
	public var pressure:Number = 0;

	public function updatebuf(col:int, row:int):void {
		if (col &gt; 0 &amp;&amp; col &lt; numCols &amp;&amp; row &gt; 0 &amp;&amp; row &lt; numRows) {
			pressureX = (
				  vsquaresVectors[col - 1][row - 1].xvel * 0.5
				+ vsquaresVectors[col - 1][row].xvel
				+ vsquaresVectors[col - 1][row + 1].xvel * 0.5
				- vsquaresVectors[col + 1][row - 1].xvel * 0.5
				- vsquaresVectors[col + 1][row].xvel
				- vsquaresVectors[col + 1][row + 1].xvel * 0.5
			);

			pressureY = (
				  vsquaresVectors[col - 1][row - 1].yvel * 0.5
				+ vsquaresVectors[col][row - 1].yvel
				+ vsquaresVectors[col + 1][row - 1].yvel * 0.5
				- vsquaresVectors[col - 1][row + 1].yvel * 0.5
				- vsquaresVectors[col][row + 1].yvel
				- vsquaresVectors[col + 1][row + 1].yvel * 0.5
			);

			pressure = (pressureX + pressureY) * 0.25;
		}
	}
}

import flash.geom.Rectangle;
class Vsquare{

	public function Vsquare(xIn:int, yIn:int) {
		x = xIn;
		y = yIn;
	}

	public var x:int;
	public var y:int;
	public var xvel:Number = 0;
	public var yvel:Number = 0;
	public var color:Number = 0;

	public function addbuffer(col:int, row:int):void {
		if (col &gt; 0 &amp;&amp; col &lt; numCols &amp;&amp; row &gt; 0 &amp;&amp; row &lt; numRows) {
			xvel += (
				  vbuffersVectors[col - 1][row - 1].pressure * 0.5
				+ vbuffersVectors[col - 1][row].pressure
				+ vbuffersVectors[col - 1][row + 1].pressure * 0.5
				- vbuffersVectors[col + 1][row - 1].pressure * 0.5
				- vbuffersVectors[col + 1][row].pressure
				- vbuffersVectors[col + 1][row + 1].pressure * 0.5
			) * 0.25;

			yvel += (
				  vbuffersVectors[col - 1][row - 1].pressure * 0.5
				+ vbuffersVectors[col][row - 1].pressure
				+ vbuffersVectors[col + 1][row - 1].pressure * 0.5
				- vbuffersVectors[col - 1][row + 1].pressure * 0.5
				- vbuffersVectors[col][row + 1].pressure
				- vbuffersVectors[col + 1][row + 1].pressure * 0.5
			) * 0.25;
		}
	}

	public function updatevels(mvelX:int, mvelY:int):void {
		if (mousePressed) {
			var dx:Number = x - mouseX;
			var dy:Number = y - mouseY;

			var dist:Number = Math.sqrt(dy * dy + dx * dx);
			if (dist &lt; penSize) {
				if (dist &lt; 4) dist = penSize;
				var mod:Number = penSize / dist;
				xvel += mvelX * mod;
				yvel += mvelY * mod;
			}
		}

		xvel *= 0.99;
		yvel *= 0.99;
	}

	public function display(i:int, u:int):void {
		var tempColor:uint = 0;

		if (color &gt; 255) color = 255;
		if (i &gt; 0 &amp;&amp; i &lt; numCols - 1 &amp;&amp; u &gt; 0 &amp;&amp; u &lt; numRows - 1) {
			tempColor = (
				  vsquaresVectors[i][u + 1].color
				+ vsquaresVectors[i + 1][u].color
				+ vsquaresVectors[i + 1][u + 1].color * 0.5
			) * 0.4;
			tempColor = int(tempColor + color * 0.5);
		}
		else {
			tempColor = int(color);
		}

		var rgb:uint = tempColor &lt;&lt; 16 | tempColor &lt;&lt; 8 | tempColor;
		canvas.fillRect(new Rectangle(x, y, resolution, resolution), rgb);
	}
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2009/10/09/108/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>うずまきエフェクト DisplacementMapFilterで</title>
		<link>http://miniapp.org/blog/2009/05/12/107/</link>
		<comments>http://miniapp.org/blog/2009/05/12/107/#comments</comments>
		<pubDate>Tue, 12 May 2009 11:42:45 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2009/05/12/107/</guid>
		<description><![CDATA[				うずまき。
				うずまき &#8211; wonderfl build flash online
				球もつくりました。けど、これは偶然うまくいってる。
				mapBitmap作る部分が間違ってると思う。createDMF関数の中がおかしい。
				なので参考にしない方がいいです。すみません。
				ひょっとすると渦巻きも…？
				DisplacementMapFilter 球 &#8211; wonderfl build flash online
]]></description>
			<content:encoded><![CDATA[				<p>うずまき。</p>
				<div style="text-align:center;width:465px;"><iframe title="うずまき - wonderfl build flash online" src="http://wonderfl.kayac.com/blogparts/489b1698cbdd261c048b3d085ef9561f576701a9" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.kayac.com/code/489b1698cbdd261c048b3d085ef9561f576701a9" title="うずまき - wonderfl build flash online">うずまき &#8211; wonderfl build flash online</a></div>
				<p>球もつくりました。けど、これは偶然うまくいってる。<br />
				mapBitmap作る部分が間違ってると思う。createDMF関数の中がおかしい。<br />
				なので参考にしない方がいいです。すみません。<br />
				ひょっとすると渦巻きも…？</p>
				<div style="text-align:center;width:465px;"><iframe title="DisplacementMapFilter 球 - wonderfl build flash online" src="http://wonderfl.kayac.com/blogparts/66814ea6e4f251b38b3723aa8f67b0b0dc01431d" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.kayac.com/code/66814ea6e4f251b38b3723aa8f67b0b0dc01431d" title="DisplacementMapFilter 球 - wonderfl build flash online">DisplacementMapFilter 球 &#8211; wonderfl build flash online</a></div>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2009/05/12/107/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DisplacementMapFilterのメモ</title>
		<link>http://miniapp.org/blog/2009/05/04/106/</link>
		<comments>http://miniapp.org/blog/2009/05/04/106/#comments</comments>
		<pubDate>Mon, 04 May 2009 11:18:00 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2009/05/04/106/</guid>
		<description><![CDATA[				
								追記 2009/05/11
								間違ってるとこも多いです。ちょこちょこ直していきます。
				
				
				かなりくどく書きました。だらだらです。helpが意味不明すぎる。
				
				
				なんでも自由に変形できる万能フィルタではない。誤解してた。そういう変形は今だとpixel Bender使うのかな…？
				そうするとDisplacementMapFilterの使い道ってすごく限られてくるのかと疑問に思ってきた。
				
				おおまかな考え方
				通常だと、現在地点にどの位の値を加えれば目的地に着くか? で考えるけど、DisplacementMapFilterだと逆。
								目的地に引き寄せる力は何か?を考える。 その力を色に変換する。
				例えば
				
				現在地 x = 10の地点を、目的地 x = 50に移したいとする。
				
								《通常の考え方》
								普通にxに40足す。
								
				《DisplacementMapFilterの考え方》
								フィルタによって x = 50に移る点は、x = 10の地点だとしたい。 そうするためにはx = -40の力を生む色を塗る。
								色は、目的地に塗る。(この例ではx = 50の地点)
				
				DisplacementMapFilterでの色の決め方
				ヘルプには
				
				このフィルタでは次の式を使用します。
								dstPixel[x, y] = srcPixel[x + ((componentX(x, y) &#8211; 128) * scaleX) / 256, y + ((componentY(x, y) &#8211; 128) *scaleY) / 256)
								
				
				と書いてある。
								flashPlayerはこの式を使って変形する、っていう事かな?
				どういう事か？
				色の強さは0～255の256段階。 このままだとマイナス方向が指定出来ないため、 真ん中の128を中間地点とする。
				このhelpには中間値は127と書いてある。間違い？？
				真ん中からの離れ具合から強さを決める。 そこから128離れるとき、つまり256の時、 50パーセントの力になる(でも色の最大値は255なので僅かな誤差が出る)。
								同様に、-128離れるとき、-50%の力になる。(100パーセントではないので注意。) 
				色の決め方の式
				
				
								上の考え方から、
				移動させる割合 = 移動させる距離 / 最大移動距離
				色の強さ = (0x80 * 移動させる割合) [...]]]></description>
			<content:encoded><![CDATA[				<div class="add">
								追記 2009/05/11<br />
								間違ってるとこも多いです。ちょこちょこ直していきます。
				</div>
				<p>
				かなりくどく書きました。だらだらです。<a href="http://livedocs.adobe.com/flex/3_jp/langref/flash/filters/DisplacementMapFilter.html">help</a>が意味不明すぎる。
				</p>
				<p>
				なんでも自由に変形できる万能フィルタではない。誤解してた。そういう変形は今だとpixel Bender使うのかな…？<br />
				そうするとDisplacementMapFilterの使い道ってすごく限られてくるのかと疑問に思ってきた。
				</p>
				<h4>おおまかな考え方</h4>
				<p>通常だと、現在地点にどの位の値を加えれば目的地に着くか? で考えるけど、DisplacementMapFilterだと逆。<br />
								目的地に引き寄せる力は何か?を考える。 その力を色に変換する。</p>
				<h6>例えば</h6>
				<div class="add">
				<p>現在地 x = 10の地点を、目的地 x = 50に移したいとする。</p>
				<p>
								<strong>《通常の考え方》</strong><br />
								普通にxに40足す。
								</p>
				<p><strong>《DisplacementMapFilterの考え方》</strong><br />
								フィルタによって x = 50に移る点は、x = 10の地点だとしたい。 そうするためにはx = -40の力を生む色を塗る。</p>
				<p>				色は、目的地に塗る。(この例ではx = 50の地点)</p>
				</div>
				<h4>DisplacementMapFilterでの色の決め方</h4>
				<p>ヘルプには</p>
				<blockquote>
				<p>このフィルタでは次の式を使用します。<br />
								dstPixel[x, y] = srcPixel[x + ((componentX(x, y) &#8211; 128) * scaleX) / 256, y + ((componentY(x, y) &#8211; 128) *scaleY) / 256)
								</p>
				</blockquote>
				<p>と書いてある。<br />
								flashPlayerはこの式を使って変形する、っていう事かな?</p>
				<h4>どういう事か？</h4>
				<p>色の強さは0～255の256段階。 このままだとマイナス方向が指定出来ないため、 真ん中の128を中間地点とする。</p>
				<p><a href="http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7da2.html">このhelpには中間値は127と書いてある。</a>間違い？？</p>
				<p>真ん中からの離れ具合から強さを決める。 そこから128離れるとき、つまり256の時、 50パーセントの力になる(でも色の最大値は255なので僅かな誤差が出る)。<br />
								同様に、-128離れるとき、-50%の力になる。(100パーセントではないので注意。) </p>
				<h4>色の決め方の式</h4>
				<div class="add">
				<p>
								上の考え方から、</p>
				<p><code><strong>移動させる割合</strong> = 移動させる距離 / 最大移動距離<br />
				<strong>色の強さ</strong> = (0x80 * <strong>移動させる割合</strong>) + 0x80<br />
				<br />
				このままだと最大値が0x100になってしまい、色の最大値である0xFFを超えてしまう。そのため、中間値を0x7Fとする。<a href="http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7da2.html">127と書いてある</a>のはこのこと？</p>
				<p><strong>色の強さ</strong> = (0x80 * 移動させる割合) + <strong>0x7F</strong></p>
				<p>※  0x7Fは10進数だと127、0x80は10進数だと128</code>
								</p>
				</div>
				<h4>例</h4>
				<p>
								x方向の移動のみ考える。<br />
								現在の座標は(0, 0)で、x方向に100px移動させたいとする。 まず目的地である(100, 0)の地点に色を塗ることにする。 この色を塗った地点に吸い寄せる力の色に青を使うとする。
								</p>
				<h6>目的地に引き寄せられるような色を決める</h6>
				<p>
								問題は何色にするか。 DisplacementMapFilterを作製する際、scaleX, scaleYという値を決める。<br />
								普通、100%の際にmaxの値を取るものだが、 DisplacementMapFilterはmaxが50%という変な設定なので、 scaleX, scaleYには取り得る最大値の2倍を設定。<br />
								ここではscaleXの値を100 * 2 = 200とする。<br />
								(0，0)から(100、0)に移動させたい。 ここは逆に考えます。 (100，0)の地点に吸い寄せられる地点を(0，0)にしたい、と
								</p>
				<p>
								そのように設定をするためには、何色で塗ればいいのか?<br />
								x方向の距離は、目的地を基準として考えるので、0 &#8211; 100 = -100 (目的地から-100すると現在地になるという事)<br />
								移動させる距離を、最大値との比率で考える。 すると、-100 / 200 = 0.5<br />
								さっきの色の話を見直すと、-50%の力を作る色は、 中間地点の128から-50%の値である0&#215;0。
								</p>
				<p>
								フィルタを作るときは、大体これをfor文でmapBitmapの全ピクセルに実行する。<br />
								各ピクセルで、適用先のピクセルを求めていく。
								</p>
				<h4>色を決める式を、ヘルプに書いてある式から求めると</h4>
				<p>先に挙げた式でも、こちらでもやってることは一緒。<br />
				先に出たヘルプの式をxの値だけに絞って整理してみる。
								</p>
				<div class="add">
				<p><code>フィルタが適用されるx値 = 移動先のx値 + ((色の強さ - 0x80) * dmf最大値) / 0x100<code></p>
				<p>(dmf最大値はDisplacementMapFilterのscaleX, scaleYの値。変形する際の最大移動距離の2倍にする。)</p>
				<p>            ↓変形</p>
				<p><code>フィルタが適用されるx値 - 移動先のx値 = ((色の強さ - 0x80) * dmf最大値) / 0x100</code></p>
				<p>            ↓変形<code>(フィルタが適用されるx値 - 移動先のx値 を 移動させる距離 に置き換え。)</code></p>
				<p><code>移動させる距離 = ((色の強さ - 0x80) * dmf最大値) / 0x100</code></p>
				<p>            ↓変形</p>
				<p><code>移動させる距離 * 0x100 = (色の強さ - 0x80) * dmf最大値</code></p>
				<p>            ↓変形</p>
				<p><code>( 移動させる距離 * 0x100 ) / dmf最大値 = 色の強さ - 0x80</code></p>
				<p>            ↓変形</p>
				<p><code>( 移動させる距離 * 0x100 ) / dmf最大値 + 0x80 = 色の強さ</code></p>
				<p>入れ替えて、</p>
				<p><code>色の強さ = ( 移動させる距離 * 0x100 ) / dmf最大値 + 0x80</code></p>
				<p>このままだと最大値が0x100になってしまい、色の最大値である0xFFを超えてしまう。そのため、中間値を0x7Fとする。</p>
				<p><code>色の強さ = ( 移動させる距離 * 0x100 ) / dmf最大値 + 0x7F</code>
					</div>
				</p>
				<p>これらを使ったテスト。マウス座標に移す変形をする。<br />
								ステージサイズ横100 * 縦100で作ってるので拡大して表示されます。</p>
				<div style="text-align:center;width:465px;"><iframe title="【修正】DisplacementMapFilterのテスト - wonderfl build flash online" src="http://wonderfl.kayac.com/blogparts/9fc46f2af74b8f2692600eaf30991e1227388e95" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.kayac.com/code/9fc46f2af74b8f2692600eaf30991e1227388e95" title="【修正】DisplacementMapFilterのテスト - wonderfl build flash online">【修正】DisplacementMapFilterのテスト - wonderfl build flash online</a></div>
				<p>次回はよくある球へのマッピングをやってみます。</p>
				<div class="add">
								追記 2009/05/11<br />
								色の決め方の式を追加。</p>
				<p>				その式つかったwonderflにリンク差し替え。
							</p></div>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2009/05/04/106/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Clothシミュレーションもどき</title>
		<link>http://miniapp.org/blog/2009/04/05/102/</link>
		<comments>http://miniapp.org/blog/2009/04/05/102/#comments</comments>
		<pubDate>Sat, 04 Apr 2009 15:25:06 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2009/04/05/102/</guid>
		<description><![CDATA[				
				2009/04/29 追記
				２Dだけど、出来たっぽいです。回転の問題もクリアできました。
				布 :改善2 &#8211; wonderfl build flash online
				
				何回か布っぽいのを作るシリーズをやってましたが、
				今までの物は、ちゃんと点どうしが連結されたものではありませんでした。
				今回はちゃんと連結して布のシミュレーションぽい物ができたのでUPします。
				しかし、あくまで『それらしい物』であって、z軸も考慮してませんし、怪しい部分が多々あります。
				最近Clothシミュレーションよく見ますね。js実装のとか。
				2009-02-11 &#8211; 最速チュパカブラ研究会
				解説も丁寧で凄いなぁ。ソース読んで勉強しよう。
				初wonderFlです。
				ドラッグで移動、ctrlキー押しながらドラッグで固定。
				固定した点をダブルクリックで解除です。
				
				布 &#8211; wonderfl build flash online
				
				最初に格子状に並べているので布のようですが、
				最初に何らかの形に並べれば、その形を維持するように動くはずです。
				jointメソッドで隣り合った点どうしを連結します。
				ここがどうしても冗長でわかりにくくなってしまってます。
				コメントアウトで色々書いておきました。
				
				2009/04/13 追記
				ずいぶん改善できました。
				布 : 改善 &#124; wonderfl build flash online最初は８方向に対して連結していましたが、上下左右の４方向でOKでした。
				ソースも短くなり、ずいぶん分かりやすくなりました。
				上の2009-02-11 &#8211; 最速チュパカブラ研究会様のソースを参考にしてます。やっぱ凄いです。
				
				一番最初に布っぽい物を作った時も、それぞれを連結するって事は考えたんですが、やり方が思いつかなった。
				今回は実直に総当たりな感じで試しにやってみたら上手くいきました。
				上手いやり方を考えるのもいいけど、泥臭いやりかたで試すの大事ですね。
				Player10から加わったGraphicsPathCommandを使ってラインを描画するバージョンも作ってみました。
				
				追記
				wonderflの使い方が良く分かっておらず、forkしないで新しく作ってました。そちら削除させてもらいました。favoriteに入れてくれた方がいらっしゃったのですが、ごめんなさい！
				
				でも少し重くなりますね。今回はこの方法は適してないんでしょうね。
				drawLine関数だけ違います。他の部分は全く同じ。
				あとはテクスチャですが、テクスチャを貼るのは結構簡単なようです。
				AdvancED ActionScript 3.0 Animationに丁寧に書かれてました。
				球体のテクスチャ付き３D描画についても書かれてますよ！
				それから、回転させるって以前言ったものの、まだ回転させる方法が思い浮かびません。
				ためしに思いつきで作ったのですが、上手く動きませんでした。
				なにをもって回転とするのかが良くわかってません。
				回転の失敗作も近いうちにUPしようと思います。
]]></description>
			<content:encoded><![CDATA[				<div class="add">
				<em>2009/04/29 追記</em><br />
				２Dだけど、出来たっぽいです。回転の問題もクリアできました。</p>
				<div style="text-align:center;width:465px;"><iframe title="布 :改善2 - wonderfl build flash online" src="http://wonderfl.kayac.com/blogparts/d87e305e5b56d0d28147a75fe77208bf30087bf8" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.kayac.com/code/d87e305e5b56d0d28147a75fe77208bf30087bf8" title="布 :改善2 - wonderfl build flash online">布 :改善2 &#8211; wonderfl build flash online</a></div>
				</div>
				<p>何回か布っぽいのを作るシリーズをやってましたが、<br />
				今までの物は、ちゃんと点どうしが連結されたものではありませんでした。</p>
				<p>今回はちゃんと連結して布のシミュレーションぽい物ができたのでUPします。<br />
				しかし、あくまで『それらしい物』であって、z軸も考慮してませんし、怪しい部分が多々あります。</p>
				<p>最近Clothシミュレーションよく見ますね。js実装のとか。<br />
				<a href="http://d.hatena.ne.jp/gyuque/20090211">2009-02-11 &#8211; 最速チュパカブラ研究会</a><br />
				解説も丁寧で凄いなぁ。ソース読んで勉強しよう。</p>
				<p>初wonderFlです。</p>
				<p>ドラッグで移動、ctrlキー押しながらドラッグで固定。<br />
				固定した点をダブルクリックで解除です。</p>
				<div style="text-align:center;width:465px;">
				<iframe title="flash on 2009-4-5 - wonderfl build flash online" src="http://wonderfl.kayac.com/blogparts/f44f88786d3ce9908f16da33dfd664be7562267c" width="465" height="490" style="border:1px black solid;"></iframe><a href="http://wonderfl.kayac.com/code/f44f88786d3ce9908f16da33dfd664be7562267c" title="flash on 2009-4-5 - wonderfl build flash online">布 &#8211; wonderfl build flash online</a>
				</div>
				<p>最初に格子状に並べているので布のようですが、<br />
				最初に何らかの形に並べれば、その形を維持するように動くはずです。</p>
				<p>jointメソッドで隣り合った点どうしを連結します。<br />
				ここがどうしても冗長でわかりにくくなってしまってます。<br />
				コメントアウトで色々書いておきました。</p>
				<div class="add">
				<em>2009/04/13 追記</em><br />
				ずいぶん改善できました。<br />
				<a href="http://wonderfl.kayac.com/code/cdd1c4ee3be0548835a2cb8991826f6ffd34a835">布 : 改善 | wonderfl build flash online</a><br />最初は８方向に対して連結していましたが、上下左右の４方向でOKでした。<br />
				ソースも短くなり、ずいぶん分かりやすくなりました。<br />
				上の<a href="http://d.hatena.ne.jp/gyuque/20090211">2009-02-11 &#8211; 最速チュパカブラ研究会</a>様のソースを参考にしてます。やっぱ凄いです。
				</div>
				<p>一番最初に布っぽい物を作った時も、それぞれを連結するって事は考えたんですが、やり方が思いつかなった。<br />
				今回は実直に総当たりな感じで試しにやってみたら上手くいきました。<br />
				上手いやり方を考えるのもいいけど、泥臭いやりかたで試すの大事ですね。</p>
				<p>Player10から加わった<a href="http://wonderfl.kayac.com/code/da2178c257433270d0e80408a9443f6531030924">GraphicsPathCommandを使ってラインを描画するバージョン</a>も作ってみました。</p>
				<div class="add">
				<em>追記</em><br />
				wonderflの使い方が良く分かっておらず、forkしないで新しく作ってました。そちら削除させてもらいました。favoriteに入れてくれた方がいらっしゃったのですが、ごめんなさい！
				</div>
				<p>でも少し重くなりますね。今回はこの方法は適してないんでしょうね。<br />
				drawLine関数だけ違います。他の部分は全く同じ。</p>
				<p>あとはテクスチャですが、テクスチャを貼るのは結構簡単なようです。<br />
				<a href="http://friendsofed.com/book.html?isbn=1430216085">AdvancED ActionScript 3.0 Animation</a>に丁寧に書かれてました。<br />
				球体のテクスチャ付き３D描画についても書かれてますよ！</p>
				<p>それから、回転させるって以前言ったものの、まだ回転させる方法が思い浮かびません。<br />
				ためしに思いつきで作ったのですが、上手く動きませんでした。<br />
				なにをもって回転とするのかが良くわかってません。</p>
				<p>回転の失敗作も近いうちにUPしようと思います。</p>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2009/04/05/102/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AdvancED ActionScript 3.0 Animation</title>
		<link>http://miniapp.org/blog/2009/01/07/100/</link>
		<comments>http://miniapp.org/blog/2009/01/07/100/#comments</comments>
		<pubDate>Wed, 07 Jan 2009 11:45:55 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2009/01/07/100/</guid>
		<description><![CDATA[				名著 ActionScript3.0アニメーションの続編(洋書)。
				
				アマゾンで買っちゃったんですが、
				AdvancED ActionScript 3.0 Animation &#124; Book Details
				上のリンク先で電子書籍(ebookって書いてある。pdfかな？pdfでした。)としても買えるようですね。
				コピペが出来るわけです。ということは分からない単語が出てきても、すぐに辞書ひける。
				まるまる1ページ翻訳とかもイケますよね。
				…しまった！！ 早まったかも！？
				上記リンクからは、試し読みが出来るだけでなく、書籍内で使われているサンプルファイルもダウンロードできますね。ふとっぱら！！
				(追記)
				買ってしまいました。paypalとカードの支払いに対応してました。
				1 日本円 = 0.0104302 米ドルで、$27.99 → ¥2,684でした。
				形式はpdf。
]]></description>
			<content:encoded><![CDATA[				<p><a href="http://miniapp.org/blog/2008/07/14/62/">名著 ActionScript3.0アニメーション</a>の続編(洋書)。</p>
				<p><img src="http://miniapp.org/wordpress/wp-content/uploads/2009/01/img-cover-9781430216087.jpg" width="200" height="240" alt="_img_cover_9781430216087.jpg" /></p>
				<p>アマゾンで買っちゃったんですが、<br />
				<a href="http://friendsofed.com/book.html?isbn=1430216085">AdvancED ActionScript 3.0 Animation | Book Details</a><br />
				上のリンク先で電子書籍(ebookって書いてある。<strike>pdfかな？</strike>pdfでした。)としても買えるようですね。<br />
				コピペが出来るわけです。ということは分からない単語が出てきても、すぐに辞書ひける。<br />
				まるまる1ページ翻訳とかもイケますよね。</p>
				<p>…しまった！！ 早まったかも！？</p>
				<p>上記リンクからは、試し読みが出来るだけでなく、書籍内で使われているサンプルファイルもダウンロードできますね。ふとっぱら！！</p>
				<p>(追記)<br />
				買ってしまいました。paypalとカードの支払いに対応してました。<br />
				1 日本円 = 0.0104302 米ドルで、$27.99 → ¥2,684でした。<br />
				形式はpdf。</p>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2009/01/07/100/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>グニャグニャするネットを作る</title>
		<link>http://miniapp.org/blog/2008/10/21/96/</link>
		<comments>http://miniapp.org/blog/2008/10/21/96/#comments</comments>
		<pubDate>Tue, 21 Oct 2008 13:03:08 +0000</pubDate>
		<dc:creator>miniapp</dc:creator>
				<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://miniapp.org/blog/2008/10/21/96/</guid>
		<description><![CDATA[				以前作ったのの続き。
				前回のは位置が固定されていて動かせなかったけど、どうにかして動かせるようにしました。
				まだ未完ですが、勢いでUPします。
				
				別windowでサンプルを開きます
				 
				
				今回はパラメーターを弄れるようにスライダーを付けていて、左からfriction(摩擦 : 0.1~0.98)、spring(バネの係数 : 0.1~1)、_POWER_COEFFICIENT(各点にかかる力を求めるための定数。自分でやっといて良く理解していない : 5~300)です。
				スライダーのソース、使い方は書籍『ActionScriptアニメーション』のものを使わせて貰いました。色だけ変えてあります。
				Ballクラスにtensionってパラメーターを追加し、マウスとの距離によって変え、バネ運動の際にその値を反映させています。
				以下は問題点。
				
				未だにネット部分だけにあたり判定を付けるのが出来てない。
				なのでスライダーを弄ってもネットが動く。
				前回も書いたけど、多分この方法は間違ってる気がする。ちゃんと点どうしが連結されていない。
				各値をかなり低くすると、動作がおかしい点がある。
				
				要改善。次は回転させようと思います。
				んで、僕は何がやりたいのかと言うと、
				The Magic Carpet  —  Manuel’s Coding Blogとか、THE ECO ZOO &#124; ECODA!DOBUTSUENの引っ張れる旗みたいなのを作りたいのです。
				といっても3Dにしたい訳ではなく、どういう風に座標を管理しているのか、等の仕組みが知りたい。
				同じように、確かFlash8が出たあたり、fladdictさんがグネグネするコーラの缶のデモを作られていた。そこのURLはもう無い(ドメインが違う)し、はっきりとは覚えていないんだけど、テクスチャも貼られていた。そういったのを作りたいのです。
				今回のソース一式 net2.zip
				メインとなるソースだけ載せてみます。
				
package
{
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.miniapp.customFigure.Ball;

	[SWF(backgroundColor="0x000000", width="800", height="800", frameRate="60")]
	public class Net extends Sprite
	{
		private static const _SPRING:Number = 0.5;
		private static const _FRICTION:Number = 0.5;
		private static const _COLUM:uint = 20
		private static const _ROW:uint = 20;
		private static const _NUM_BALLS:uint = [...]]]></description>
			<content:encoded><![CDATA[				<p><a href="http://miniapp.org/blog/2008/07/31/71/">以前作ったの</a>の続き。<br />
				前回のは位置が固定されていて動かせなかったけど、どうにかして動かせるようにしました。<br />
				まだ未完ですが、勢いでUPします。</p>
				<p><a class="noUnderLine" href="/sample_flash/net2/" target = "_blank"><br />
				別windowでサンプルを開きます<br />
				<img src="http://miniapp.org/wordpress/wp-content/uploads/2008/10/12.png" width="300" height="307" alt="1.png" /> <img src="http://miniapp.org/wordpress/wp-content/uploads/2008/10/2.png" width="300" height="307" alt="2.png" /><br />
				</a></p>
				<p>今回はパラメーターを弄れるようにスライダーを付けていて、左からfriction(摩擦 : 0.1~0.98)、spring(バネの係数 : 0.1~1)、_POWER_COEFFICIENT(各点にかかる力を求めるための定数。自分でやっといて良く理解していない : 5~300)です。<br />
				スライダーのソース、使い方は書籍『ActionScriptアニメーション』のものを使わせて貰いました。色だけ変えてあります。</p>
				<p>Ballクラスにtensionってパラメーターを追加し、マウスとの距離によって変え、バネ運動の際にその値を反映させています。</p>
				<p>以下は問題点。</p>
				<ul>
				<li>未だにネット部分だけにあたり判定を付けるのが出来てない。</li>
				<li>なのでスライダーを弄ってもネットが動く。</li>
				<li>前回も書いたけど、多分この方法は間違ってる気がする。ちゃんと点どうしが連結されていない。</li>
				<li>各値をかなり低くすると、動作がおかしい点がある。</li>
				</ul>
				<p>要改善。次は回転させようと思います。</p>
				<p>んで、僕は何がやりたいのかと言うと、<br />
				<a href="http://manuel.bit-fire.com/2007/08/10/the-magic-carpet/">The Magic Carpet  —  Manuel’s Coding Blog</a>とか、<a href="http://ecodazoo.com/">THE ECO ZOO | ECODA!DOBUTSUEN</a>の引っ張れる旗みたいなのを作りたいのです。<br />
				といっても3Dにしたい訳ではなく、どういう風に座標を管理しているのか、等の仕組みが知りたい。<br />
				同じように、確かFlash8が出たあたり、<a href="http://fladdict.net/blog/">fladdict</a>さんがグネグネするコーラの缶のデモを作られていた。そこのURLはもう無い(ドメインが違う)し、はっきりとは覚えていないんだけど、テクスチャも貼られていた。そういったのを作りたいのです。</p>
				<p><a href="/sample_flash/net2/net2.zip">今回のソース一式 net2.zip</a></p>
				<p>メインとなるソースだけ載せてみます。</p>
				<pre name="code" class="actionscript">
package
{
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import org.miniapp.customFigure.Ball;

	[SWF(backgroundColor="0x000000", width="800", height="800", frameRate="60")]
	public class Net extends Sprite
	{
		private static const _SPRING:Number = 0.5;
		private static const _FRICTION:Number = 0.5;
		private static const _COLUM:uint = 20
		private static const _ROW:uint = 20;
		private static const _NUM_BALLS:uint = _COLUM * _ROW;
		private static const _DIFF_X:uint = 20;
		private static const _DIFF_Y:uint = 20;
		private static const _START_X:uint = 200;
		private static const _START_Y:uint = 200;
		private static const _BALL_RADIUS:uint = 4;

		//TODO 名前も数値も適当。ちゃんとしたい。
		private static const _POWER_COEFFICIENT:uint = 50;

		/**
		 * コンストラクタ
		 */
		public function Net()
		{
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private var _mousePressX:Number;
		private var _mousePressY:Number;
		private var _isDragging:Boolean = false;
		private var _lastMouseX:Number;
		private var _lastMouseY:Number;
		private var _balls:Array/* of Ball */
		private var _horizontalBallArray:Array/* of Array */
		private var _verticalBallsArray:Array/* of Array */
		private var _frictionSlider:SimpleSlider;
		private var _springSlider:SimpleSlider;
		private var _powerCoefficientSlider:SimpleSlider;

		private function init():void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			stage.scaleMode = StageScaleMode.NO_SCALE;

			_frictionSlider = new SimpleSlider(0.1, 0.98, _FRICTION);
			_frictionSlider.x = 10;
			_frictionSlider.y = 10;
			addChild(_frictionSlider);

			_springSlider = new SimpleSlider(0.1, 1, _SPRING);
			_springSlider.x = 30;
			_springSlider.y = 10;
			addChild(_springSlider);

			_powerCoefficientSlider = new SimpleSlider(5, 300, _POWER_COEFFICIENT);
			_powerCoefficientSlider.x = 50;
			_powerCoefficientSlider.y = 10;
			addChild(_powerCoefficientSlider);

			_balls = [];

			//ボールを繋ぐ線を描くため、縦、横に分けて配列に入れて纏める。
			//縦に並ぶボールを入れた配列をまとめる配列
			_horizontalBallArray = [];
			//横に並ぶボールを入れた配列をまとめる配列
			_verticalBallsArray = [];

			for (var i:uint = 0; i < _COLUM; i++)
			{
				//縦に並ぶボールを管理する配列を作る
				var horizontalBalls:Array/* of Ball */ = [];
				_horizontalBallArray.push(horizontalBalls);
			}

			//ボール生成、配置
			for (i = 0; i < _ROW; i++)
			{
				//横に並ぶボールを管理する配列を作る
				var verticalBalls:Array/* of Ball */ = [];
				for (var j:uint = 0; j < _COLUM; j++)
				{
					var ball:Ball = new Ball(_BALL_RADIUS, 0xFFFFFF);
					ball.x = ball.defaultX = _START_X + _DIFF_X * j;
					ball.y = ball.defaultY = _START_Y + _DIFF_Y * i;
					_balls.push(ball);

					//縦に並ぶボールを入れる
					(_horizontalBallArray[j] as Array).push(ball);
					//横に並ぶボールを入れる
					verticalBalls.push(ball);
					//ball.cacheAsBitmap = true;
					//addChild(ball);
				}
				_verticalBallsArray.push(verticalBalls);
			}

			drawLine();
			stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}

		/**
		 * ボール同士を線で繋ぐ
		 */
		private function drawLine():void
		{
			graphics.clear();
			graphics.lineStyle(1, 0xFFFFFF);

			//縦のラインを引く
			for (var i:uint = 0; i < _COLUM; i++)
			{
				var horizontalBalls:Array = _horizontalBallArray[i] as Array;
				var firstBall:Ball = Ball(horizontalBalls[0]);
				graphics.moveTo(firstBall.x, firstBall.y);
				for (var j:uint = 1; j < _COLUM; j++)
				{
					var ball:Ball = Ball(horizontalBalls[j]);
					graphics.lineTo(ball.x, ball.y);
				}
			}

			//横のラインを引く
			for (i = 0; i < _ROW; i++)
			{
				var verticalBalls:Array = _verticalBallsArray[i] as Array;
				firstBall = Ball(verticalBalls[0]);
				graphics.moveTo(firstBall.x, firstBall.y);
				for (j = 1; j < _ROW; j++)
				{
					ball = Ball(verticalBalls[j]);
					graphics.lineTo(ball.x, ball.y);
				}
			}
		}

		/**
		 * バネ運動させる
		 * @param	ball バネ運動させるボール
		 * @param	targetPoint　目標位置
		 */
		private function springTo(ball:Ball, targetX:Number, targetY:Number):void
		{
			ball.vx += (targetX - ball.x) * _springSlider.value * ball.tension;
			ball.vy += (targetY - ball.y) * _springSlider.value * ball.tension;

			ball.vx *= _frictionSlider.value;
			ball.vy *= _frictionSlider.value;

			ball.x  += ball.vx;
			ball.y  += ball.vy;
		}

		private function enterFrameHandler(e:Event):void
		{
			if (_isDragging)
			{
				//マウスが移動した距離を調べる
				var dxMouse:Number = mouseX - _lastMouseX;
				var dyMouse:Number = mouseY - _lastMouseY;
			}

			for (var i:uint = 0; i < _NUM_BALLS; i++)
			{
				var ball:Ball = Ball(_balls[i]);
				if (_isDragging)
				{
					//マウスが押された地点とボールの距離を調べる
					var dx:Number = mouseX - ball.x;
					var dy:Number = mouseY - ball.y;
					var distance:Number = Math.sqrt(dx * dx + dy * dy);

					//マウスとボールの位置からボールにかかる力を算出
					//マウスから近いボールほど引っ張られる力が大きくなる
					var tension:Number = _powerCoefficientSlider.value / ( _powerCoefficientSlider.value + distance);
					ball.tension = tension;

					//目的地を算出
					var toX:Number = ball.defaultX + dxMouse;
					var toY:Number = ball.defaultY + dyMouse;
				}
				else
				{
					toX = ball.defaultX;
					toY = ball.defaultY;
				}

				springTo(ball, toX, toY);
				ball.defaultX = toX;
				ball.defaultY = toY;
			}

			drawLine();

			//マウス位置を記憶
			_lastMouseX = mouseX;
			_lastMouseY = mouseY;
		}

		private function mouseDownHandler(e:MouseEvent):void
		{
			_isDragging = true;
			_mousePressX = mouseX;
			_mousePressY = mouseY;
		}

		private function mouseUpHandler(e:MouseEvent):void
		{
			_isDragging = false;
		}
	}
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://miniapp.org/blog/2008/10/21/96/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
