[从头学数学] 第170节 空间几何体

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了结丹初期的修炼，
这次要修炼的目标是[空间几何体]。

正剧开始：

星历2016年04月10日 09:06:46, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[空间几何体]。

这些都是这样画出来的：

<span style="font-size:18px;">//获取椭圆上点的坐标
function ellipse(a, b) {
	//a, b 分别为椭圆的长、短半轴
	var retArray = new Array();
	var thita = 0;
	//椭圆的圆周分成的线段数量，这个值越大越精确
	var N = 32;
	var deltaThita = Math.PI*2/N;
	var x = y = 0;
	
	for (var i = 0; i < N; i++) {
		x = a*Math.cos(thita);
		y = b*Math.sin(thita);
		
		retArray.push([x, y]);
		
		thita += deltaThita;
	}
	
	return retArray;
}</span>

<span style="font-size:18px;">//勾勒侧面
	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);
		
		var transform = new Transform();
		
		var a = 5*r, b = 3*r;
		var topFace = ellipse(a, b);
		var bottomFace = transform.translate(topFace, 0, -100);
		
		
		var size = topFace.length;
		
		var vertFace = [];
		for (var i = 0; i < size; i++) {
			vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
		}
		
		
		lineDraw(vertFace, 'blue', 1);
		shape.strokeDraw([].concat(bottomFace), 'pink');
		shape.fillDraw([].concat(topFace), 'red');
		
		
	
	
	}
	
	
}

function lineDraw(array, style, scale) {
	//array的格式[ [线段起点(x,y), 线段终点(x, y)], ...], 每条线段有四个元素确定
	style = style ? style : 'black';
	scale = scale ? scale : 1;
	
	var newArray = new Array();
	
	var size = array.length;
	var itemSize = array[0].length;
	var item = [];
	
	//缩放步骤
	for (var i = 0; i < size; i++) {
		item = [];
		for (var j = 0; j < itemSize; j++) {
			if (j % 2 == 0) { //x坐标
				item.push(array[i][j] * scale);
			}
			else { //y坐标
				item.push(- array[i][j] * scale);
			}
		}
		
		newArray.push(item);
	}
	
	//document.write(newArray.join(', '));
	
	
	plot.save()
		.setStrokeStyle(style);
		
	for (var i = 0; i < size; i++) {
		plot.beginPath()
			.moveTo(newArray[i][0], newArray[i][1])
			.lineTo(newArray[i][2], newArray[i][3])
			.closePath()
			.stroke();
	}
	
	plot.restore();
}</span>

各种形状的变动：

<span style="font-size:18px;">		var a = 5*r, b = 3*r;
		var topFace = shape.paraquad(0, 0, 0, a, b, Math.PI/3);
		var bottomFace = transform.translate(topFace, 0, -100);</span>

这是一个平行四边形，还有其它各种形状，就不贴出来了，大致一样。

下面小伟看一下有没有可能给侧面填上颜色。

这个有趣的图是这样得到的：

<span style="font-size:18px;">	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);
		
		var transform = new Transform();
		
		var a = 5*r, b = 3*r;
		var topFace = shape.nStar(0, 0, a, 5);
		var bottomFace = transform.translate(topFace, 0, -100);
		
		
		//垂直侧面的处理
		var size = topFace.length;
		
		var vertFace = [];
		for (var i = 1; i < size; i+=2) {
			vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
		}
		
		
		faceDraw(vertFace, 'blue', 1);
		shape.strokeDraw([].concat(bottomFace), 'pink');
		shape.fillDraw([].concat(topFace), 'red');
		
		
	
	
	}</span>

当然，少不了这个侧面填色工具：

<span style="font-size:18px;">function faceDraw(array, style, scale) {
	//array的格式[ [线段起点(x,y), 线段终点(x, y)], ...], 每条线段有四个元素确定
	style = style ? style : 'black';
	scale = scale ? scale : 1;
	
	var newArray = new Array();
	
	var size = array.length;
	var itemSize = array[0].length;
	var item = [];
	
	//缩放步骤
	for (var i = 0; i < size; i++) {
		item = [];
		for (var j = 0; j < itemSize; j++) {
			if (j % 2 == 0) { //x坐标
				item.push(array[i][j] * scale);
			}
			else { //y坐标
				item.push(- array[i][j] * scale);
			}
		}
		
		newArray.push(item);
	}
	
	//document.write(newArray.join(', '));
	
	
	plot.save()
		.setFillStyle(style)
		.setStrokeStyle('yellow')
		.setLineWidth(4);
		
	var x1 = x2 = y1 = y2 = 0,
		x3 = x4 = y3 = y4 = 0;
	for (var i = 0; i < size; i++) {
		x1 = newArray[i][0];
		y1 = newArray[i][1];
		x2 = newArray[i][2];
		y2 = newArray[i][3];	
		
		if (i < size - 1) {
			x3 = newArray[i+1][0];
			y3 = newArray[i+1][1];
			x4 = newArray[i+1][2];
			y4 = newArray[i+1][3];
		}
		else {
			x3 = newArray[0][0];
			y3 = newArray[0][1];
			x4 = newArray[0][2];
			y4 = newArray[0][3];
		}
		
		
		plot.beginPath()
			.moveTo(x1, y1)
			.lineTo(x2, y2)
			.lineTo(x4, y4)
			.lineTo(x3, y3)
			.closePath()
			.fill();
			

	}
	
	for (var i = 0; i < size; i++) {
		x1 = newArray[i][0];
		y1 = newArray[i][1];
		x2 = newArray[i][2];
		y2 = newArray[i][3];
		
					
		plot.beginPath()
			.moveTo(x1, y1)
			.lineTo(x2, y2)
			.closePath()
			.stroke();
	}
		
	
	plot.restore();
}</span>

如果不用直观图的画法，画出来的就不太有立体感：

<span style="font-size:18px;">	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis2D(0, 0, 180);
		
		var transform = new Transform();
		
		var a = 5*r, b = 3*r;
		var topFace = shape.nEdge(0, 0, b, 4);
		var bottomFace = transform.scale(transform.translate(topFace, 0, -100), 1.5, 1.2);
		
		
		//垂直侧面的处理
		var size = topFace.length;
		
		var vertFace = [];
		for (var i = 0; i < size; i++) {
			vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
		}
		
		
		faceDraw(vertFace, 'blue', 1);
		shape.strokeDraw([].concat(bottomFace), 'pink');
		shape.fillDraw([].concat(topFace), 'red');
		
		
	
	
	}</span>

就像这样：

好了，小伟该要好好学习一下这个斜二测画法了，要不然可画不出好看的图来。

[人叫板老师]这么一大堆的步骤，小伟真没看懂，不过，小伟有自己的方法，先看一下结果吧：

好像是一样的，是吧，这个是这样画出来的：

<span style="font-size:18px;">	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis3D(0, 0, 0, 180);
		
		var transform = new Transform();
		
		var a = 5*r, b = 3*r;
		var topFace = shape.nEdge(0, 0, b, 6);
		
		var size = topFace.length;
		
		var array = [];
		for (var i = 0; i < size; i++) {
			array.push(shape.point3D(topFace[i][0], 0, topFace[i][1]));
		}
		
		array = transform.flipY(array);
		shape.angleDraw([].concat(array), 'red', 3);

		
	
	
	}</span>

再看一下椭圆吧：

哇哦，太酷了，这是不是传说中的[逆星盘]啊。

<span style="font-size:18px;">	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis3D(0, 0, 0, 180);
		
		var transform = new Transform();
		
		var a = 5*r, b = 3*r;
		var topFace = ellipse(a, b);
		
		var size = topFace.length;
		
		var array = [];
		for (var i = 0; i < size; i++) {
			array.push(shape.point3D(topFace[i][0], 0, topFace[i][1]));
		}
		
		array = transform.flipY(array);
		shape.angleDraw([].concat(array), 'red', 3);

		
	
	
	}</span>

其实也就是这么个形状：

这个长方体太小了，实在不够威猛霸气。

<span style="font-size:18px;">	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis3D(0, 0, 0, 180);
		
		var transform = new Transform();
		
		var a = 4*r, b = 3*r, h = 2*r;
		var array = shape.paraquad(0, 0, 0, a, b, Math.PI/2);
		
		var size = array.length;
		
		var topFace = [], bottomFace = [];
		for (var i = 0; i < size; i++) {
			topFace.push(shape.point3D(array[i][0], 0, array[i][1]));
			bottomFace.push(shape.point3D(array[i][0], -h, array[i][1]));
		}
		
		topFace = transform.flipY(topFace);
		bottomFace = transform.flipY(bottomFace);
		
		//垂直侧面的处理
		var size = topFace.length;
		
		var vertFace = [];
		for (var i = 0; i < size; i++) {
			vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
		}
		
		
		faceDraw(vertFace, 'blue', 1);
		shape.strokeDraw([].concat(bottomFace), 'pink');
		shape.fillDraw([].concat(topFace), 'red');

		
	
	
	}</span>

<span style="font-size:18px;">	if (1) {
		var r = 20;
		config.setSector(1,1,1,1);
		config.graphPaper2D(0, 0, r);
		config.axis3D(0, 0, 0, 180);
		
		var transform = new Transform();
		
		var a = 4*r, b = a, h = 2*r;
		var array = ellipse(a, a);
		
		var size = array.length;
		
		var topFace = [], bottomFace = [];
		for (var i = 0; i < size; i++) {
			topFace.push(shape.point3D(array[i][0], 0, array[i][1]));
			bottomFace.push(shape.point3D(array[i][0], -h, array[i][1]));
		}
		
		topFace = transform.flipY(topFace);
		bottomFace = transform.flipY(bottomFace);
		
		//垂直侧面的处理
		var size = topFace.length;
		
		var vertFace = [];
		for (var i = 0; i < size; i++) {
			vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
		}
		
		faceDraw(vertFace, 'blue', 1);
		
		vertFace = [];
		for (var i = 0; i < size; i++) {
			vertFace.push([topFace[i][0], topFace[i][1], 0, 100]);
		}
		
		
		
		shape.strokeDraw([].concat(bottomFace), 'pink',1);
		shape.fillDraw([].concat(topFace), 'red', 1);

		faceDraw(vertFace, 'cyan', 1);
	
	
	}</span>

这个椭圆总是不怎么正，为什么会这样呢，小伟想不明白。其它多边形都没这个问题啊。

<span style="font-size:18px;">		var a = 4*r, b = a, h = 2*r;
		var edges = 5;
		var array = shape.nEdge(0, 0, a, edges, -Math.PI);</span>

算了，调不出来，先放着吧。

本节到此结束，欲知后事如何，请看下回分解。