Bootstrap

实现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 &
;