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

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

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

//グローバル変数の宣言
var colormap; //カラーマップ３Dオブジェクト
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 );
			}
		}
	}

	//３次元カラーマップオブジェクトの生成
	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    //３次元空間データの指定
	});

	（省略）
}

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

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

コンストラクタの引数（プロパティ）

メソッド

その他の描画結果

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