[从头学数学] 第86节 图形的运动（三）

剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入练气期第十层功法的修炼，
这次要修炼的目标是[图形的运动（三）]。

正剧开始：

星历2016年02月14日 12:46:34, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究图形的运动。

小伟记得这是旋转现象。

小伟拿出了好久没有使用过的三角板，学着[人叫板老师]进行着旋转：

<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 ruler = new Ruler();
	
	config.setSector(2,2,1,1); 
	ruler.angle45(0,0,0);
	
	config.setSector(2,2,1,2); 
	ruler.angle45(0,0,-Math.PI/2);
	
	config.setSector(2,2,2,2); 
	ruler.angle45(0,0,-Math.PI);
	
	config.setSector(2,2,2,1); 
	ruler.angle45(0,0,-3*Math.PI/2);
	

}
</span>

但是[人叫板老师]又玩起了三角形。

<span style="font-size:18px;">function Triangle() {
	this.edges = [];
	this.angles = [];
	
	//已知三条边
	this.know3edges = function(edges) {
		this.edges = edges;
		//角度为弧度单位
		//a边对应角
		this.angles.push(Math.acos((edges[1]*edges[1] + edges[2]*edges[2]-edges[0]*edges[0])/(2*edges[1]*edges[2])));
		
		//b边对应角
		this.angles.push(Math.acos((edges[0]*edges[0] + edges[2]*edges[2]-edges[1]*edges[1])/(2*edges[0]*edges[2])));
		
		//c边对应角
		this.angles.push(Math.acos((edges[0]*edges[0] + edges[1]*edges[1]-edges[2]*edges[2])/(2*edges[0]*edges[1])));	
	
	}
	
	this.draw = function(scale) {
		scale = scale ? scale : 1;
		plot.save()
			.setLineWidth(3)
			.setStrokeStyle('red');
			
		var x0 = 0, y0 = 0;
		var x1 = x0 + this.edges[0], y1 = y0;
		var x2 = x0 + this.edges[1] * Math.cos(-this.angles[2]),
			y2 = y0 + this.edges[1] * Math.sin(-this.angles[2]);
			
		//为了应对边长可能过大或过小的情况，绘图时引入缩放比例scale
		x0 = x0*scale, y0 = y0 * scale;
		x1 = x1 * scale, y1 = y1 * scale;
		x2 = x2 * scale, y2 = y2 * scale;
		
		plot.fillText('B', x0, y0, 20);
		plot.fillText('A', x1, y1, 20);
		plot.fillText('C', x2, y2, 20);
		
		plot.beginPath()
			.moveTo(x0, y0)
			.lineTo(x1, y1)
			.lineTo(x2, y2)
			.closePath()
			.stroke();
			
		plot.restore();
	
	}
	
	this.print = function() {
		var angleLabel = ['C', 'A', 'B'];
		var edgeLabel = ['ab', 'bc', 'ac'];
		var s = '';
		
		for (var i = 0; i < 3; i++) {
			s += edgeLabel[i]+' : ';
			s += this.edges[i].toFixed(2)+' ; ';
		}
		
		for (var i = 0; i < 3; i++) {
			s += angleLabel[i]+' : ';
			s += (this.angles[i]*180/Math.PI).toFixed(2) + ' ; ';
		}
		
		return s;
	}
			

}

function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
    config.setSector(1,1,1,1);  
    config.axis2D(0, 0, 180);  
	
	var tri = new Triangle();
	tri.know3edges([100, 100, 141]);
	tri.draw(1);

	
	plot.rotate(Math.PI/2);
	tri.know3edges([100, 100, 141]);
	tri.draw(1);
	
}</span>

说到会玩，小伟觉得谁都比不了[人叫板老师]，这不，风车也出来了：

小伟也很想玩风车，就让[工程师阿伟]做了一个：

<span style="font-size:18px;">function Triangle() {
	this.edges = [];
	this.angles = [];
	
	//已知三条边
	this.know3edges = function(edges) {
		this.edges = edges;
		//角度为弧度单位
		//a边对应角
		this.angles.push(Math.acos((edges[1]*edges[1] + edges[2]*edges[2]-edges[0]*edges[0])/(2*edges[1]*edges[2])));
		
		//b边对应角
		this.angles.push(Math.acos((edges[0]*edges[0] + edges[2]*edges[2]-edges[1]*edges[1])/(2*edges[0]*edges[2])));
		
		//c边对应角
		this.angles.push(Math.acos((edges[0]*edges[0] + edges[1]*edges[1]-edges[2]*edges[2])/(2*edges[0]*edges[1])));	
	
	}
	
	this.stroke = function(style, scale) {
		style = style ? style : 'red';
		scale = scale ? scale : 1;
		plot.save()
			.setLineWidth(3)
			.setStrokeStyle(style);
			
		var x0 = 0, y0 = 0;
		var x1 = x0 + this.edges[0], y1 = y0;
		var x2 = x0 + this.edges[1] * Math.cos(-this.angles[2]),
			y2 = y0 + this.edges[1] * Math.sin(-this.angles[2]);
			
		//为了应对边长可能过大或过小的情况，绘图时引入缩放比例scale
		x0 = x0*scale, y0 = y0 * scale;
		x1 = x1 * scale, y1 = y1 * scale;
		x2 = x2 * scale, y2 = y2 * scale;
		
		plot.fillText('B', x0, y0, 20);
		plot.fillText('A', x1, y1, 20);
		plot.fillText('C', x2, y2, 20);
		
		plot.beginPath()
			.moveTo(x0, y0)
			.lineTo(x1, y1)
			.lineTo(x2, y2)
			.closePath()
			.stroke();
			
		plot.restore();
	
	}
	
	this.fill = function(style, scale) {
		style = style ? style : 'red';
		scale = scale ? scale : 1;
		plot.save()
			.setLineWidth(3)
			.setFillStyle(style);
			
		var x0 = 0, y0 = 0;
		var x1 = x0 + this.edges[0], y1 = y0;
		var x2 = x0 + this.edges[1] * Math.cos(-this.angles[2]),
			y2 = y0 + this.edges[1] * Math.sin(-this.angles[2]);
			
		//为了应对边长可能过大或过小的情况，绘图时引入缩放比例scale
		x0 = x0*scale, y0 = y0 * scale;
		x1 = x1 * scale, y1 = y1 * scale;
		x2 = x2 * scale, y2 = y2 * scale;
		
		plot.fillText('B', x0, y0, 20);
		plot.fillText('A', x1, y1, 20);
		plot.fillText('C', x2, y2, 20);
		
		plot.beginPath()
			.moveTo(x0, y0)
			.lineTo(x1, y1)
			.lineTo(x2, y2)
			.closePath()
			.fill();
			
		plot.restore();
	
	}
	
	
	this.print = function() {
		var angleLabel = ['C', 'A', 'B'];
		var edgeLabel = ['ab', 'bc', 'ac'];
		var s = '';
		
		for (var i = 0; i < 3; i++) {
			s += edgeLabel[i]+' : ';
			s += this.edges[i].toFixed(2)+' ; ';
		}
		
		for (var i = 0; i < 3; i++) {
			s += angleLabel[i]+' : ';
			s += (this.angles[i]*180/Math.PI).toFixed(2) + ' ; ';
		}
		
		return s;
	}
			

}


//大风车
function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
    config.setSector(1,1,1,1); 
    config.axis2D(0, 0, 180);  
	
	
	shape.strokeDraw(shape.nEdge(0, 0, 80, 4, Math.PI/4), 'black');
	
	var tri = new Triangle();
	
	plot.save()
		.translate(-100, 0);
	tri.know3edges([100, 100, 141]);	
	tri.fill('green', 1);
	plot.restore();

	
	plot.save()	
		.translate(0, -100)
		.rotate(Math.PI/2);		
		
	tri.know3edges([100, 100, 141]);
	tri.fill('yellow', 1);
	plot.restore();
	
	plot.save()	
		.translate(100, 0)
		.rotate(Math.PI);		
		
	tri.know3edges([100, 100, 141]);
	tri.fill('red', 1);
	plot.restore();
	
	
	plot.save()	
		.translate(0, 100)
		.rotate(Math.PI*1.5);		
		
	tri.know3edges([100, 100, 141]);
	tri.fill('blue', 1);
	plot.restore();
	
	
}
</span>

[工程师阿伟]童年时，有一段时间很迷央视的大风车栏目，那时还有一位鞠萍姐姐。

就让风车转一下吧：

再转一个：

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
	
	for (var i = 0; i < 2; i++) {
		for (var j = 0; j < 2; j++) {
			config.setSector(2,2,i+1,j+1); 
			config.axis2D(0, 0, 80);  
			
			shape.fillDraw(shape.nEdge(0, 0, 50, 6, Math.PI/2*(i*2+j)), 'blue');
		}
	}
	
}</span>

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
	
	for (var i = 0; i < 2; i++) {
		for (var j = 0; j < 2; j++) {
			config.setSector(2,2,i+1,j+1); 
			config.axis2D(0, 0, 80);  
			
			shape.fillDraw(shape.nEdge(0, 0, 50, 3, Math.PI/2*(i*2+j)), 'yellow');
		}
	}
	
}</span>

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
	plot.setFillStyle('pink');
	for (var i = 0; i < 2; i++) {
		for (var j = 0; j < 2; j++) {
			config.setSector(2,2,i+1,j+1); 
			config.axis2D(0, 0, 80);  
			
			//shape.fillDraw(shape.nEdge(0, 0, 50, 3, Math.PI/2*(i*2+j)), 'yellow');
			plot.rotate(Math.PI/2);
			shape.fillCircle(0, 0, 50);
		}
	}
}
</span>

<span style="font-size:18px;">function myDraw() {   
    var config = new PlotConfiguration();    
    config.init();    
    config.setPreference();   
    
	
	for (var i = 0; i < 2; i++) {
		for (var j = 0; j < 2; j++) {
			config.setSector(2,2,i+1,j+1); 
			config.axis2D(0, 0, 80);  
			
			shape.fillDraw(shape.nEdge(0, 0, 50, 4, Math.PI/2*(i*2+j)), 'orange');

		}
	}
}
</span>

这里面有什么规律呢，大概是这样的，六边形转180度后和原来一样，三角形要转360度，而圆和正方形，只要转90度就和原来一样。

转了这么多，其实阿伟和小伟都有点头晕。

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