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

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

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

//グローバル変数の宣言
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 );
		}
	}

	//２次元カラーマップオブジェクトの生成
	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
	});

	（省略）
}

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

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

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

メソッド

その他の描画結果

「 HSLMode = true 」 の描画結果