HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > 仮想物理実験室

3次元カラーマップの例/2次元・3次元格子データのグラフ描画クラス「Graph.js」

文責:遠藤 理平 (2016年3月23日) カテゴリ:仮想物理実験室(325)

2次元・3次元格子データのグラフ描画クラス「Graph.js」を用いて作成する3次元カラーマップを紹介します。

3次元カラーマップの生成

//グローバル変数の宣言
var colormap; //カラーマップ3Dオブジェクト
var xmin = -10;
var xmax = 10;
var ymin = -10;
var ymax = 10;
var zmin = -10;
var zmax = 10;

//描画する関数
function F( x, y, z, t ){
	var x0 = 0 * Math.cos( Math.PI/100 * t );
	var y0 = 0 * Math.sin( Math.PI/100 * t );
	var z0 = 0;
	x = x - x0;
	y = y - y0;
	z = z - z0;
	//中心からの距離
	var r = Math.sqrt( x * x + y * y + z * z );
	return ( 3 * z * z - r * r ) * Math.exp( - r / 2 );
}

function initObject() {

	var N = 128;
	var values = []
	for (var i = 0; i <= N; i++) {
		values[ i ] = [];
		for (var j = 0; j <= N; j++) {
			values[ i ][ j ] = [];
			for (var k = 0; k <= N; k++) {
				var x = xmin + (xmax - xmin) * i / N;
				var y = ymin + (ymax - ymin) * j / N;
				var z = zmin + (zmax - zmin) * k / N;
				values[i][j][k] = F( x, y, z, 0 );
			}
		}
	}

	//3次元カラーマップオブジェクトの生成
	colormap = new GRAPH.Colormap3D( {
		N : N,   //頂点の数
		l : 1/N, //格子間隔
		min : -3,          //最小値
		max : 3,           //最大値
		colorParameter : {
			backWhite : false, //RGBモード時の0点を白とするフラグ
			HSLMode : false,   //HSLモード実行のフラグ
			H0 : 0.70,         //Hの始点(HSLモード時)
			Hw : 0.73,         //Hの変化の傾き(HSLモード時)
			S : 1,             //Sの値(HSLモード時)
			L : 0.5            //Lの値(HSLモード時)
		},
		transparentMode : {    //透過時のパラメータ
			enabled : true,    //透過の有無
			factor : 1         //透過度合い
		},
		fieldValues :values    //3次元空間データの指定
	});

	(省略)
}

3次元カラーマップの実装例

水素原子の3D軌道の例。マウスドラックでカメラ操作と3次元空間中の2次元カラーマップ平面を移動することができます。 3次元カラーマップ独立ページはこちら

コンストラクタの引数(プロパティ)

プロパティデータ型デフォルト説明
N<int>1002次元カラーマップを構成する正方格子の格子点数。
l<float>1.0/N格子間隔。
min <float>0描画する場の量の最小値。
max <float>1描画する場の量の最大値。
colorParameter<object> {
HSLMode : false,
H0 : 0.70,
Hw : 0.73,
S : 1,
L : 0.5,
backWhite : false
}
カラーマップの配色を指定するパラメータ。
HSLMode : HSLモード実行のフラグ
H0 : Hの始点(HSLモード時)
Hw : Hの変化(HSLモード時)
S : Sの値(HSLモード時)
L : Lの値(HSLモード時)
backWhite :中間値を白とするフラグ(RGBモード時)
fieldValues[[[<float>]]][[[]]]カラーマップ化する3次元空間の場の量を格納する3次元配列。コンストラクタの引数あるいはsetValueメソッドで設定可能。
transparentMode<object> {
enabled: false,
factor : 1
}
2次元カラーマップの透過性を考慮した描画にに必要な情報が格納されたプロパティ。enabledプロパティにtrueが指定された場合、描画色の指定方法が頂点色からテクスチャマッピングへと変更される。
enabled:透過利用の有無
factor:不透過度因子(大きいほど透明度が下がる)
checkeredPatternMode<object> {
enabled : false
width : 5
L : 0.4
}
2次元カラーマップの市松模様描画に必要な情報が格納されたプロパティ。カラーマップの配色がHSLモード時のみ対応。
enabled : 市松模様利用の有無
width : 市松模様の格子間隔
L : 市松模様暗部のHSL色のL値

メソッド

メソッドデータ型デフォルト説明
updateColormap (updateXYplane,
updateYZplane,
updateZXplane )
<bool>,
<bool>,
<bool>
なし fieldValuesプロパティに指定された場の量に対する各2次元カラーマップの更新を行う。更新する2次元カラーマップ(xy平面、yz平面、zx平面)は 上記update○○planeプロパティにtrueを与えるか、本メソッドの3つの該当引数にtrueを与えることで指定することができる。
setValue ( i , j, k, value )<int>,<int>, <int>,<float>なし引数i, j, kで指定した3次元空間の場の量(fieldValuesプロパティ)を設定する。

その他の描画結果

「transparentMode.transparent = false」の実行結果



▲このページのトップNPO法人 natural science トップ

関連記事

仮想物理実験室







▲このページのトップNPO法人 natural science トップ




Warning: mysqli_connect(): (28000/1045): Access denied for user 'xsvx1015071_ri'@'sv102.xserver.jp' (using password: YES) in /home/xsvx1015071/include/natural-science/include_counter-d.php on line 8
MySQL DBとの接続に失敗しました