miniapp

タイトルはホッテントリメーカーつかってみました。おもしろい！

英語の勉強用に、iPhone用の勉強ページを作りました

一問目のページ

黒い部分をタップすると答えが見られるようになっています。左下のresetボタンで元に戻ります。
これは、少し前に話題になった(？)『もんたメソッド』を使っています。
レイアウトがギュウギュウですが、あんまりスクロールしなくてもいいようにしたかったので。
iphoneだとcssでposition:fixedが出来ないんですかね？ 問題の例文はスクロールしてもずっと表示させたかったんですが。

まだまだ途中で、10問目までしかありません。

作った経緯

以前、急がばまわれ式・堅実で一番効率的な英語の勉強法という記事を読んだ時に、お薦めされていた下記の本を買いました。

英語リーディング教本―基本からわかる
	おすすめ平均 素晴らしい! 頭が混乱する本 素晴らしい 徹底的に文法という標識に従って読む、自分の想像で読んではいけない 薬袋三部作　応用編 Amazonで詳しく見る by G-Tools

かなり大雑把に説明に説明しますが、この本の最初に載っている『本書の効果的な勉強方法』によれば、まずは『練習用TEXTを何度も繰り返し、全部の答えを「テキストの文言通り寸分違わず、しかもよどみなく言える」ようになるまで自分を鍛えよ』と書いてあります。
寸分違わず、九九の暗算を暗唱するように、間髪を入れずに答えられるようになるべし、と。

そして『練習用TEXTを丸暗記するだけでも、相当のところまで所見の英文の構造が分かるようになる』とまで書いてあります。そこまで練習用TEXTを暗記する事は重要な事のようです。そこで、今回の暗記用のページを作ってみました。

一日一ページは増やして行きたいところ。全文で38問。

スリットスキャンに、
マウスのインタラクションを付けるとどうなるかな、と思い、作ってみました。

最初は意識していなかったんだけど、以前教えてもらったこちらに似てしまった。

BitmapData::drawで毎フレーム動画をキャプチャし、配列に保存しています。
今回は過去400枚を保存しています。かなり多いと思うんですが、いけるもんですねぇ。

映像を縦1pxづつに区切って管理し、それぞれに何フレーム早めるか、遅らせるかを管理しています。
デフォルトでは保存したキャプチャの真ん中を表示。(今回は400枚保存してるから、200枚目を表示。)

BetweenAs3のイージングを変えるとまた違った感じになります。

ちょっとハマったのが、NetStreamインスタンスをローカル変数にすると、drawする時に下のセキュリティエラーが出る事。

SecurityError: Error #2123: セキュリティサンドボックス侵害 : BitmapData.draw: file:///hoge.swf は unknown URL にアクセスできません。ポリシーファイルへのアクセスも許可されていません。

drawする時にNetStreamインスタンスを参照して何かチェックしてるんですかね？
すぐにエラーが出ずに、しばらくすると出るのも謎でした。

一番良かったのは、絶好の映像ネタが見つかった事w
背景が固定で人が動く映像が見つかって良かった。
背景まで動いているとグチャグチャになりすぎてしまい、良く分からない映像になってしまいます。
ムーンウォークしてる人は、もちろん僕じゃないですよ！w

前回asに書き直しただけのFluid \ Learning \ Processing 1.0のソースを解体して整理。クラス構造も大幅に変えてます。
それから、オリジナルはマス目に色を塗って動きを出していますが、パーティクルを表示して動かす形に変更しました。

オリジナルは作製途中なのかな、って感じがしました。。

気泡っぽい感じが出た。

[Flash]流体っぽいのを作ろうと思った | blog ViolentCoding
を見てずっと気になっていたんですが、同記事で紹介されている

Fluid \ Learning \ Processing 1.0
をそのままas3に持ってきてみました。

変数宣言が微妙に違うぐらいで、そこを直せば割とあっさり動きました。
最適化してないせいもあるけど、やっぱ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 / resolution;
			numRows = height / resolution;

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

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

			for (var col:int = 0; col <= numCols; col++) {
				vsquaresVectors[col] = new Vector.(numCols + 1);
				vbuffersVectors[col] = new Vector.(numCols + 1);
				for (var row:int = 0; row <= 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 < numCols; col++) {
				for (var row:int = 0; row < 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 < numCols; col++) {
				for (row = 0; row < 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.>;
var vbuffersVectors:Vector.>;
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 > 0 && x < width && y > 0 && y < 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 > 0 && col < numCols && row > 0 && row < 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 > 0 && col < numCols && row > 0 && row < 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 < penSize) {
				if (dist < 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 > 255) color = 255;
		if (i > 0 && i < numCols - 1 && u > 0 && u < 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 << 16 | tempColor << 8 | tempColor;
		canvas.fillRect(new Rectangle(x, y, resolution, resolution), rgb);
	}
}

うずまき。

球もつくりました。けど、これは偶然うまくいってる。
mapBitmap作る部分が間違ってると思う。createDMF関数の中がおかしい。
なので参考にしない方がいいです。すみません。
ひょっとすると渦巻きも…？

かなりくどく書きました。だらだらです。helpが意味不明すぎる。

なんでも自由に変形できる万能フィルタではない。誤解してた。そういう変形は今だとpixel Bender使うのかな…？
そうするとDisplacementMapFilterの使い道ってすごく限られてくるのかと疑問に思ってきた。

おおまかな考え方

通常だと、現在地点にどの位の値を加えれば目的地に着くか? で考えるけど、DisplacementMapFilterだと逆。
目的地に引き寄せる力は何か?を考える。 その力を色に変換する。

例えば

DisplacementMapFilterでの色の決め方

ヘルプには

このフィルタでは次の式を使用します。
dstPixel[x, y] = srcPixel[x + ((componentX(x, y) – 128) * scaleX) / 256, y + ((componentY(x, y) – 128) *scaleY) / 256)

と書いてある。
flashPlayerはこの式を使って変形する、っていう事かな?

どういう事か？

色の強さは0～255の256段階。 このままだとマイナス方向が指定出来ないため、 真ん中の128を中間地点とする。

このhelpには中間値は127と書いてある。間違い？？

真ん中からの離れ具合から強さを決める。 そこから128離れるとき、つまり256の時、 50パーセントの力になる(でも色の最大値は255なので僅かな誤差が出る)。
同様に、-128離れるとき、-50%の力になる。(100パーセントではないので注意。)

色の決め方の式

例

x方向の移動のみ考える。
現在の座標は(0, 0)で、x方向に100px移動させたいとする。 まず目的地である(100, 0)の地点に色を塗ることにする。 この色を塗った地点に吸い寄せる力の色に青を使うとする。

目的地に引き寄せられるような色を決める

問題は何色にするか。 DisplacementMapFilterを作製する際、scaleX, scaleYという値を決める。
普通、100%の際にmaxの値を取るものだが、 DisplacementMapFilterはmaxが50%という変な設定なので、 scaleX, scaleYには取り得る最大値の2倍を設定。
ここではscaleXの値を100 * 2 = 200とする。
(0，0)から(100、0)に移動させたい。 ここは逆に考えます。 (100，0)の地点に吸い寄せられる地点を(0，0)にしたい、と

そのように設定をするためには、何色で塗ればいいのか?
x方向の距離は、目的地を基準として考えるので、0 – 100 = -100 (目的地から-100すると現在地になるという事)
移動させる距離を、最大値との比率で考える。 すると、-100 / 200 = 0.5
さっきの色の話を見直すと、-50%の力を作る色は、 中間地点の128から-50%の値である0×0。

フィルタを作るときは、大体これをfor文でmapBitmapの全ピクセルに実行する。
各ピクセルで、適用先のピクセルを求めていく。

色を決める式を、ヘルプに書いてある式から求めると

先に挙げた式でも、こちらでもやってることは一緒。
先に出たヘルプの式をxの値だけに絞って整理してみる。