js分形艺术-koch雪花曲线

咋一提到分形艺术,可能觉得这词儿挺咋呼,分形就分形吧,还说什么艺术,话说回来,啥叫分形呢?

首先我们先看一个效果:

看完上面的图形,相信对于什么时候分形大家心里应该有个了底,上面展示了从一个等边三角形开始每一次将每条边四等份,中间部分是对折等分的,重复此过程一定次数,最终就会得出一朵漂亮的雪花。

分形的过程我们已经大致了解了,那么我们如何用js来画出雪花呢?

其实从上图中我们可以看出绘制雪花其实不难,难点在于数学计算。

首先我们看一下单边的等分:

高维度的koch曲线最终都可以分解为上图所示的线,其中的4条线段长度都相等均为原始边长的1/3,中间所组成的三角形均为等边三角形。

在绘制时,我们只需要知道x1和x2的坐标,就可以相应的算出x3,x4,x5的坐标,我们只需要将这些点依次连接,最终就可以画出整个图形。

那么在知道x1和x2的情况下,x3,x4,x5的坐标分别等于多少呢?

var x3 = (x2 - x1) / 3 + x1;
var y3 = (y2 - y1) / 3 + y1;
var x4 = (x2 - x1) / 3 * 2 + x1;
var y4 = (y2 - y1) / 3 * 2 + y1;
var x5 = x3 + ((x2 - x1) - (y2 - y1) * Math.sqrt(3)) / 6;
var y5 = y3 + ((x2 - x1) * Math.sqrt(3) + (y2 - y1))  / 6;

对于x3,x4的计算相信应该没什么太大的问题,那么x5的计算时怎么得来的呢?

从图中我们可以看出x3,x4,x5组成了一个等边三角形,那么x5我们就可以看成是x4以x3为中心逆时针旋转60度得到的。

既然涉及到了坐标旋转,我们直接将坐标旋转公式搬过来(推导过程自行百度)

var x0= (x - rx0)*cos(a) - (y - ry0)*sin(a) + rx0 ;
var y0= (x - rx0)*sin(a) + (y - ry0)*cos(a) + ry0 ;

其中(rx0,ry0)是旋转中心,(x,y)待旋转点,(x0,y0)旋转后的新坐标。

将上面计算的x3,x4的坐标带入旋转公式坐标旋转公式换算一下就可以计算出x5的坐标了。

最后附上在最终效果,猛戳这里查看

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章