html5的分形KOCH雪花

设想一个边长为1的等边三角形，取每边中间的三分之一，接上去一个形状完全相似的但边长为其三分之一的三角形，结果是一个六角形。现在取六角形的每个边做同样的变换，即在中间三分之一接上更小的三角形，以此重复，直至无穷。外界的变得原来越细微曲折，形状接近理想化的雪花。他的名字叫科克曲线，因为瑞典数学家科克在1904年第一次描述了这种不论由直段还是由曲段组成的始终保持连通的线。

以上完全摘自百度百科（包括图片）！

如果只是生成顶点的坐标的话，唯一需要解决的问题是：

给定点a和点b，使b点绕a点旋转某个角度，求出b点的坐标，其实这个公式证明只需三角函数和差化积公式就行，不过为了不影响主题，就不在这里证明了。南阳理工OJ上有一个问题恰好是这个，有兴趣的也可以做一下，这是链接（NYOJ 1079 图形旋转）：

点击打开链接

不过我已经封装好了c++函数，其中结构体表示点的x，y坐标，whirt函数表示点b绕点a逆时针旋转ang（角度单位制，可取任意实数）度后的点的坐标。

struct point{
    double x,y;
};
point whirt(point a,point b,double ang){
    double p;point ans;
    p=acos(-1);ang=ang*p/180;
    ans.x=(b.x-a.x)*cos(ang)-(b.y-a.y)*sin(ang)+a.x;
    ans.y=(b.x-a.x)*sin(ang)+(b.y-a.y)*cos(ang)+a.y;
    return ans;
}

有了这个函数，就容易求得每次迭代的顶点坐标，怎么在一个等边三角形的边上再产生一个等边三角形？假设此边的三等分点是a，b，只需让b绕a旋转60度就行了，得到一个点c，则三角形abc就是一个等边三角形。则有下面的c语言函数：

#include <cstdio>
#include <cmath>
struct point{
    double x,y;
};
point koch[2][1000000],a,b,c;
int n[2],pos,time;
double aa,bb;
point whirt(point a,point b,double ang){
    double p;point ans;
    p=acos(-1);ang=ang*p/180;
    ans.x=(b.x-a.x)*cos(ang)-(b.y-a.y)*sin(ang)+a.x;
    ans.y=(b.x-a.x)*sin(ang)+(b.y-a.y)*cos(ang)+a.y;
    return ans;
}
int main(){
    freopen("koch.txt","w",stdout);
    a.x=0;a.y=0;b.x=300;b.y=0;time=0;
    c=whirt(a,b,60);
    koch[0][0]=c;koch[0][1]=b;koch[0][2]=a;koch[0][3]=c;n[0]=3;pos=0;
    while(time<=5){
        int hhh=0;
        for(int i=0;i<n[pos];i++){
            koch[pos^1][hhh++]=koch[pos][i];
            aa=koch[pos][i].x;bb=koch[pos][i+1].x;bb=(bb-aa)/3;
            a.x=aa+bb;b.x=a.x+bb;
            aa=koch[pos][i].y;bb=koch[pos][i+1].y;bb=(bb-aa)/3;
            a.y=aa+bb;b.y=a.y+bb;
            koch[pos^1][hhh++]=a;
            koch[pos^1][hhh++]=whirt(a,b,60);
            koch[pos^1][hhh++]=b;
        }
        koch[pos^1][hhh]=c;
        pos^=1;
        n[pos]=hhh;
        time++;
    }
    printf("%d\n",n[pos]);
    for(int i=0;i<=n[pos];i++)   printf("%.6f,%.6f,",koch[pos][i].x,koch[pos][i].y);
    printf("\n");
    return 0;
}

这是迭代五次后的顶点坐标数据，存在了koch.txt文件里，其中第一行是顶点的个数，以后的都是每个顶点的x，y坐标。有了这些坐标，可以用任何方式把它们画出来，比如html5的<canvas>，只需要开个数组，把坐标复制过去（此处是一个擦汗的表情），就行了，

这是下载链接，直接单击就可以看到效果。

点击打开链接

截个图：

其实真是情况是，当初我写这个的时候，还依然对javascript存在恐惧，所以用了C语言，导致了这种情况.............