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

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

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

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

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

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

function F( x, y, t ){
	var omega = Math.PI/40;
	return Math.sin( x/2 + t*omega ) * Math.sin( y/2 + t*omega ) ;
}

function initObject() {

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

	//2次元カラーマップオブジェクトの生成
	colormap = new GRAPH.Colormap2D( {
		N : 100,   //頂点の数
		l : 1/100, //格子間隔
		min : -1,          //最小値
		max : 1,           //最大値
		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モード時)
		},
		fieldValues :values
	});

	(省略)
}

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

三角関数の積 「z = sin(x) × cos(y)」 の描画結果です。 2次元カラーマップ独立ページはこちら

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

プロパティデータ型デフォルト説明
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 ()なしなし fieldValuesプロパティに指定された場の量に対する各2次元カラーマップの更新を行う。
setValue ( i , j, value )<int>,<int>,<float>なし引数i, jで指定した2次元空間の場の量(fieldValuesプロパティ)を設定する。

その他の描画結果

「 HSLMode = true 」 の描画結果



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

関連記事

仮想物理実験室







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