[从头学数学] 第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>

还要再转回来：

















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