SQLの窓 イラストAC フリー素材

2012年05月31日

DDMS で LogCat の内容より intent でアクティビティの表示

正式ドキュメントを読んでいても、ラチがあかないので 試してみました。簡単なものはこれでいけそうですが、バージョンによってどうなるかはちょっと疑問。とりあえず、エミュレータの 4.0.3 ですが、カメラは複雑だったので保留です。
Intent intent = new Intent();

//////////////////////////////////////////
// カレンダー
intent.setClassName("com.android.calendar", "com.android.calendar.AllInOneActivity");
startActivity(intent);

//////////////////////////////////////////
// ホーム
intent.setAction(intent.ACTION_MAIN);
intent.addCategory(intent.CATEGORY_HOME);
startActivity(intent);

//////////////////////////////////////////
// カメラギャラリー
intent.setClassName("com.android.gallery", "com.android.camera.ImageGallery");
startActivity(intent);

//////////////////////////////////////////
// ホームからのサーチ
intent.setClassName("com.android.quicksearchbox", "com.android.quicksearchbox.SearchActivity");
startActivity(intent);






タグ:android intent
posted by at 2012-05-31 23:18 | Android | このブログの読者になる | 更新情報をチェックする

Windows8 の XMLHttpRequest の POST メソッドのテストの為に、超簡易掲示板を授業中に作成

toypark は、オンラインで WEBベースの クライアントアプリがあるので、直接タイプして登録。最初、Seesaa のブログの記事のコメント欄を使ってたら、しばらくしてスパム扱いされて書き込み禁止になってしまったので・・・

で、Windows8 が UTF-8 で、他のキャラクタセットの URL エンコードが必要になったので、ecl.js をベクターからダウンロードして、Windows8 に実装しましたが、普通に動きます。ほんと、このライブラリは良くできています。
<?
header( "Content-Type: text/html; Charset=shift_jis" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

error_reporting(E_ALL ^ E_NOTICE);

ini_set( 'display_errors', "1" );

?>
<html>
<form method="POST">
<textarea name="text"></textarea>
<input type="submit" name="send" value="送信">
</form>
<?
$text = @file_get_contents("./text.log");


if ( $_POST['send'] != "" ) {
    $text .= "<br />\n" . $_POST['text'];
    file_put_contents("./text.log", $text );
}


print $text;
?>
</html>
以下のコードは、Windows8サンプルの『Secondary tiles sample』の中にあります。これは、データを決め打ちで処理していますが、ecl.js は正しく動作しています。
( JavaScript のみで、日本語が Shift_JIS に変換されて URL エンコードされます )

★ コンシューマからリリースの変化で、サンプルの中身も変わったようです。
★ XMLHttpRequest のサンプルは、Metro style banking app with strong authentication sample を見て下さい

    function scenario7RefreshChannels() {
        var serverUrl = document.getElementById("serverUrlField").value;

        // Send the channel to the server
        var xhr = new WinJS.xhr({
            type: "POST",
            url: serverUrl,
            headers: { "Content-Type": "application/x-www-form-urlencoded" },

            // Send the tile id of the secondary tile for handling in your service, in addition to the channelUri
            data: "tileId=abc&channelUri=xyz"

        }).then(function (req) {
            id("scenario7Output").innerHTML += req.response;
        }, function (req) {
            sdkSample.displayError("Could not send channel URI to server: " + req.statusText);
        });
    }
関連する記事

JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library


posted by at 2012-05-31 20:42 | Windows8 Metro style | このブログの読者になる | 更新情報をチェックする

2012年05月27日

AIR+FLARToolkitサンプル開発キット / collada(dae)とメタセコイア(mqo)ローダ実装済



吹き出しはデータとして添付しました。表示エリアと同じ大きさで、吹き出し部分以外は透過です。セリフとモンスターの汗はマウスドラッグで直書きです。miku(はちゅね) の向こうに見えている手は、ALT + PrintScreen ですね、すいません。



左の miku は、メタセコイアで、右の miku は、collada です。



さて、やっと AIR におもちゃがのっかりました。あとは、これを Android の apk でビルドしてどーなるかなんですが・・・。これが動かないと、いまどき papervision3d を引っ張り出した意味が無いんですが、メタセコデータがそのままロードできるし、Google ギャラリーの dae がロードできるはずです。3年前の WEB 上で結構な建物とかが回ってたので、ローカルのいまどきの PC ならストレス無く動くと思うのです。

結構多くのいろいろな著作物が同梱されています。

AIR の入れ物と、zip でロードして来るところを自分で作成しました。(沢山のフリーソフトに感謝です)

■ リソースの著作権とライセンス等

Metasequoia.as
Copyright (c) 2007-2008 rch850
Metasequoia_v.as
改造 : lightbox

TGADecoder.as
 Copyright (c) 2008 rch850

BMPDecoder.as
Copyright (c) 2007 munegon

FLARToolkit
saqoosha
[GPL License]

Papervision3D
[MIT ライセンス]

zip 書庫の処理
David Chang
[GPL License]

モンスター 3D モデル
光陰像型

negimiku_dae.zip
note.x さん

muku01.mqo
ファイル保管庫@七葉(nh0019.zip)

初音ミクのライセンス
クリプトン・フューチャー・メディア株式会社
[ピアプロ・キャラクター・ライセンス]


本当はオブジェクト毎に設定できるようなものを作ってしまえば、ジオラマ的なおもちゃ箱が出来上がると思うんですが、そんな時間は無いのが現実なのです・・・・。ははは

※ ちなみに、こんな画像をディスプレイに表示してカメラ向けても AR は作動します。




posted by at 2012-05-27 20:50 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2012年05月26日

THREE.PerspectiveCamera ( 透視法射影カメラ ) の引数

THREE.PerspectiveCamera => THREE.Camera => THREE.Object3D
( THREE.Camera の持つメソッドは、lookAt のみ ) 

fov垂直方向の視野角(45〜50くらい)
aspect描画範囲の縦横比
near視点からどれだけ離れた位置から表示するか
far視点からどれだけ離れた位置まで表示するか
THREE.PerspectiveCamera = function ( fov, aspect, near, far ) {

	THREE.Camera.call( this );

	this.fov = fov !== undefined ? fov : 50;
	this.aspect = aspect !== undefined ? aspect : 1;
	this.near = near !== undefined ? near : 0.1;
	this.far = far !== undefined ? far : 2000;

	this.updateProjectionMatrix();

};

参考ページ

メソッド

setLens( focalLength, frameHeight ) 
焦点距離とフレーム高さ

setViewOffset( fullWidth, fullHeight, x, y, width, height )
( このモードを抜けるには、fullWidth に undefined をセットすると良いみたいです )

+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+

var w = 1920;
var h = 1080;
var fullWidth = w * 3;
var fullHeight = h * 2;

--A--
camera.setOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
--B--
camera.setOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
--C--
camera.setOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
--D--
camera.setOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
--E--
camera.setOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
--F--
camera.setOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );


※ メソッドは未テストです


タグ:Three.js 3D
posted by at 2012-05-26 13:57 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする

THREE.Scene クラスの remove メソッド

THREE.Scene => THREE.Object3D

Scene に追加する場合は、add を使用しますが、削除する場合は remove を使用します。いずれも、Object3D のメソッドであり、Scene の場合は特別な処理が Object3D 内でなされており、その処理を受け持つのが、Scene のメソッドである、__removeObject となります。

remove メソッド
remove: function ( object ) {

	var index = this.children.indexOf( object );

	if ( index !== - 1 ) {

		object.parent = undefined;
		this.children.splice( index, 1 );

		// remove from scene

		var scene = this;

		while ( scene.parent !== undefined ) {

			scene = scene.parent;

		}

		if ( scene !== undefined && scene instanceof THREE.Scene ) {

			scene.__removeObject( object );

		}

	}

}

まず、削除対象の引数のオブジェクトが、メソッドが実行されたオブジェクトに属するかどうかチェックして、存在した場合、parent プロパティをリセットして、メソッドが実行されたオブジェクから対象オブジェクトを削除しています( 内部仕様の配列から削除 )

その後、メソッドが実行されたオブジェクから、Scene オブジェクトを探し出して( 一番トップレベルにあるという仕様 )、Scene が保有する特別な内部仕様から対象のオブジェクトを __removeObject で削除します

Scene で定義されている配列

__objects = [];
__lights = [];

__removeObject メソッド
THREE.Scene.prototype.__removeObject = function ( object ) {

	if ( object instanceof THREE.Light ) {

		var i = this.__lights.indexOf( object );

		if ( i !== -1 ) {

			this.__lights.splice( i, 1 );

		}

	} else if ( !( object instanceof THREE.Camera ) ) {

		var i = this.__objects.indexOf( object );

		if( i !== -1 ) {

			this.__objects.splice( i, 1 );
			this.__objectsRemoved.push( object );

			// check if previously added

			var ai = this.__objectsAdded.indexOf( object );

			if ( ai !== -1 ) {

				this.__objectsAdded.splice( ai, 1 );

			}

		}

	}

	for ( var c = 0; c < object.children.length; c ++ ) {

		this.__removeObject( object.children[ c ] );

	}

}




タグ:Three.js 3D
posted by at 2012-05-26 13:21 | Three.js | このブログの読者になる | 更新情報をチェックする

2012年05月21日

AIR Flex4 で WEB カメラを最も簡単に実装する方法

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★

VideoDisplay を使って、ムービを簡単に再生できましたが、ムービーをロードした状態からだと、特に難しい事を意識しなくてもWEB カメラを表示できます。ダミーでお好きな画像が初期表示される mp4 等を用意すれば OK です。







撮影した画像





Panel を画像化しているので全体が画像化されています。撮影ボタンを押すと、ファイルを保存する為のダイアログが表示されるので、このままではつかいにくいので注意して下さい。
ソースを見る
タグ:AIR flex
posted by at 2012-05-21 20:58 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

2009年末に作った Flex3 + FLARToolkit のソースを Flex4 に書き直しました

2009年バージョンはこちらです。zipfile ボタンで、.mqo と テクスチャの入ったファイルを読み込んで表示させる事ができます。当時作りっぱなしで放置していて、ソースを公開するのを忘れてたので再構築しました。

2009年バージョン + はちゅね



けっこういろんな人がかかわったソースが同梱されています。基本は FLARToolkit ですが、これのライセンスは GPL です。あと、メタセコイアをロードする為のソースとかもろもろ。

FLARToolkit のソースは当時の一番古いものです。今はもうちょっと新しいのがありますが( 二つ対象表示できる? )、3D 表示の元となるのが Papervision3D で、これは 2010 年に開発が止まってしまったソフトウェアで、忘れられてしまった感があります。しかし、PC もよくなったし、AIR で動かしていると結構なレスポンスなので、再び引っ張り出していろいろテストしています。ブラウザで動かす WebGL よりもレスポンスいいし、AIR ならアンドロイドで動くかもしれないので、おもしろいかもしれません。

Flex4バージョン



AR では、マーカーが必要なので、簡単にテストできるように画面上に画像貼っているので、そこへカメラを向ければ 3D モデル等を表示できます。画面上でドラッグすると字が書けますし、透過の画像をうまく配置すると吹き出しにセリフいれたり、その画像を 3D としてロードしてもいいです。ただ、3D 平面と 3D 球は位置固定なので使い勝手は悪いです。3D モデルは、データの座標を移動すれば位置は変えれますけど。



モデルは複数ロードできるので、座標を調整すると並んで表示できますが、なにもしないとこんな事になりますwww



※ 書いた文字は、色を白に変えて書くとリセットされます。


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	applicationComplete="initOk();"
	usePreloader="true"
>

<fx:Script>
<![CDATA[

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import mx.graphics.codec.PNGEncoder;
	import flash.external.*;
	import flash.media.Camera;
	import org.libspark.pv3d.Metasequoia_v;

	private var camera:Camera;
	private var fRef:FileReference;
	private var loader:Loader;
	private var actType:int = 0;

	private var sc:SimpleCube;

	private var m_status:Boolean = false;
	private var cvs_thickness:Number = 4;
	private var cmd_cnt:Number = 0;
	private var bmp:BitmapData = null;
	private var mqo_v:Metasequoia_v = null;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function firebug(data:Object):void {
	
		var fmt:DateFormatter = new DateFormatter();
	
		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );
	
		ExternalInterface.call(
			"console.log", logdt,
			data+""
		);
	
	}

	// *********************************************************
	// 初期処理
	// *********************************************************
	public function initOk():void {

		// NumericStepper のイベント処理
		ns.addEventListener( flash.events.Event.CHANGE,
			function(e:flash.events.Event):void {
				if ( mqo_v != null ) {
					mqo_v.scale = ns.value;
				}
			}
		);
		ns2.addEventListener( flash.events.Event.CHANGE,
			function(e:flash.events.Event):void {
				if ( mqo_v != null ) {
					mqo_v.rotationX = ns2.value;
				}
			}
		);

		camera = Camera.getCamera();
		if ( camera ) {
			sc = new SimpleCube();
			myImage.rawChildren.addChild(sc);
			firebug("FLARToolKit を追加しました");
		}


		// ファイルリファレンスの準備
		fRef = new FileReference();
		// ファイル保存用ダイアログを表示して保存する
		// ビルドに -target-player=10.0.12 オプションが必要
		// 以下の例では、エラー以外のイベントには空の無名関数が関係づけられています
		fRef.addEventListener(Event.OPEN, function(e:Event):void {} );
		fRef.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {} );
		fRef.addEventListener(Event.COMPLETE, function(e:Event):void {

			firebug( actType );
			// 処理完了後の処理

			// 読み出す
			if ( actType == 0 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					myImage.rawChildren.addChild(e.target.content);
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}
			if ( actType == 2 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					if ( camera ) {
						sc.loadImageNormal(e.target.content);
					}
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}

			if ( actType == 3 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					if ( camera ) {
						sc.loadImageBall(e.target.content);
					}
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}

			// 保存が完了
			if ( actType == 1 ) {
				firebug( "保存が完了しました" );
			}
		} );
		fRef.addEventListener(Event.CANCEL, function(e:Event):void {} );
		fRef.addEventListener(Event.SELECT, function(e:Event):void {
			// ファイル選択後の処理
			if ( actType == 0 ) {
				firebug( "ロードします" );
				FileReference(e.target).load();
				firebug( "ロードを開始しました" );
			}
			if ( actType == 2 ) {
				firebug( "3D平面ロードします" );
				FileReference(e.target).load();
				firebug( "3D平面ロードを開始しました" );
			}
			if ( actType == 3 ) {
				firebug( "3D球面ロードします" );
				FileReference(e.target).load();
				firebug( "3D球面ロードを開始しました" );
			}
			if ( actType == 1 ) {
				firebug( "保存します" );
			}
		} );
		fRef.addEventListener(IOErrorEvent.IO_ERROR, fRefError );


		// *************************************************
		// メタセコイア拡張のロード完了
		// *************************************************
		mqo_v = new Metasequoia_v();
		mqo_v.addEventListener(Event.COMPLETE, function(e:Event):void {

			sc.loadMqo(mqo_v);
			mqo_v.rotationX = -90;
			mqo_v.scale = 1;
			ns.value = 1;
			ns2.value = mqo_v.rotationX;

		});

	}

	// *********************************************************
	// 撮影と保存( Flash 全体 )
	// *********************************************************
	public function shot():void {

		myPanel.title = comment.text;

		var bitmap:Bitmap = new Bitmap();
		var bitmapData:BitmapData = new BitmapData(shotarea.width, shotarea.height);
		bitmap.bitmapData = bitmapData;
		bitmapData.draw(shotarea);

		var pngEnc:PNGEncoder = new PNGEncoder();
		var png:ByteArray = pngEnc.encode(bitmap.bitmapData);

		firebug( "撮影しました" );

		actType = 1;
		fRef.save( png, "shot.png" );

	}

	// *********************************************************
	// IOエラー
	// *********************************************************
	public function fRefError( e:IOErrorEvent ):void {
		Alert.show(e.text);
	}

	// *********************************************************
	// マウスダウン
	// *********************************************************
	public function Mouse_Down(e:flash.events.MouseEvent):void {

		m_status = true;
		cvs.graphics.moveTo(
			e.localX,
			e.localY
		);

	}

	// *********************************************************
	// マウスアップ
	// *********************************************************
	public function Mouse_Up(e:flash.events.MouseEvent):void {

		m_status = false;

	}

	// *********************************************************
	// マウス移動
	// *********************************************************
	public function Mouse_Move(e:flash.events.MouseEvent):void {

		if ( m_status ) {

			cvs_thickness = 4;
			if ( cp.selectedColor == 0xffffff ) {
				bmp = new BitmapData(640,480,true,0x00000000);
				cvs.graphics.clear();
				cvs.graphics.beginBitmapFill(bmp); 
				cvs.graphics.drawRect(0, 0, bmp.width, bmp.height); 
				cvs.graphics.endFill(); 
				cp.selectedColor = 0x000000;
				cvs.graphics.moveTo(
					e.localX,
					e.localY
				);
				return;
			}
			cvs.graphics.lineStyle(
				cvs_thickness,
				cp.selectedColor,
				1
			);
			cvs.graphics.lineTo(
				e.localX,
				e.localY
			);
			cmd_cnt++;
			if ( cmd_cnt > 20 ) {
				cmd_cnt = 0;
				Convert_bmp();
			}
			cvs.graphics.moveTo(
				e.localX,
				e.localY
			);
		}
	}

	// *********************************************************
	// 変換
	// *********************************************************
	public function Convert_bmp():void {

		if ( bmp == null ) {
			bmp = new BitmapData(640,480,true,0x00000000);
		}

		bmp.draw(cvs);
		cvs.graphics.clear();
		cvs.graphics.beginBitmapFill(bmp); 
		cvs.graphics.drawRect(0, 0, bmp.width, bmp.height); 
		cvs.graphics.endFill(); 

	}


]]>
</fx:Script>

<s:Panel
	id="myPanel"
	title="{comment.text}"
	top="10"
	left="10"
	right="10"
	bottom="10"
	mouseDown="Mouse_Down(event)"
	mouseUp="Mouse_Up(event)"
	mouseMove="Mouse_Move(event)"
	mouseOut="Mouse_Move(event)"
>
<s:BorderContainer id="shotarea" left="10" top="10">
	<mx:Canvas
		id="myImage"
		width="640"
		height="480"
	>
	</mx:Canvas>
	<s:SpriteVisualElement
		id="cvs"
		width="640" height="480"
	>
	</s:SpriteVisualElement>
</s:BorderContainer>

<s:VGroup left="10" y="500">
	<s:HGroup paddingTop="10">
		<mx:ColorPicker id="cp" showTextField="true" />
		<s:Button
			styleName="blackButton"
			id="shotButton"
			label="シャッターを押す"
			click="shot();"
			toolTip="撮影"
		/>
		<s:Button
			styleName="blackButton"
			id="loadButton"
			label="ローカル画像のロード"
			click="actType=0;fRef.browse();"
		/>
		<s:TextInput
			id="comment"
			width="250"
			text="メタセコイアとその他のロード"
		/>
	</s:HGroup>
	<s:HGroup paddingTop="10">
		<s:Button
			styleName="blackButton"
			id="load3DButton1"
			label="3D平面ロード"
			click="actType=2;fRef.browse();"
		/>
		<s:Button
			styleName="blackButton"
			id="load3DButton2"
			label="3D球面ロード"
			click="actType=3;fRef.browse();"
		/>
		<s:Button
			styleName="blackButton"
			id="load3DButton6"
			label="メタセコイアとテクスチャの入った ZIP 書庫"
			click="mqo_v.browse('zip');"
		/>
	
		<s:NumericStepper
			id="ns" 
			minimum="0.1"
			 maximum="5" 
			stepSize="0.1" 
			value="1.0" 
			width="60"
		/>
	
		<s:NumericStepper
			id="ns2" 
			minimum="-180"
			 maximum="180" 
			stepSize="10" 
			value="-90" 
			width="60"
		/>
	
	</s:HGroup>
</s:VGroup>


</s:Panel>


</s:Application>

Flex3 から Flex4 の移行にあたって、FLARToolkit のベースとなる Canvas はそのままにしていますが、他は Flex4 仕様です。ColorPicker は、mx しか無いようなのでそのままですが、Flex4 になって結構面倒な仕様変更が多かったですね。やっぱこれじゃあ、日本じゃまだはやんないと思います・・・・はあ。





著作者情報

FLARToolkit
saqoosha
[GPL License]

Metasequoia.as
Copyright (c) 2007-2008 rch850
Metasequoia_v.as
改造 : lightbox

TGADecoder.as
 Copyright (c) 2008 rch850

BMPDecoder.as
Copyright (c) 2007 munegon

Papervision3D
MIT ライセンス

モンスター 3D モデル
光陰像型(3Dキャラ)
初音ミクのライセンス
■ 権利者 : クリプトン・フューチャー・メディア株式会社
■ ライセンス名 : ピアプロ・キャラクター・ライセンス
( ※ キャラクター利用のガイドライン )



しかし、Google Chrome に埋め込まれてる Flash は、Flex でテキスト入力しようとすると、日本語が入力されないというバグがあります。標準の Flash に変更すれば正常になりますが、一般の人には無理でしょうから、作り手は HTML 上で入力させて取り込むという作業が必要ですね。やっぱはやんないなぁ・・・・

▼ 以下はその手順です。



chrome:plugins で表示したページの右上から詳細表示にしてすべての Flash プラグインを表示して、Windows なら gcswf32.dll を無効にする。


ひとりごと

マーカーを 3D 表示させて、そこに カメラ向けるとどうなるんだろ。


タグ:AIR flex FLARToolKit
posted by at 2012-05-21 11:50 | AIR Flex( WEB Flex ) | このブログの読者になる | 更新情報をチェックする

オンライン miku さん、好きな角度でどうぞ ( WebGL 限定・・・というか、Google Chrome か Firefoxのみ )


Mac の Safari なら WebGL on にして使えるかもしれません・・・

※ データが 12メガあるので、最初のロードはしばらく時間がかかります


カメラの移動キー ( マウスドラッグで FLY )
※ 移動してからの回転は、回転の中心が変化します ※ キーの同時押しは有効です
W前進S後退 A左移動D右移動
R上移動F下移動 Q左回転E右回転
Y同一視点上移動H同一視点下移動 G同一視点左移動J同一視点右移動
O対象物縦回転L対象物縦回転 K対象物横回転;対象物横回転

元データ( .mqo ) 配布サイト : hheaven.net

初音ミクのライセンス
■ 権利者 : クリプトン・フューチャー・メディア株式会社
■ ライセンス名 : ピアプロ・キャラクター・ライセンス
( ※ キャラクター利用のガイドライン )
posted by at 2012-05-21 02:27 | Three.js : その他 | このブログの読者になる | 更新情報をチェックする

2012年05月19日

Three.js の個別ソースを使った部分カスタマイズ

Three.js は多くのソースがビルドされて統合されているので、直接変更する事はできませんが、個別のソースコードを変更して、上書きしてカスタマイズする事ができます( Three.js というより、JavaScript 全般ですが )

<script  type="text/javascript" src="/three/Three_49.js"></script>
<script  type="text/javascript" src="/three/FlyControls.js"></script>
以下は、FlyControls クラスをカスタマイズして、キーボードの機能を拡張して対象物のまわりをカメラが周回できるようにしたものです。
/**
 * @author James Baicoianu / http://www.baicoianu.com/
 */

THREE.FlyControls = function ( object, domElement ) {

	this.object = object;

	this.domElement = ( domElement !== undefined ) ? domElement : document;
	if ( domElement ) this.domElement.setAttribute( 'tabindex', -1 );

	// API

	this.movementSpeed = 1.0;
	this.rollSpeed = 0.005;

	this.dragToLook = false;
	this.autoForward = false;

	// disable default target object behavior

	this.object.useQuaternion = true;

	// internals

	this.tmpQuaternion = new THREE.Quaternion();

	this.mouseStatus = 0;

	this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
	this.moveVector = new THREE.Vector3( 0, 0, 0 );
	this.rotationVector = new THREE.Vector3( 0, 0, 0 );

	this.handleEvent = function ( event ) {

		if ( typeof this[ event.type ] == 'function' ) {

			this[ event.type ]( event );

		}

	};

	this.keydown = function( event ) {

		if ( event.altKey ) {

			return;

		}

		switch( event.keyCode ) {


			case 16: /* shift */ this.movementSpeedMultiplier = .1; break;

			// 前進・後退
			case 87: /*W*/ this.moveState.forward = 1; break;
			case 83: /*S*/ this.moveState.back = 1; break;

			// 左右移動
			case 65: /*A*/ this.moveState.left = 1; break;
			case 68: /*D*/ this.moveState.right = 1; break;

			// 上下移動
			case 82: /*R*/ this.moveState.up = 1; break;
			case 70: /*F*/ this.moveState.down = 1; break;

			// Z 軸回転
			case 81: /*Q*/ this.moveState.rollLeft = 1; break;
			case 69: /*E*/ this.moveState.rollRight = 1; break;

			// 対象周辺円移動
			case 79: /*O*/ 
				this.moveState.pitchUp = 1; 
				this.moveState.down = 1;
				break;
			case 76: /*L*/ 
				this.moveState.pitchDown = 1;
				this.moveState.up = 1; 
				break;

			case 75: /*K*/
				this.moveState.yawLeft = 1; 
				this.moveState.right = 1
				break;
			case 187: /*;*/
				this.moveState.yawRight = 1; 
				this.moveState.left = 1
				break;

			// 同一視点移動
			case 89: /*Y*/ 
				this.moveState.pitchUp = 1; 
				break;
			case 72: /*H*/ 
				this.moveState.pitchDown = 1;
				break;

			case 71: /*G*/ 
				this.moveState.yawLeft = 1; 
				break;
			case 74: /*J*/ 
				this.moveState.yawRight = 1; 
				break;

		}

		this.updateMovementVector();
		this.updateRotationVector();

	};

	this.keyup = function( event ) {

		switch( event.keyCode ) {

			case 16: /* shift */ this.movementSpeedMultiplier = 1; break;

			// 前進・後退
			case 87: /*W*/ this.moveState.forward = 0; break;
			case 83: /*S*/ this.moveState.back = 0; break;

			// 左右移動
			case 65: /*A*/ this.moveState.left = 0; break;
			case 68: /*D*/ this.moveState.right = 0; break;

			// 上下移動
			case 82: /*R*/ this.moveState.up = 0; break;
			case 70: /*F*/ this.moveState.down = 0; break;

			// Z 軸回転
			case 81: /*Q*/ this.moveState.rollLeft = 0; break;
			case 69: /*E*/ this.moveState.rollRight = 0; break;

			// 対象周辺円移動
			case 79: /*O*/ 
				this.moveState.pitchUp = 0; 
				this.moveState.down = 0;
				break;
			case 76: /*L*/ 
				this.moveState.pitchDown = 0;
				this.moveState.up = 0; 
				break;

			case 75: /*K*/
				this.moveState.yawLeft = 0; 
				this.moveState.right = 0
				break;
			case 187: /*;*/
				this.moveState.yawRight = 0; 
				this.moveState.left = 0
				break;

			// 同一視点移動
			case 89: /*Y*/ 
				this.moveState.pitchUp = 0; 
				break;
			case 72: /*H*/ 
				this.moveState.pitchDown = 0;
				break;

			case 71: /*G*/ 
				this.moveState.yawLeft = 0; 
				break;
			case 74: /*J*/ 
				this.moveState.yawRight = 0; 
				break;

		}

		this.updateMovementVector();
		this.updateRotationVector();

	};

	this.mousedown = function( event ) {

		if ( this.domElement !== document ) {

			this.domElement.focus();

		}

		event.preventDefault();
		event.stopPropagation();

		if ( this.dragToLook ) {

			this.mouseStatus ++;

		} else {

			switch ( event.button ) {

				case 0: this.object.moveForward = true; break;
				case 2: this.object.moveBackward = true; break;

			}

		}

	};

	this.mousemove = function( event ) {

		if ( !this.dragToLook || this.mouseStatus > 0 ) {

			var container = this.getContainerDimensions();
			var halfWidth  = container.size[ 0 ] / 2;
			var halfHeight = container.size[ 1 ] / 2;

			this.moveState.yawLeft   = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth  ) / halfWidth;
			this.moveState.pitchDown =   ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;

			this.updateRotationVector();

		}

	};

	this.mouseup = function( event ) {

		event.preventDefault();
		event.stopPropagation();

		if ( this.dragToLook ) {

			this.mouseStatus --;

			this.moveState.yawLeft = this.moveState.pitchDown = 0;

		} else {

			switch ( event.button ) {

				case 0: this.moveForward = false; break;
				case 2: this.moveBackward = false; break;

			}

		}

		this.updateRotationVector();

	};

	this.update = function( delta ) {

		var moveMult = delta * this.movementSpeed;
		var rotMult = delta * this.rollSpeed;

		this.object.translateX( this.moveVector.x * moveMult );
		this.object.translateY( this.moveVector.y * moveMult );
		this.object.translateZ( this.moveVector.z * moveMult );

		this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize();
		this.object.quaternion.multiplySelf( this.tmpQuaternion );

		this.object.matrix.setPosition( this.object.position );
		this.object.matrix.setRotationFromQuaternion( this.object.quaternion );
		this.object.matrixWorldNeedsUpdate = true;


	};

	this.updateMovementVector = function() {

		var forward = ( this.moveState.forward || ( this.autoForward && !this.moveState.back ) ) ? 1 : 0;

		this.moveVector.x = ( -this.moveState.left    + this.moveState.right );
		this.moveVector.y = ( -this.moveState.down    + this.moveState.up );
		this.moveVector.z = ( -forward + this.moveState.back );

		//console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );

	};

	this.updateRotationVector = function() {

		this.rotationVector.x = ( -this.moveState.pitchDown + this.moveState.pitchUp );
		this.rotationVector.y = ( -this.moveState.yawRight  + this.moveState.yawLeft );
		this.rotationVector.z = ( -this.moveState.rollRight + this.moveState.rollLeft );

		//console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );

	};

	this.getContainerDimensions = function() {

		if ( this.domElement != document ) {

			return {
				size	: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
				offset	: [ this.domElement.offsetLeft,  this.domElement.offsetTop ]
			};

		} else {

			return {
				size	: [ window.innerWidth, window.innerHeight ],
				offset	: [ 0, 0 ]
			};

		}

	};

	function bind( scope, fn ) {

		return function () {

			fn.apply( scope, arguments );

		};

	};

	this.domElement.addEventListener( 'mousemove', bind( this, this.mousemove ), false );
	this.domElement.addEventListener( 'mousedown', bind( this, this.mousedown ), false );
	this.domElement.addEventListener( 'mouseup',   bind( this, this.mouseup ), false );

	this.domElement.addEventListener( 'keydown', bind( this, this.keydown ), false );
	this.domElement.addEventListener( 'keyup',   bind( this, this.keyup ), false );

	this.updateMovementVector();
	this.updateRotationVector();

};



以下から実際のテストページへ移動します。

※ データが 12メガあるので、最初のロードはしばらく時間がかかります。

専門的な事は解りませんが、事象として 『 同一視点移動』は、カメラを垂直方向へ移動して、その際視点の移動が発生するので、それを元に戻す為に回転運動を付加しているようでした。そこで、その移動部分を相殺して回転運動だけを残しています。


タグ:Three.js 3D
posted by at 2012-05-19 01:27 | Three.js | このブログの読者になる | 更新情報をチェックする

2012年05月18日

GIMP Portable Rev 4 がリリースされました。GIMP Portable も テーマを変更してみましょう

OSX-theme



まだ、リリースされたばかり(2012/5/18)の Rev 4 ですが、結局 Window7 のクラシックテーマでは、メニューが色の設定のかげんでうまく表示されないので、テーマを設定してみました

Gimp Themes v1.0 for Windows というソフトウェアを使いますが、そのままでは使えないので、少し手を加えます。

GIMP Portable のインストール

ダウンロード







Gimp Themes v1.0 for Windows のインストール





Program Files にインストールしようとしますが、自分自身以外に、Program Files に通常 GIMP の通常のフォルダがあるという前提で動作するようになっています。ですから、インストール後に必要なフォルダをまとめて GIMP Portable のフォルダ内にコピーします。



※ これらをフォルダごと以下のフォルダ内にコピーして全て上書きして下さい



調整

C:\GIMPPortable\App\gimp\bin に テーマ.bat を作成して以下のように書き込みます。

Gimpthemes-v1.0.exe
copy %USERPROFILE%\.gtkrc-2.0 C:\GIMPPortable\App\gimp\etc\gtk-2.0\gtkrc

※ %USERPROFILE% は、Windows7(8) では、C:\Users\ユーザ となる場所です。

このバッチファイルを起動すると、以下のようになります。


( 詳細プレビューを開いた状態です )

これでテーマを選択して、OK で書き込んで終了します。後は、GIMP Portable を起動するだけです。Gimp Themes v1.0 for Windows は、アンインストールしてかまいません。

(注意) Aurora が頭に付いたテーマは表示の更新がうまくなされないので使わないほうが良いです。

このソフト(Gimp Themes v1.0 for Windows)は、通常の GIMP を前提としているので(しかもかなり環境は決め打ち) .gtkrc-2.0 をユーザフォルダに書き込むようになっていますが、GIMP Portable はそれを参照しないので、バッチファイル内で直接コピーしています。

バッチファイルは、デスクトップにショートカットを作っても問題ありません。作業ディレクトリがバッチファイルのある場所であれは動作します。もともと、GIMP の bin フォルダに自分自身をコピーするような仕様になっているので、GIMP が他の場所にあると 『dll が無い』というエラーが出ます。通常の GIMP でもフォルダごとコピーしてしまって、GIMP の bin ディレクトリから Gimpthemes-v1.0.exe を実行すればエラーはでません。



Clearlooks Human Dark




テーマファイルは、自分でカスタマイズできそうですが、そこまでする理由も無いので無理しないほうがいいと思います。それでなくても、バージョンアップで動かなくなる事も予想されますし。


タグ:GIMP
posted by at 2012-05-18 19:09 | GIMP | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX