返回列表 回复 发帖
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
2.jpg
     尽管我们在窗体代码和算法代码中增加了一些函数模块,但复变模型仍然是 z=z^2+c,不难看出,我们现在所做的都是些基础工程,实际上就是搭建软件的运作平台,这与可视化编程 vc、vb、c# 等的窗体搭建是完全一样的,虽然平台的搭建需要耗费大量的精力和时间,好在这项工作是一劳永逸的,其价值也应就不言而喻了。
htm0204.rar (2.87 KB)
41# a2569875
摆线方程:
      x=(R-r)cost+pcos(1-R/r)t
      y=(R-r)sint+psin(1-R/r)t
其中的 p 就是轨迹上的动点
     代码实现请参考 16 楼的原文件,为简单见,这个帖子没有准备就特殊问题的特殊算法展开讨论,这里只就编程思路略作探讨,请原谅!!!
理论上讲,显示 J 集所需要的 c=(a,b) 属于连续型变量。一方面使用 html 的 input 输入框输入这种类型的数值很辛苦;另一方面,结构细腻的 J 集都位于 M 集的边界处。
    尽管由于硬件精度和屏幕空间的原因,不能达到真正意义上的连续性,但要显示 J 集,屏幕输入的方式输入 c=(a,b) 仍不失为最佳选择。
    因此,我们在窗体代码中为 J 集画布 jCanvas 添加 onclick 和 onmousewheel 两个鼠标事件,前者当鼠标单击 jCanvas 时,将鼠标在画布上的位置映射到显示 M 集时的复平面 c,从而显示各式各样的 J 集;后者用来缩放 J 集,其原理与 M 集相同,只不过缩放 J 集时,裁剪或扩大的是复平面 z。
    要注意的是:必须 √ 选 show_J 复选框才能使用屏幕输入显示和缩放 J 集。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg
a.jpg
d.jpg
e.jpg
    到此,我们只要修改算法代码中 iterator 函数的迭代算法,就可以欣赏到很多复变模型的 M 集和 J 集的精妙结构,虽然只是灰度图像,却也不乏乐趣。
htm0205.rar (2.12 KB)
关于复分形的着色,各位老师都是大师级高手,我只知道一些初浅的方法。接下来,我们讨论一下着色模块的代码编写。在窗体中加入 html 的颜色对话框元素:
    <object classid='clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b'></object>
    而 javascript 则是通过该对象的 chooseColorDlg 方法显示颜色对话框并让用户选取颜色的。
    在现有的窗体代码中,显示 M 集和 J 集的两块画布被重叠在一起并放置在一个名为 bColor 的 div 块元素之中,如其名,bColor 用来设置背景色,与此同时,设置一个画布前景色,在迭代过程中,依据逃逸时间,由浅到深设置各像素的不透明度,这样就获得了基于前景色和逃逸时间的囚集图像。
    为便于扩展,这次对窗体代码进行了简化处理并稍为调整了一下界面的视觉效果,相应的增加了setBcolor 和 setRibbon 两函个数,前者设置背景色,后者设置前景色,之所以取名 setRibbon,是因为后面有需要使用“色带”的着色算法。
1.jpg
2.jpg
    程序对 iterator 和 setColor 的返回值进行了必要的扩展,以适应更多的着色算法。
htm0301.rar (2.48 KB)
在算法代码 Mandbrot 中,有三个功能模块:iterator(迭代)、setColor(着色)和transPlane(变换)。无论是哪个模块,理论上讲,都有着无数的可能性。由于采用的是传统的结构化编程,继续往下扩展遇到了瓶颈,所以,我们必须引入面向对象的编程机制。
    纯粹的面向对象编程其实是蛮吓人的,吓退了为数不少的编程爱好者。 所以,我们这里只能就程序的需要初浅的认识一下:

function Mandbrot(p,c,mC,M)//定义了一个 Mandbrot 函数
{
    var iterator=function(x,y,a,b){} //Mandbrot内嵌函数
    var transPlane=function(){}     //Mandbrot内嵌函数
    var setColor=function(e){}      //Mandbrot内嵌函数
    var scanCplane=function(){}   //Mandbrot内嵌函数
    var scanZplane=function(){}   //Mandbrot内嵌函数
    if(is_M)scanCplane();
     else scanZplane();
}  // Mandbrot 能完成一系列的功能,可以有返回值,也可以没有

function formSetup()
{
    Mandbrot(p,c,mC,M);//调用 Mandbrot 函数
                           //这里的 Mandbrot 是一个完成特定功能的程序模块
                           //这就是结构化编程
}
=========================================
将代码调整为:
function Mandbrot()//定义了一个 Mandbrot 类(对象模板)
{
    var iterator=function(x,y,a,b){}   //Mandbrot私有方法
    var transPlane=function(){}       //Mandbrot私有方法
    var setColor=function(e){}        //Mandbrot私有方法
    var scanCplane=function(){}     //Mandbrot私有方法
    var scanZplane=function(){}     //Mandbrot私有方法

    var showSet=function(p,c,mC,M)  //Mandbrot私有方法
    {
        if(is_M)scanCplane();
        else scanZplane();
    }

    return {show:showSet}//返回一个对象,该对象有一个名为 show 的属性
                            //其属性值为该类的私有方法 showSet
}//Mandbrot 类和 Mandbrot 函数很相似,但不完成任何操作,只是
//定义了一个对象模板
//定义类时,必须以对象的形式提供返回值,这个返回值就是所谓
//的接口或入口。

function formSetup()
{
    var Mj=new Mandbrot();//创建一个名为 Mj 的 Mandbrot 实例对象
                              //所以,Mj 就是一个 Mandbrot 对象,Mj 的
                              //所有功能都必须通过接口才能实现
    Mj.show(p,c,mC,M);     //调用 show 属性所指向的方法:showSet
                                     //这里的 Mandbrot 是一个类模板
                              //这里的 Mj 是一个 Mandbrot 实例
                              //这里的 Mj 是一个对象
                              //Mandbrot 类定义的所有功能都必须通过接口
                              //由其实例对象 Mj 来实现
                              //这就是面向对象编程
}

      这里的讨论很不专业,甚至有点谐虐,没关系,我们不想把“面向对象”作为一个包袱来背,只是使用“面向对象”编程中的一些便利机制,来增强程序代码的可扩展性能。如是,我们对代码作出了调整,使其看起来像面向对象编程的样子。虽然现在还看不出这有什么好处,但在后续的编程中,这种调整给编程带来的便利将会越来越明显。
htm0302.rar (2.57 KB)
现在,可以很方便地来扩展算法代码中的 setColor 功能模块了,尽管这里给出了 16 种着色方案,由于 javascript 具备面向对象的语言能力,所以,代码还是很简单的。需要说明的是:我没有能力提供成熟的着色算法,很是抱歉。这里只是向大家展示了程序的结构,当大家熟悉了 javascript 后,在编写自己的程序时,便可将那些惊艳的算法植入其中。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg
a.jpg
htm0303.rar (3.93 KB)
随着程序功能的增加,要输入的参数会越来越多,对于那些应用于绝大多数或所有状况的参数,可以设计成即时响应;而对于那些只应用于少部份甚至是个别状况的参数,要设计成即时响应一般比较麻烦,所以,我们在窗体中放置了一个刷新reFresh 按钮,以应付这种状况,当改变参数而程序没有反应时,便可点击这个 reFresh 按钮。这样,程序编写起来会简单一些。这一次,我们充实了一下 transPlane 功能模块,由于其方法和 setColor 差不多,这里就不啰嗦了。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg
a.jpg
htm0304.rar (3.79 KB)
上面在 transPlane 功能模块中添加的都是单一的几何变换,这里再增加四种可以进行组合的稍为复杂一点的变换,不同的组合有 14 种,与前面的 12 种再组合,一共有一百多种,其中有效的组合变换也不下一百种。其实,关于几何变换我真的是不太懂,只是觉得加到程序里面蛮好玩的。尽管如此,程序的结构是没问题的,大家可以把真正意义上的几何变换植入到自己的程序中,免得像我一样让人笑话。
    这一次的代码更加简单,所以代码中没有写注释,相信大家花点时间是能看得懂的。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg
a.jpg
b.jpg
c.jpg
htm0305.rar (4.03 KB)
如果我们在组合变换的基础上再叠加一次简单变换,将会得到更多的图像,不过这种设计近乎钻牛角尖,所以,尽管编写了代码,这一功能还是少用为宜,因为它是以牺牲速度为代价的。
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
8.jpg
9.jpg
a.jpg
htm0306.rar (4.1 KB)
55# lnszdzg
杜老师好!你是对的,对于软件和语言,每个人都有自己的偏好,要人放弃自己手头上称手的工具而从头再来是件蛮痛苦的事情,几何画板也好,UF,mathCad 也好,vb,vc,c#,javascript 也好,统统都不重要,重要的是使用这些工具时的思维意识和行为模式,这个帖子讨论到这里,程序所具有的功能和效果,用 javascript 实现并非上上之选,但比起其他的算法语言和软件来,javascript 却是最简单最轻松的。不过,这也还不是这个帖子的最终目的,我只是想借 javascript 编写复变分形程序中遇到的一些问题向大家传递一个信息:复变分形在最后图形的渲染上确实有着很多精妙绝伦的手法,产生出令人震撼的视觉冲击。然而,作为初学者,复分形的结构本身才是首先要解决的问题,所以,选择一个恰当的起点和视角是非常必要的。
谢谢杜老师,衷心希望能多贴美图,多提意见。
返回列表