2008-07

/*
＜修正＞2008/08/08
一部コードを修正しました。
また、負荷が高い処理なので、swfがアクティブな際のみ処理を行うよう変更しました。
でもMacのSafariだとEvent.DEACTIVATEが起こらないんですね…。どうしよう。
*/

52sec.orgさんのデモを見て、僕も同じようなのを作りたくなった。
ActionScript3.0アニメーションも読んだし、勉強の為に。
でも52sec.orgさんのデモは多分、３次元の座標変換をしているので、僕はもうちょっと簡単な物から作ろうと思う。ブラーも無しで。
で、マウスドラッグできるネットを作ります。

試しに一個のボールを引っ張るデモを作った。

ボールそのものをドラッグするんじゃなくて、ドラッグした距離とか方向に応じてボールが反応する。
それで、ボールの数を増やして線で繋ぐと、ネットみたいになる。

別windowでサンプルを開きます

でもこれ、ちゃんとしたネットのシミュレーションしてないんだよな。きっと。
本当は、ボールの一つが引っ張られると、連結されたボールが引っ張られて、その引っ張られたボールに連結されてるボールが…
の繰り返しでなくちゃいけないんじゃなかろうか。
最初はその方向で作ってたんだけど、うまくいかなくて挫折したのでした。
今回はFlashDevelop使って書いた。慣れてるからなのかもしれないけど快適だな〜。

今回のソース一式 NetSample.zip

一応メインとなるソースだけ載せてみます。
Ballクラスってのを使ってるけど、円を描いて、速度のプロパティvx, vyと、デフォルト位置を記憶させるプロパティを持ってます。

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.3;
		private static const _FRICTION:Number = 0.9;
		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 = 30;
		private static const _DIFF_Y:uint = 30;
		private static const _START_X:uint = 100;
		private static const _START_Y:uint = 100;
		private static const _BALL_RADIUS:uint = 4;

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

		/**
		 * コンストラクタ
		 */
		public function Net()
		{
			init();
		}

		private var _isDragging:Boolean = false;
		private var _mousePressPointX:Number;
		private var _mousePressPointY:Number;
		private var _balls:Array/* of Ball */
		private var _horizontalBallArray:Array/* of Array */
		private var _verticalBallsArray:Array/* of Array */
		private var _canvas:Sprite;

		private function init():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;

			_balls = [];

			//マウスドラッグ用の線を描画するためのキャンバス
			_canvas = new Sprite();
			addChild(_canvas);

			//ボールを繋ぐ線を描くため、縦、横に分けて配列に入れて纏める。
			//縦に並ぶボールを入れた配列をまとめる配列
			_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();
			addEventListener(Event.DEACTIVATE, deadActiveHandler);
			addEventListener(Event.ACTIVATE, activateHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}

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

			ball.vx *= _FRICTION;
			ball.vy *= _FRICTION;

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

		/**
		 * ボール同士を線で繋ぐ
		 */
		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);
				}
			}
		}

		private function enterFrameHandler(e:Event):void
		{
			if (_isDragging)
			{
				//マウスがドラッグされた距離を調べる
				var dxMouse:Number = mouseX - _mousePressPointX;
				var dyMouse:Number = mouseY - _mousePressPointY;
				var lengthMouthDrag:Number = Math.sqrt(dxMouse * dxMouse + dyMouse * dyMouse);
				//マウスがドラッグされた角度を求める
				var angleMouseDrag:Number = Math.atan2(dyMouse, dxMouse);

				drawMouseDragLine();
			}

			for (var i:uint = 0; i < _NUM_BALLS; i++)
			{
				var ball:Ball = Ball(_balls[i]);
				if (_isDragging)
				{

					//マウスが押された地点とボールのデフォルト地点の距離を調べる
					var dx:Number = _mousePressPointX - ball.defaultX;
					var dy:Number = _mousePressPointY - ball.defaultY;
					var lengthBetweenMousePressPostionAndBallPosition:Number = Math.sqrt(dx * dx + dy * dy);

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

					var power:Number = lengthMouthDrag * powerRate;

					//位置関係から移動する目的地を算出
					var toX:Number = ball.defaultX + power * Math.cos(angleMouseDrag);
					var toY:Number = ball.defaultY + power * Math.sin(angleMouseDrag);

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

		/**
		 * マウスドラッグ時の線を引く
		 * @param	e
		 */
		private function drawMouseDragLine():void
		{
			_canvas.graphics.clear();
			_canvas.graphics.lineStyle(1, 0xFFFFFF);
			_canvas.graphics.moveTo(_mousePressPointX, _mousePressPointY);
			_canvas.graphics.lineTo(mouseX, mouseY);
		}

		/**
		 * swfがactiveになったら処理開始
		 * @param	e
		 */
		private function activateHandler(e:Event):void
		{
			//レンダリング開始
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}

		/**
		 * swfがアクティブでなくなったら処理中断
		 * @param	e
		 */
		private function deadActiveHandler(e:Event):void
		{
			removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}

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

		private function mouseUpHandler(e:MouseEvent):void
		{
			_isDragging = false;

			//マウスドラッグの線の描画をやめる
			_canvas.graphics.clear();
		}
	}
}

Spark project 勉強会 #01行ってきました。
とても濃い内容のスーパー勉強会でした。こういうの待ってました！
食い入って見てましたよ。

ほとんどの方がノートPC持参。
そしてMac率高い。

僕はノート持って無くてペンとノート(紙)。
やっぱノート(PC)欲しい。

既にminacoさんが、まとめを書かれています。
ＭｉnaLoぐぅぅ» Blog Archive » SparkProjectの勉強会

ぼくはyossyさんのActionScript Thread Library 1.0 (そうめん)の発表から書こうと思います。

1. ActionScript Thread Library 1.0 (そうめん) by yossy:BeInteractiveさん

既に有名なそうめん。
javaのスレッドを擬似的に再現しているそうで、その為、結城浩さんの『増補改訂版Java言語で学ぶデザインパターン入門マルチスレッド編』で紹介されているデザインパターンが使えるそうです。
とうわけで昨日帰ってから早速アマゾンで注文しました。もう届きました。すごい速さだアマゾン…。
早速そうめんでASスレッド入門しようと思う。

発表資料がUPされていますね。
BeInteractive! [Spark project 勉強会 #01 ありがとうございました]

2. GeniusFramework by seagirlさん

Flex用フレームワーク。ターミナルからコマンドを打って、必要なディレクトリ、ファイル群を一発生成。
Windowsで使うにはCygwinなどのアプリケーションが必要とのこと。
似たようなフレームワークとしてCairngorm(けあんごーむ) – Adobe Labsというのがあるそうだ。しかし、複雑で分かりにくい為、GeniusFrameworkの開発に至ったとのこと。

■2008/07/25 20:42追記 発表資料がseagirlさんのBlogにUPされています。
Spark project 勉強会 #1 – yoshizu@S2F

3. Frocessing by NUTSUさん

ProcessingのAS3版(SparkProjectの方には「あくまでライクです。移植ではなくリファレンス実装なので〜」と書かれていますね。)
Processingらしいウネウネしたライン描画とか、RADIOHEADのGoogleCodeにあがってるアレとか動かしてらっしゃった。Blogで既にUPされていた物とはちょっと違っていたかな？ 口元が動いていたような。
懇親会で教えてもらったのですが、公開されているProcessingのサンプルもAS3の書き方に直す(変数宣言の部分とか)だけで、そのまま動かす事が可能とのこと。ただ、flight404の人の様なProcessingの達人な方は、ほとんどProcessingでは無くなっているそうで、直接OpenGLを操作していたりするそうだ。

4. Flash Player Mental Model by arkwさん

1フレームの中でどのような処理が行われているかの話。
ENTER_FRAMEとTimer、マウスイベントを使ったサンプルを動かし説明されていた。
まだ良く理解できていないので、arkwさんのエントリを読んで理解する。

5. sazameki by zk33さん

オーディオ操作ライブラリ。サウンドを動的に生成したり、エフェクトを付けたり。
単音にディレイをかけてロックマンのやられたときの音(ティウンティウン)を作ってらした。
FlashPlayer10 beta2がインストールされていれば、最後に発表されたリズムマシン？のデモがzk33さんの発表記事から体験できます。

2008/07/24 記事訂正しました。 デモswfファイルへの直リンクをしていましたが、不適切と感じたのでリンク先を変更しました。すみません。

これで簡単な曲を作ってらっしゃった。リズムがだんだん曲になっていく様子はやっぱ楽しい。
これには会場が沸きました。

デモではスイングも実装されてた。デモの右下にあるボタンで調整されてたかな？？ 以下はスイングの参考リンク(いいのが見つからなかった。ちょっと違うかも)。
DTMでのグルーヴ設定方法(swing)

発表資料がご本人のBlogにUPされています。
Spark project勉強会#1で発表してきましたよ – zk_diary

6. 昨今の(X)HTMLに準拠したswfの埋め込みについて(embedタグ使わないとか、swfobject 2とか) by ksakaiさん

swfをHTMLに埋め込む際の注意点。
embedは今後廃止の方向。
safariでのHTMLからの変数の受け渡しなど。
DreamWeaver CS4ではswfObjectを使ったHTMLが書き出されていた。←ここはうろ覚えです、すみません…。)

そのほか

拡張子のswfって、「すぅいふ」って読むんですね。
Adobeの方も発表者の方も、皆さん、この読み方だったので間違いない。きっと。
今まで「えすだぶりゅえふ」って読んでました。
Shockwave Flashの略だと思うんですがどうなんでしょう。

というわけで、とても充実した勉強会でした。
お疲れ様でした。そして有り難うございました。
僕も発表できるよう頑張ろ。超頑張ろ。

5年ほど前まで趣味で曲を作っていたのですが、 その当時作った曲をUPしようと思います。
テクノです。
今から10年以上前、ハードミニマル全盛期に夢中になりました。
なのでその頃の影響を強く受けた曲になってます。

でも最近はめっきり音楽に疎くなってます…。
track1.mp3
track2.mp3
track3.mp3
track4.mp3
track5.mp3
testLoop.mp3

ASR-Xというサンプラー(+シンセ)と、Cubase3を使って作成しました。おそろしくアナログな作り方していました。

当時、作り方とか全く分からず、Webで色々検索とかしているうちに、
Webに興味を持ってこの業界入ったのでした。

RailsによるアジャイルWebアプリケーション開発 第2版、30ページ。

ruby script/server

ってやったら


./script/../config/boot.rb:29: undefined method `require_gem' for main:Object (NoMethodError)
from script/server:2:in `require'
from script/server:2

ってエラー出ちゃって進めない。

調べると下記ページが出た。
Ruby on Rails/Rails 2.0.2にアップグレード – ARK-Web SandBox Wiki

ここの

参考) Rails/Gem errors? - Ruby Forum
参考サイトにあるように、gem pristine --allを実行してみた

を実行。

そして、
書籍29ページの

rails demo

からもう一度やり直し。
動いた。

難しい。Rubyやってみて分かったけど、Flashの親切さに気付いた。
開発環境が整ってたり。Flashの方が、初心者が迷いにくいんじゃないかな〜。

非プログラマには環境設定とか難しい…。
エラーが出ても何所が原因なのか掴めない。
がんばろう。

昔、少しだけ書いて、現在は放置してしまっているblogがあるんですが、
そこに書いた下記のjsflがFlash OOP for AS3の109ページで取り上げてもらってました。

  座標の小数点以下を四捨五入するjsfl作った by 9server.net

すごくビックリ&興奮。目を疑ったわ。
なんてこと無いjsflなんですが、宜しければお使い下さい。

他にも四捨五入するjsflはあったと思うのですが、僕のを選んでくださった
執筆者のnagggさん、ありがとうございます！

なんで放置しちゃったかと言うと、
最初が数字だとパッケージ名として使えないことに気付いたからです。
だから最初が数字で始まるドメインって取りやすかったんだ〜と納得。
昔のブログ書き始めたときは、そんなことも知りませんでした。

  _parentするならSingletonのお話2とか書いたけど、
今見ると良くない例っぽいのでどうしよう。他のも。
動いちゃうからタチが悪いんだな。

やっとです。
噂に違わぬいい本だった。
パーティクル、キネマティクスの章が特に面白かった。

最後の章で行列とかを少し突っ込んで解説してるけど、
あそこは良くわからないかも。専門書読んだ方が分かりやすい。

三角関数まではそこそこ解説するけど、それより複雑な箇所は
本の範疇から外れるから公式丸暗記で、というスタイル。
気になる部分は専門書読んで掘り下げてみよっと。

覚えたテクニック使って何かサンプル作ってみないとね。

扁桃腺が腫れて1週間ほど潰れてしまった…。
今年入って2回目。喉が腫れて凄く痛くなる。熱も凄く出る。
なんかヤバイのかもしれません。
あんまり腫れる人は手術して扁桃腺を取っちゃうらしい。
良くなるなら僕も取りたいんだけどな〜。
全身麻酔だって。怖い。