返回列表 回复 发帖
30# 周传高
谢谢版主的提携,非常感谢!!!
大家都是玩复形的高手,所以,我们这里只需就程序设计的思路和代码的结构展开讨论。
    对于 mandbrot 集,我们有伪代码:
    扫描 C 平面
    {
        对当前扫描点进行几何变换(如果需要的话).......变换模块
        对当前点按给定的算法(如:z=z^2+c)进行迭代....迭代模块
        根据迭代结果对当前点进行着色.................着色模块
    }
    把里面的功能模块独立出来写成函数,我们很容易就能写出 mandbort 集的 javascript 代码框架:
    function Mandbrot()
    {
        var iterator=function(){}     //迭代算法
        var transPlane=function(){}   //对扫描平面进行几何变换
        var setColor=function(){}     //设置当前扫描点的颜色
        var scanCplane=function(){}   //扫描 C 平面
    }
    在窗体代模块中,我们设置几个变量:
    var Zr=0,Zi=0,Cr=0,Ci=0,eM=2,eT=20;
    其中 z=(Zr,Zi)、c=(Cr,Ci)、eM(逃逸半径)、eT(逃逸时间),Cr、Ci暂时没用。
3.gif
2014-10-25 18:09

htm0201.rar (933 Bytes)
后面我们将一步一步地完善其代码。
支持楼主,唯一可惜html5暂时很多版本的浏览器都不支持,发一个简单动画(兼容性比较好).

简单动画.rar (482 Bytes)

尽管不太明白,但也要表示感谢与支持,学习学习:wdpfox@sina.com
前面讨论的 canvas 绘图用的是矢量模式,而作复分形是复平面的逐点扫描,必须用另外一种
模式,即位图模式。html5 用一维数组来存储 canvas 画布上从左到右从上到下每一个像素的颜色数据:r,g,b,a,分别为红、绿、蓝、alpha 通道(不透明度),其取值均为 0-255。
    这样,一维数组从第 0 个元素开始,每四个元素存储 canvas 画布的一个像素的颜色数据,
javascript 就是通过修改这个数组的各个元素的值来实现位图模式绘图的。
    在窗体代码中,我们增加了 initmSet 和 mSet 两个函数,前者用来初始化或重设扫描平面的数据,后者用来启动算法程序。
    在算法代码中,为简单见,我们使用的是 z=z^2+c 模型。原文件给出了详细的注释。
3.jpg
2014-10-27 08:34


    在 ZR、ZI 的输入框中滚动鼠标,会看到一些在别的软件中不太容易看到的景象,我们的
代码才刚刚起步,就能有如此的成绩,相信大家会有兴趣走下去。
    后面的讨论会越来越艰难,我们将放慢节奏,祝大家学习愉快!!!
htm0202.rar (2.14 KB)
美不胜收啊
非常强大!
现在,我们在程序中增加缩放模块,下面是放大图像的原理图:
New.jpg
2014-10-25 18:04

放大(缩小)图像实际上就是把当前的复平面裁剪(扩大)后重新映射到画布。对此,我们为 mCanvas 画布增加一个鼠标滚轮事件并在窗体代码中增加 scalePlane 和 changeET 两个函数,scalePlane 用来修改复平面,changeET 则用来修改逃逸时间阈值。
1.jpg
2014-10-25 18:08

2.jpg
2014-10-25 18:08

3.jpg
2014-10-25 18:08

4.jpg
2014-10-25 18:08

5.jpg
2014-10-25 18:08

6.jpg
2014-10-25 18:08

7.jpg
2014-10-25 18:08

8.jpg
2014-10-25 18:08

图像缩放的算法和屏幕输入的设计有很多,我们这里使用的是最简单的一种。当我们熟练了以后,就可以对其功能和模式进行扩展。
    程序编到这里,代码仍然是非常的简单,但是,它却可以让我们随着鼠标滚轮的滚动在硬件允许的精度下来探索 mandbrot 集中所有的细节。
htm0203.rar (2.21 KB)
发一份资料给我,谢谢!
xfzch@qq.com
M 集的显示基本上可以告一段落,剩下的就是迭代算法、着色算法以及复平面的转换。
    这里,我们在程序中加入显示 J 集的功能,有研究说:M 集实际上就是 J 集的特征集,J 集的结构是由 M 集中各点位置所决定的。这样,我们就有了程序设计的思路:
    以 M 集为背景来探寻 J 集,为使其过程直观形象,我们在 M 集画布 mCanvas 的上面叠加一块显示 J 集的画布 jCanvas,就像 photoshop 中的图层一样,这里,我们也将使用多图层技术来进行余下的编程。
    html 中的元素叠加必须由 css 来实现,大家可以查阅相关资料或手册,这里不方便展开。
    为了后面代码编写的方便,我们对程序里的一些变量命名和函数做了稍为的调整,原理和结构是没有变的,由于增加了 J 集,代码将会显得稍为复杂一些,所以,关于 J 集,我们将分两步讨论,这里,显示 J 集需要的 c=(a,b) 是简单的由 Cr,Ci 输入框输入的:
1.jpg
2014-10-27 08:33

2.jpg
2014-10-27 08:33

     尽管我们在窗体代码和算法代码中增加了一些函数模块,但复变模型仍然是 z=z^2+c,不难看出,我们现在所做的都是些基础工程,实际上就是搭建软件的运作平台,这与可视化编程 vc、vb、c# 等的窗体搭建是完全一样的,虽然平台的搭建需要耗费大量的精力和时间,好在这项工作是一劳永逸的,其价值也应就不言而喻了。
htm0204.rar (2.87 KB)
返回列表