今天在读博耶的《数学史》阿基米德螺线,正巧读到阿基米德螺线

阿基米德螺螺线_阿基米徳螺线_阿基米德螺线

阿基米德螺线(亦称等速螺线),得名于公元前三世纪希腊数学家阿基米德。阿基米德螺线是一个点匀速离开一个固定点的同时又以固定的角速度绕该固定点转动而产生的轨迹。阿基米德在其著作《螺旋线》中对此作了描述。

阿基米德螺线的数学方程为:

于是写了一段js代码,生成螺线。代码如下(需要jquery和d3):

HTML

CSS

body {
background-color:#000000;
}

JS

function drawCircile(pc, r, container) {
 var circle = container.append("circle").attr("cx", pc.x).attr("cy", pc.y).attr("r", r)
 .attr("stroke", "#fa6900").attr("stroke-width", 1).attr("fill", "none");
 return circle;
}
function drawLine(p1, p2, c, isDash) {
 var line = c.append("line").attr("x1", p1.x).attr("y1", p1.y)
 .attr("x2", p2.x).attr("y2", p2.y)
 .style("stroke", "#ccc").style("stroke-width", 1);
 if (isDash) {
 line.style("stroke-dasharray", "5,5");
 }
 return line;
}
$(function () {
 var center = {x: 300, y :300};
 var l = 250;
 var a = 0, b = 0, p0, p1, line;
 var v = 0.3; //直线移动速度
 var f = 360; //转动速度 
 var root = d3.select("#chart").append("svg").append("g");
 drawCircile(center,3,root)
 var timer = setInterval(function(){
 a = a + Math.PI / f;
 b = b + v;
 p0 = {x:center.x+ l * Math.sin(a), y:center.y - l * Math.cos(a) };
 p1 = {x:center.x + b * Math.sin(a), y:center.y - b * Math.cos(a) };
 drawCircile(p1,1,root)
 if( b > l ) {
 clearInterval(timer);
 } else {
 if(!line) {
 line = drawLine(center, p0, root); 
 } else {
 line.transition().duration(10).attr("x2",p0.x).attr("y2",p0.y);
 } 
 }
 },10);
});

以上代码会生成以下的图形:

阿基米德螺线_阿基米徳螺线_阿基米德螺螺线

改变v和f的值分别改变点在直线上的移动过速度和直线转动的角速度阿基米德螺线,会得到不同的结果。

我拿给我还在读一年级的女儿看,她很是入迷,不断要求我修改参数,结果得到许多有趣的图形,大家可以通过这个链接自己试试看。

f=2.5 海星

阿基米德螺线_阿基米徳螺线_阿基米德螺螺线

f=3 雪花

阿基米德螺线_阿基米徳螺线_阿基米德螺螺线

f=1.414

阿基米徳螺线_阿基米德螺螺线_阿基米德螺线

f = 0.618

阿基米德螺螺线_阿基米徳螺线_阿基米德螺线

f=8.8

阿基米徳螺线_阿基米德螺螺线_阿基米德螺线

f = 12.12

阿基米德螺螺线_阿基米德螺线_阿基米徳螺线

———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,永久会员只需99元,全站资源免费下载 点击查看详情
站 长 微 信: xxboosx