[从头学数学] 第71节 图形的运动（二）

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

正剧开始：

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

看到这个折纸的题目，小伟觉得应该好好地研究一下。

于是小伟先研究了一张纸对折一次的情况：

///对折一次

<span style="font-size:18px;">function myDraw() { 
    var config = new PlotConfiguration();  
    config.init();  
    config.setPreference(); 
	
	//config.setSector(1,1,1,1);
	//config.axis2D(0, 0, 180);
	
	//纸条
	var x = 20, y=20, w = 600-20*2, h=60;
	plot.strokeRect(x, y, w, h);
	
	//图案
	var array = new Array();
	var r = 50; 
	for (var i = 0; i < r; i+= 10) {
		array.push([i, Math.sqrt(r*r-i*i)]);
	}
	
	//对称轴
	var zone1 = x + w/2;
	

	plot.setStrokeStyle('blue');
	
	plot.beginPath()
		.moveTo(zone1 + array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone1 + array[i][0], y+array[i][1]);
	}
	
	plot.closePath()
		.stroke();

	plot.beginPath()
		.moveTo(zone1 - array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone1 - array[i][0], y+array[i][1]);
	}
	plot.closePath()
		.stroke();
	
	plot.setStrokeStyle('red');
	
	plot.beginPath()
		.moveTo(zone1, y-20)
		.lineTo(zone1, y+h+20)
		.closePath()
		.stroke();

	y += 2 * h;
	
	plot.setStrokeStyle('black');
	plot.strokeRect(x, y, w/2, h);
	plot.setStrokeStyle('blue');
	
		plot.beginPath()
		.moveTo(zone1 - array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone1 - array[i][0], y+array[i][1]);
	}
	plot.closePath()
		.stroke();
	
	plot.setStrokeStyle('red');
	
	plot.beginPath()
		.moveTo(zone1, y-20)
		.lineTo(zone1, y+h+20)
		.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.axis2D(0, 0, 180);
	
	//纸条
	var x = 20, y=20, w = 600-20*2, h=60;
	plot.strokeRect(x, y, w, h);
	
	//图案
	var array = new Array();
	var r = 50; 
	for (var i = 0; i < r; i+= 10) {
		array.push([i, Math.sqrt(r*r-i*i)]);
	}
	
	//对称轴
	var zone1 = x + w/2;
	var zone2 = x + w/4;
	var zone2_2 = x + w/4*3;
	

	plot.setStrokeStyle('blue');
	
	plot.beginPath()
		.moveTo(zone2 + array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2 + array[i][0], y+array[i][1]);
	}
	
	plot.closePath()
		.stroke();

	plot.beginPath()
		.moveTo(zone2 - array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2 - array[i][0], y+array[i][1]);
	}
	plot.closePath()
		.stroke();
		
		
	plot.beginPath()
		.moveTo(zone2_2 + array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2_2 + array[i][0], y+array[i][1]);
	}
	
	plot.closePath()
		.stroke();

	plot.beginPath()
		.moveTo(zone2_2 - array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2_2 - array[i][0], y+array[i][1]);
	}
	plot.closePath()
		.stroke();	
	
	plot.setStrokeStyle('red');
	
	plot.beginPath()
		.moveTo(zone1, y-20)
		.lineTo(zone1, y+h+20)
		.closePath()
		.stroke();
		
	plot.setStrokeStyle('purple');
	
	plot.beginPath()
		.moveTo(zone2, y-20)
		.lineTo(zone2, y+h+20)
		.closePath()
		.stroke();
		
	plot.beginPath()
		.moveTo(zone2_2, y-20)
		.lineTo(zone2_2, y+h+20)
		.closePath()
		.stroke();

	y += 2 * h;
	
	plot.setStrokeStyle('black');
	plot.strokeRect(x, y, w/2, h);
	plot.setStrokeStyle('blue');
	
	plot.beginPath()
		.moveTo(zone2 + array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2 + array[i][0], y+array[i][1]);
	}
	plot.closePath()
		.stroke();
		
	plot.beginPath()
		.moveTo(zone2 - array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2 - array[i][0], y+array[i][1]);
	}
	plot.closePath()
		.stroke();
	
	plot.setStrokeStyle('red');
	
	plot.beginPath()
		.moveTo(zone1, y-20)
		.lineTo(zone1, y+h+20)
		.closePath()
		.stroke();
		
	plot.setStrokeStyle('purple');
	
	plot.beginPath()
		.moveTo(zone2, y-20)
		.lineTo(zone2, y+h+20)
		.closePath()
		.stroke();
		
	y += 2 * h;
	
	plot.setStrokeStyle('black');
	plot.strokeRect(x, y, w/4, h);
	
	plot.setStrokeStyle('purple');
	
	plot.beginPath()
		.moveTo(zone2, y-20)
		.lineTo(zone2, y+h+20)
		.closePath()
		.stroke();
	
	plot.setStrokeStyle('red');
	
	plot.beginPath()
		.moveTo(x, y-20)
		.lineTo(x, y+h+20)
		.closePath()
		.stroke();
		
	plot.setStrokeStyle('blue');
	plot.beginPath()
		.moveTo(zone2 - array[0][0], y+array[0][1]);
		
	for (var i = 1; i < array.length; i++) {
		plot.lineTo(zone2 - array[i][0], y+array[i][1]);
	}
	plot.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.axis2D(0, 0, 180);
	
	//折叠次数
	var sector;
	var x = 20, y = 20, w = 600-2*x, h = 50;
	var x0;
	
	for (var tile = 1; tile < 6; tile++) {
		sector = Math.pow(2, tile);
		
		for (var i = 0; i < sector; i++) {
			x0 = x + w/sector*i;
			if (i % 2 != 0) {			
				plot.beginPath()
					.moveTo(x0, y-20)
					.lineTo(x0, y + h+20)
					.closePath()
					.stroke();
					
				shape.strokeCircle(x0, y+h/2, 10);
			}
			else {}			
			
		}
		
		plot.strokeRect(x, y, w, h);
		
		y += 1.4*h;
	}
}</span>

这么一点代码却能做很多事：

这个图从上到下分别是对折一次，两次。。。五次，然后在边缘处剪图案，得到的效果。

当然，这个圆圈可以代表任何图案，比如下面这些：

然后[人叫板老师]给小伟出难题了：

这个要先旋转45度。

<span style="font-size:18px;">function myDraw() { 
    var config = new PlotConfiguration();  
    config.init();  
    config.setPreference(); 
	
	//config.setSector(1,1,1,1);
	//config.axis2D(0, 0, 180);
	
	var image = new Image();
	image.src = './1.jpg';
	
	plot.translate(150, -150)
		.rotate(Math.PI/4);
	image.onload = function() {
		plot.drawImage(image);
	}
}</span>

还要再转回来：

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