３次元グラフ描画（Plot3Dクラス）／２次元・３次元格子データのグラフ描画クラス「Graph.js」

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

３次元グラフ描画（Plot3Dクラス）の生成

//グローバル変数の宣言
var plot3D; //３次元グラフオブジェクト
var xmin = -10;
var xmax = 10;
var ymin = -10;
var ymax = 10;

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

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 );
		}
	}

	//３次元グラフオブジェクトの生成
	plot3D = new GRAPH.Plot3D({
		N : N,     //頂点の数
		min : -1,  //最小値
		max : 1,   //最大値
		opacity : 1.0,     //不透明度
		doubleSide : true, //両面描画
		hightScale : 0.5,  //高さのスケール
		colorParameter : { //描画色関連パラメータ
			variable : true, //描画色変化の有無
			HSLMode : true,  //HSLモードの指定
		},
		checkeredPatternMode : { //市松模様関連パラメータ
			enabled : true,  //市松模様利用の有無
			width : 5,       //市松模様の格子間隔
			L: 0.4           //市松模様暗部のHSLのL値
		},
		ticsLength : 0.05,    //目盛の長さ
		ticsColor : 0x888888, //目盛の色
		fieldValues : values
	});

	（省略）
}

３次元グラフ描画（Plot3Dクラス）の実装例

三角関数の積　「z = sin(x) × cos(y)」　の描画結果です。 ３次元グラフ描画（Plot3Dクラス） 独立ページはこちら。

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

メソッド

その他の描画結果

「 ( Math.sin( Math.sqrt( x*x+y*y )) ) / Math.sqrt( x*x+y*y ) 」 の描画結果

「 Math.exp( - ( x*x + y*y )/10 ) 」 の描画結果