[从头学数学] 第116节 相交线与平行线

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼，
这次要修炼的目标是[相交线与平行线]。

正剧开始：

星历2016年03月02日 09:41:52, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[相交线与平行线]。

从本节开始，小伟就进入了筑期初期后半段的修炼。

既然这次是要研究相交，小伟先思考了一下关于平面相交的问题：

<span style="font-size:18px;">function myDraw() {     
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
    config.axis3D(0, 0, 0, 180);  
      
    var r = 100;  
	var bound = [[-r, -r], [-r, r], [r, r], [r, -r]];
	
	
	
	var x, y, z;
	var array = [];
	//第一个平面 y = z-x;
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = z-x;
		array.push(point3D(x, -y, z));
		
	}
	
	//array = shape.xyzSort(array);
	
	var tmp = [].concat(array);
	shape.fillDraw(tmp, 'red');
	
	plot.setGlobalAlpha(0.5);
	
	//plot.setGlobalCompositeOperation('destination-out');
	
	var array2 = [];
	
	//第二个平面 y = x-z;
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = x-z;
		array2.push(point3D(x, -y, z));
		
	}
	
	tmp = [].concat(array2);
	shape.fillDraw(tmp, 'blue');      
}
</span>

但是这样明显没有处理好图形的遮掩关系，于是小伟又想了一会：

<span style="font-size:18px;">function myDraw() {     
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
    config.axis3D(0, 0, 0, 180);  
      
    var r = 100;  
	var bound = [[-r, -r], [-r, r], [r, r], [r, -r]];
	var intersection = [];
	intersection.push(point3D(0, -r, r));
	intersection.push(point3D(0, r, -r));
	
	plot.setGlobalAlpha(0.9);
	
	var x, y, z;
	var array = [];
	//第一个平面 y = z-x;
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = z-x;
		array.push(point3D(x, -y, z));
		
	}
	
	var array2 = [];
	
	//第二个平面 y = x-z;
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = x-z;
		array2.push(point3D(x, -y, z));
		
	}
	
	//array = shape.xyzSort(array);
	
	var tmp;

	tmp = [intersection[0], intersection[1], array[3], array[2]];
	shape.fillDraw(tmp, 'red');
	
		tmp = [array2[0], array2[1], intersection[1], intersection[0]];
	shape.fillDraw(tmp, 'blue');

		tmp = [intersection[1], intersection[0], array2[3], array2[2]];
	shape.fillDraw(tmp, 'blue');
		tmp = [array[0], array[1], intersection[0], intersection[1]];
	shape.fillDraw(tmp, 'red');
	

      
}
</span>

但是这个代价非常的大，两个平面被分成了四个不说，还要先求相交线，相交点，然后还要按顺序进行绘制，太麻烦了。

小伟现在也没有什么好办法，先放着吧。

画两条相交线吧：

<span style="font-size:18px;">function myDraw() {     
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
    config.axis3D(0, 0, 0, 180);  
      
    var r = 100;  
	var bound = [[-r, -r], [-r, r], [r, r], [r, -r]];
	
	
	var x, y, z;
	var array = [];
	
	//平面y=z-x
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = z-x;
		array.push(point3D(x, -y, z));
		
	}
	
	plot.setStrokeStyle('red');
	plot.beginPath()
		.moveTo(array[0][0], array[0][1])
		.lineTo(array[2][0], array[2][1])
		.closePath()
		.stroke();
		
	plot.setStrokeStyle('blue');
	plot.beginPath()
		.moveTo(array[1][0], array[1][1])
		.lineTo(array[3][0], array[3][1])
		.closePath()
		.stroke();

      
}</span>

<span style="font-size:18px;">function myDraw() {     
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
    config.axis3D(0, 0, 0, 180);  
      
    var r = 100;  
	var bound = [[-r, -r], [-r, r], [r, r], [r, -r]];
	
	
	var x, y, z;
	var array = [];
	
	//平面y=z-x
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = z-x;
		array.push(point3D(x, -y, z));
		
	}
	
	plot.setStrokeStyle('red');
	plot.beginPath()
		.moveTo(array[0][0], array[0][1])
		.lineTo(array[1][0], array[1][1])
		.closePath()
		.stroke();
		
	plot.setStrokeStyle('blue');
	plot.beginPath()
		.moveTo(array[0][0], array[0][1])
		.lineTo(array[3][0], array[3][1])
		.closePath()
		.stroke();

      
}</span>

三维中的垂直，就是这么地难以想象。

<span style="font-size:18px;">function myDraw() {     
    var config = new PlotConfiguration();      
    config.init();      
    config.setPreference();     
    config.setSector(1,1,1,1);  
    config.axis3D(0, 0, 0, 180);  
      
    var r = 100;  
	var bound = [[-r, -r], [-r, r], [r, r], [r, -r]];
	
	
	var x, y, z;
	var array = [];
	
	//平面y=z-x
	for (var i = 0; i < 4; i++) {
		x = bound[i][0];
		z = bound[i][1];
		y = z-x;
		array.push(point3D(x, -y, z));
		
	}
	
	plot.setStrokeStyle('red');
	plot.beginPath()
		.moveTo(array[0][0], array[0][1])
		.lineTo(array[1][0], array[1][1])
		.closePath()
		.stroke();
		
	plot.setStrokeStyle('blue');
	plot.beginPath()
		.moveTo(array[2][0], array[2][1])
		.lineTo(array[3][0], array[3][1])
		.closePath()
		.stroke();

      
}</span>

平行关系还是能一目了然的。

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