实现Julia Set分图形

对分形图形的好奇早就有了。最近有了闲暇，准备用javascript来实现Julia Set图形。

深入了解才知道，JuliaSet分形图是一个点阵图，不是一个矢量图，也即不能用画点线面的方法去生成。而且循环层数多，运算效率比较低。

还有，就是在如下的计算JuliaSet的复平面公式中：

F(Z) = Z*Z +C

因为在前后循环中，有复数自乘的情况，所以Z，C的实部和虚部都要在-1和1之间才能很好的运行，一旦有大于1(或小于-1)的数，在循环过程中，很快就出现超界而导致程序报错。

为了将屏幕尺寸数据过度为参与计算的有效数据，设变量scale,保证运行数据都在比较合理的范围之内（-1,1）.

另外，为了直观地看到各参数对分形图结果的影响，设计了三个动态变量(C值实部，C值虚部，比例),通过鼠标或键盘进行调整，可以看到不同参数下的分形效果。需要说明的一点是，因为循环层数多，计算量大，在调整参数的过程中，有比较严重的滞后现象。

效果图的颜色用红色到蓝色的过渡色来渲染。红色表示收敛得比较快，蓝色表示收敛得比较慢。（有红蓝突变的情况，到底是真实地存在这种情况，还是计算过程有误，尚未细究o^o!)

以下为核心程序：

var f=function(x,c){	//F(Z)=Z*Z+C
	return x.mul(x).add(c);
} 

var canvas,ctx;

function init() {
	canvas = document.createElement("canvas");
	canvas.width = 900;
	canvas.height = 700;
	document.body.appendChild(canvas);
	ctx = canvas.getContext("2d");

	ctrl = document.querySelector('.ctrl');
	ctrl.addEventListener('input', onCtrl);

	colors = new gradientColor('#FF0000','#0000FF',25)

	draw()
}
	
function draw() {

	ctx.fillStyle="#FFFFFF";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	var x;
	var res={};
	for(a=1;a2)&&(Math.abs(y[n].mag()-y[n-1].mag())<0.01)) {p=1;break;}                              //收敛于1点
		if((n>2*2)&&((Math.abs(y[n].mag()-y[n-2].mag())<0.01)&&(Math.abs(y[n-1].mag()-y[n-3].mag())<0.01))) {p=2;break;}		//收敛于2点
		x=y[y.length-1];
		if(y[n].mag()>1e8) break;
	}
	return {p:p,n:n,y:y.slice(-p-1,-1)};
}

以下是程序运行的结果图。(有点烟花倒放的效果^o^)

 

分形图的自相似性非常明细，但为什么和那些著名的分形图相差那么远呢？数字的奥秘无穷无尽，也许它就在某个角落里隐藏着呢！

继续探究吧。