Board logo

标题: 几何画板下的编程思考:javascript [打印本页]

作者: xklppp    时间: 2014-10-14 13:06     标题: 几何画板下的编程思考:javascript

这个题目有点大,我没那么深的造诣,只是想说明我的看法:几何画板作为很多算法的形象演练,是个绝妙的工具。
    javascript 比起其他的算法语言 basic,c,c++,java... 以及各式各样的可视化编程语言 vc,vb,c#,F#...来说,使用起来更加轻松随意,其最终效果有过之而无不及。
    尽管 javascript 也有着庞大的支撑系统和繁复的应用环境,但我们将尽可能的避开那些繁文缛节,我们的目的是娱乐,开心就好。
    对于 html+css+javascript 里面的一些细枝末节和扩展,网上俯拾皆是,为了精简,我们这里的讨论将不以语言为中心,程序用到哪我们就讨论到哪。
    我们这就开始吧:(大家学习愉快!!!)
New.gif
2014-10-14 19:14

htm0000.rar (481 Bytes)

图片附件: New.gif (2014-10-14 19:14, 12.25 KB) / 下载次数 1511
http://www.inrm3d.cn/attachment.php?aid=22555&k=627e1e6676046e7714ad8bcccbd78864&t=1711719378&sid=N37hla



附件: htm0000.rar (2014-10-14 13:06, 481 Bytes) / 下载次数 3201
http://www.inrm3d.cn/attachment.php?aid=22556&k=408598ec1e871c7efc973b26adb424eb&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-14 13:59

New.gif
2014-10-14 19:15

htm0001.rar (938 Bytes)

图片附件: New.gif (2014-10-14 19:15, 22.27 KB) / 下载次数 1568
http://www.inrm3d.cn/attachment.php?aid=22559&k=c9b68b0cbc91b1e0919d7d75bb8d6696&t=1711719378&sid=N37hla



附件: htm0001.rar (2014-10-14 14:05, 938 Bytes) / 下载次数 3060
http://www.inrm3d.cn/attachment.php?aid=22560&k=04837bce940fe6403b7ccc5285af236a&t=1711719378&sid=N37hla
作者: mjj_ljh    时间: 2014-10-14 16:54

我的脑细胞已经萎缩了。根本就跟不上大家的节奏,试着跟xklppp老师从头来一次。
作者: xklppp    时间: 2014-10-14 18:04

New.gif
2014-10-14 19:16

htm0002.rar (888 Bytes)

图片附件: New.gif (2014-10-14 19:16, 33.13 KB) / 下载次数 1548
http://www.inrm3d.cn/attachment.php?aid=22563&k=0701b8346b119b03e3efa72df980d9db&t=1711719378&sid=N37hla



附件: htm0002.rar (2014-10-14 18:04, 888 Bytes) / 下载次数 3293
http://www.inrm3d.cn/attachment.php?aid=22564&k=c9a3595bf63b00a494e4d087bc8e9aec&t=1711719378&sid=N37hla
作者: inRm    时间: 2014-10-14 19:18

大赞。
作者: lnszdzg    时间: 2014-10-14 20:27

但愿能跟上xklppp老师的步伐
作者: lnszdzg    时间: 2014-10-14 20:32

但愿能跟上xklppp老师的步伐
作者: xklppp    时间: 2014-10-14 22:14

New.gif
2014-10-16 09:14

htm0003.rar (756 Bytes)

附件: htm0003.rar (2014-10-14 22:14, 756 Bytes) / 下载次数 3129
http://www.inrm3d.cn/attachment.php?aid=22566&k=8de066bf205f9c0526bb051bb8df7335&t=1711719378&sid=N37hla

图片附件: New.gif (2014-10-16 09:14, 16.23 KB) / 下载次数 1556
http://www.inrm3d.cn/attachment.php?aid=22568&k=26aadf2fddfa49e31c0a734cec26b401&t=1711719378&sid=N37hla


作者: xklppp    时间: 2014-10-15 00:01

New.gif
2014-10-16 09:17

htm0004.rar (1016 Bytes)

图片附件: New.gif (2014-10-16 09:17, 16.02 KB) / 下载次数 1540
http://www.inrm3d.cn/attachment.php?aid=22569&k=ff616367b166e454b6fbf6633fd42842&t=1711719378&sid=N37hla



附件: htm0004.rar (2014-10-15 00:01, 1016 Bytes) / 下载次数 3068
http://www.inrm3d.cn/attachment.php?aid=22570&k=3a8a21b19340dafa46551e85393c7c20&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-15 01:29

New.gif
2014-10-16 09:17

    代码没有任何问题,思维惯性却让我们诧异:20+30 怎会等于 2030 呢?会的,程序的实际过程是:"20"+"30"="2030"。因为在放置 input 元素时,numA、numB 的 type 属性设置为 text,意为文本。为什么不设置为 type=number 呢?可以的,不过只有在 html5 中才行,当然还有其他的一些问题,这里不展开了。
    改写 showMess 函数:

    function showMess()
    {
        var a=numA.value;
        var b=numB.value;
        var c=a-b;
        var d=a*b;
        var e=a/b;
        a=parsInt(numA.value);
        b=parsInt(numB.value);
        var f=a+b;
        messBox.innerText="A-B="+c+"\n"+
                          "A*B="+d+"\n"+
                          "A/B="+e+"\n"+
                          "A+B="+f;
    }

    其中 parseInt 为 javascript 的内置方法(method 实际上就是函数),将文本转换为整型数值,与之相应的是 parseFloat 方法,将文本转换为浮点型数值。
    我们会发现,无论我们在两个输入框中输入什么内容,输出窗口是没有反应的,原因是 showMess 函数只是在浏览器打开网页后运行一次且仅一次。为此,我们需要在右边的窗口中增加一个输入元素:

    <input type=button value=刷新 onclick=showMess()>

    onclick 为单击鼠标时触发的事件。
    编程就是这样,刚解决了一个小问题,却又冒出来一堆的大问题。
htm0005.rar (462 Bytes)

图片附件: New.gif (2014-10-16 09:17, 3.73 KB) / 下载次数 1563
http://www.inrm3d.cn/attachment.php?aid=22571&k=b669bfd6168d0aa94884dd9f285d8d1b&t=1711719378&sid=N37hla



附件: htm0005.rar (2014-10-15 01:29, 462 Bytes) / 下载次数 3113
http://www.inrm3d.cn/attachment.php?aid=22572&k=29a2939b1cad490dd1512616ec1fea16&t=1711719378&sid=N37hla
作者: changxde    时间: 2014-10-15 10:00

javascript 中的  “-,*,/” 都是按数值进行,“+”  就按字符处理,不可想象。
作者: xklppp    时间: 2014-10-15 13:41

javascript 是一种宽松类型的语言。宽松类型意味着设计者不必显式地定义变量的数据类型。大多数情况下,javascript 将根据需要自动进行转换。例如,如果将一个数值添加到一个字符串,该数值将被系统自动转换为文本。
    在大型的软件开发中,我们最好还是不要享受这种语言的恩赐,原因有很多,主要的有两点:一是它很可能会在不经意间埋下不可预期的 bug;二是这种代码缺乏可移殖性。眼下,我们可以将 showMess 改成:
    function showMess()
    {
        var a=parseInt(numA.value);
        var b=parseInt(numB.value);
        var c=a-b;
        var d=a*b;
        var e=a/b;
        var f=a+b;
        messBox.innerText="A-B="+c+"\n"+
                          "A*B="+d+"\n"+
                          "A/B="+e+"\n"+
                          "A+B="+f;
    }
    尽管如此,showMess 的行为还是很怪异的,在输入框中输入数据时很吃力,我们应该提供一种机制,让用户的操作变得轻松一些。
    在往下走之前,这里有必要讨论一下程序设计的思维模式的问题:
    1.不管是哪一种语言,哪一种软件,解决同一个问题,所使用的语言、软件资源越少越好。
    2.不管遇到什么问题,最好不要往里钻,应该退一步,站得更高一点,看得更远一些。这个不大好理解,比方说:我们被一座金碧辉煌的殿堂所吸引,进到里面后很多人就出不来了,如果我们理智的退出来,站到更高更远的地方,我们将会看到更多的更辉煌的大殿。侠客行里的石破天改成金破天就索然无味了。
    3.程序设计时,不要被语言的规则所束缚,更多的应该遵循人的行为习惯。
    啰嗦了,请大家包容!!!
htm0006.rar (454 Bytes)

附件: htm0006.rar (2014-10-15 13:41, 454 Bytes) / 下载次数 2297
http://www.inrm3d.cn/attachment.php?aid=22573&k=b866f5f9dc1190892eead3a72e293e0a&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-15 22:30

New.gif
2014-10-16 09:13

    javascript 是一种基于对象、事件驱动的编程语言,在输入框输入数据时,系统会触发
onchange 事件,如是,我们便可以编写一个函数,捆绑到这个事件上来,其目的是:当用户输入数据后,立马由该函数对输入的数据进行审核并校正,使输入框内的数据总是在可控的范围内,也就是数据的有效性验证:
    function dataVerify(obj,min,def,max,parseNum)
    {
        var n=parseNum(obj.value);
        if(isNaN(n)||n<min||n>max)n=def;
        obj.value=n;
    }
    这里,我们定义了一个 dataVerify 函数,它接收五个参数:
    obj:接受数据审核的对象
    min:输入框内允许的最小值
    def:通不过审核时设定的默认值
    max:输入框内允许的最大值
    parseNum:将文本转换为数值的系统方法(parseInt 或 parseFloat)
    这意味着我们可以将方法(函数)名作为参数在调用和被调用的函数之间进行传递,这一特性在
编制大型和复杂的程序时非常管用,有点像函数式编程。
    当 n=parseNum(obj.value) 将文本转换为数值出现异常时,isNaN(n)返回逻辑真 true,否则,返回逻辑假 false。
    现在,我们在两个输入框的 html 代码中加入 onchange 事件属性:
A=<input id=numA type=text size=16 value=20
   onchange=dataVerify(this,-1000000,20,1000000,parseInt)><br>
B=<input id=numB type=text size=16 value=30
   onchange=dataVerify(this,-1000000,30,1000000,parseFloat)><br>
    这里的 this 表示对象本身(有点像面向对象编程里的 this);对于 numA 我们传递了将文本转换为整型数值的方法 parseInt,而对于 numB 我们传递了将文本转换为浮点型数值的方法
parseFloat,此举并非程序需要,只是体验一下而已。
    相应的 showMess:
    function showMess()
    {
        var a=parseInt(numA.value);
        var b=parseFloat(numB.value);
        var c=a-b;
        var d=a*b;
        var e=a/b;
        var f=a+b;
        messBox.innerText="A-B="+c+"\n"+
                          "A*B="+d+"\n"+
                          "A/B="+e+"\n"+
                          "A+B="+f;
    }
    这里,留一个问题给大家:如果输入框内允许的最大最小值为 +∞-∞,该如何写代码呢?
htm0007.rar (570 Bytes)

图片附件: New.gif (2014-10-16 09:13, 4.83 KB) / 下载次数 1034
http://www.inrm3d.cn/attachment.php?aid=22577&k=cb8c4b6a66d7709daf6eef8d8e02b4cb&t=1711719378&sid=N37hla



附件: htm0007.rar (2014-10-15 22:30, 570 Bytes) / 下载次数 2286
http://www.inrm3d.cn/attachment.php?aid=22578&k=201c2df4d09892e567584dee22269c1d&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-16 19:07

htm0008.jpg
2014-10-16 19:06

    就 html 来说,对于 input 元素,我们可以通过 onmousewheel(鼠标滚轮)事件使用 javascript 来提供一种稍为高级一点的数据输入方式:
A=<input id=numA type=text size=16 value=20
  onchange=dataVerify(this,-1000000,20,1000000,parseInt)
  onmousewheel=dataVerify2(event.wheelDelta,10,this,-1000000,20,1000000,parseInt)><br>
B=<input id=numB type=text size=16 value=30
  onchange=dataVerify(this,-1000000,30,1000000,parseFloat)
  onmousewheel=dataVerify2(event.wheelDelta,0.1,this,-1000000,20,1000000,parseFloat)><br>
    系统触发各种鼠标事件后,会建立一个名为 event 的对象记录下鼠标的各种状态,鼠标向前滚动时 event.wheelDelta 大于零,反之小于零。这里的代码设定 numA 的变化幅度为±10,numB 的变化幅度为±0.1。这样,可以将 dataVerify2 写成如下的样子:
    function dataVerify2(d,dn,obj,min,def,max,parseNum)
    {
        var n=parseNum(obj.value)+dn*Math.abs(d)/d;
        if(isNaN(n)||n<min||n>max)n=def;
        obj.value=n;
    }
    这里 Math.abs 是 javascript 的内置对象 Math 的求绝对值的方法,所以,Math.abs(d)/d,将取值 1 或 -1,这样,代码就实现了输入框内的数值随着鼠标的滚动朝相应的方向变化。
htm0008.rar (638 Bytes)

图片附件: htm0008.jpg (2014-10-16 19:06, 33.26 KB) / 下载次数 1028
http://www.inrm3d.cn/attachment.php?aid=22581&k=b68ae1a815fce4abdf9ac9d10d9809dc&t=1711719378&sid=N37hla



附件: htm0008.rar (2014-10-16 19:07, 638 Bytes) / 下载次数 2311
http://www.inrm3d.cn/attachment.php?aid=22582&k=1042d60cc51c548f543943d46d40f5d2&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-16 22:08

比较一下 dataVerify 和 dataVerify2:
    function dataVerify(obj,min,def,max,parseNum)
    {
        var n=parseNum(obj.value);
        if(isNaN(n)||n<min||n>max)n=def;
        obj.value=n;
    }
    function dataVerify2(d,dn,obj,min,def,max,parseNum)
    {
        var n=parseNum(obj.value)+dn*Math.abs(d)/d;
        if(isNaN(n)||n<min||n>max)n=def;
        obj.value=n;
    }
    两个函数可以并作一个:
    function dataVerify(d,dn,obj,min,def,max,parseNum)
    {
        var n=parseNum(obj.value)+dn*Math.abs(d)/d;
        if(isNaN(n)||n<min||n>max)n=def;
        obj.value=n;
    }
    修改一下 numA 和 numB:
A=<input id=numA type=text size=16 value=20
      onchange=dataVerify(1,0,this,-1000000,20,1000000,parseInt)
  onmousewheel=dataVerify(event.wheelDelta,10,this,-1000000,20,1000000,parseInt)><br>
B=<input id=numB type=text size=16 value=30
      onchange=dataVerify(1,0,this,-1000000,30,1000000,parseFloat)
  onmousewheel=dataVerify(event.wheelDelta,0.1,this,-1000000,20,1000000,parseFloat)><br>
    当触发 onchange 事件并执行 dataVerify 时,dn*Math.abs(d)/d 恒等于零。
    至此,我们终于写出了一个颇具价值的 javascript 函数 dataVerify。这可是一劳永逸的业绩,在后面的复分形编程中,有着一大堆的参数,少了这段代码将是很难想像的。当然,我们可以把这个dataVerify 函数写得更复杂一些,功能更强大一些。
htm0009.rar (633 Bytes)

附件: htm0009.rar (2014-10-16 22:08, 633 Bytes) / 下载次数 2336
http://www.inrm3d.cn/attachment.php?aid=22583&k=3c51996d4ce0d451f7081f2a14bd7113&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-17 02:03

关于数据的输入,到现在暂且告一段落,接下来讨论作图,也即 html5 的画布 canvas。
    在此之前,我们稍事休息,有两个问题在这里说明一下:
    一、这里的讨论有一个默认的前提,那就是各位朋友应该对编程语言具备一定的知识,这种知识的来源有两个途径,首先,所有的编程语言都有相通的地方;其次,对于 html、css、javascript 这三种语言的细节,应该先作些功课,我手上倒是有些资料,打了个包,260 MB,可我不知道怎么传,如有需要,给个邮箱地址。
    二、解释一下本贴的主题“几何画板下的编程思考”。
    前面提到过,几何画板作为很多算法的形象演练,是个绝妙的工具,比方说,hilbert 曲线的制作,除了原生的字符串重写系统,其他的诸如,迭代、递归、矩阵都可以,但不怎么轻松。然而在几何画板里,通过逆向思维,把 hilbert 曲线的过程倒过来,竟然找到了一种既简单又巧妙的方法。各位老师的画板作品,更是让我心动,虽然弄不明白其中的数学原理,却使我明白了一个道理,我们原来编的程序都是那么生硬,是因为没有在数据可视化上下功夫。
    下面就是受几何画板的启发编写的万花曲线规(须在 ie10 下运行),如果可以继续的话,后面将以它为蓝本进行讨论。
htm0010.jpg
2014-10-17 02:02

万花曲线规html.rar (2.18 KB)

图片附件: htm0010.jpg (2014-10-17 02:02, 89.37 KB) / 下载次数 1364
http://www.inrm3d.cn/attachment.php?aid=22584&k=7d652321ed17c4816b746bfc15c55d8c&t=1711719378&sid=N37hla



附件: 万花曲线规html.rar (2014-10-17 02:03, 2.18 KB) / 下载次数 2733
http://www.inrm3d.cn/attachment.php?aid=22585&k=d0683fe6dbb15dfd77f4977ebd5feb0d&t=1711719378&sid=N37hla
作者: lnszdzg    时间: 2014-10-17 10:13

感谢您的精彩文章,受益匪浅。
想索取您的资料,留个邮箱——1043622345@qq.com
谢谢!
作者: 一线天    时间: 2014-10-17 16:39

赞一个!很有意义的研究,不过几何画板对javascript的支持比较有限吧,如果是在GerGebra上研究javascript会强大的多。
作者: 一线天    时间: 2014-10-17 16:51

再看了一遍,发现并不是几何画板支持javascript,而是单纯的javascript语言实现几何画板的部分效果。
而GerGebra是原生支持javascript并可以输出网页文件的,可以说做数学网络课件GerGebra是最佳选择。
作者: myzam    时间: 2014-10-18 08:11

1# xklppp
不错。有意的工作。
不过我也说两点:
第1点:学习js代码最好的地方是网络上的w3cschool(w3c学校),我就是从那里起步的。
第2点:几何画板无法使用编程,这是几何画板的缺陷,同时也是优点,因为编程会让操作抽象化,但编程又可以让画板做更多更细腻的事情,几何画板的作者在这两者间做了选择,他选择了取消编程,采用形象化的操作。GGb可以支持js编程。
最后,对你的工作致敬。
作者: xklppp    时间: 2014-10-18 12:54

谢谢各位老师,很专业,也很诚恳,真的是很高兴。
    如果不嫌冒昧的话,我在这里想和大家说几句推心置腹的话:几何画板作复变分形,体现出了老师们超凡卓越的能力,给人们展现的不仅仅是专业上的造诣,更多的是精神上的感动,至少我是被感动了。我总是觉得,老师们的业绩非常伟大,但也未免太过悲壮,几何画板玩分形,太辛苦了,希望老师们别怪罪,我说的是心里话。
    无论是几何画板还是复变分形,我真的不敢恭维自己。老师们越是包容我心里越是惭愧,跟着这个论坛学了这么多东西,怎么样才能对得起大家呢,开这个帖子的时候,我是犹豫了很久的:就 javascript 而言,深度和广度我都不具备,myzam 老师说得对,javascript 资料、教程和网站有很多,这是画板论坛,在这里专门讨论 javascript 是很不合时宜的。想了很久,最后大起胆子决定以“几何画板下的编程思考”为题来展开讨论,我知道这个祸闯大了,第一,对于我来说,题目太大了,编程的思维模式和行为习惯是个仁者见仁智者见智的问题。第二,这个题目不准确,让人以为是要对几何画板的功能进行编程模拟,在此特向大家道歉!
    我想把题目改成:“几何画板带给编程者的思考”,又觉得怪怪的,我的意思是:就编程来说,几何画板改变了我的行为习惯和思维模式。唉,总之,说来说去,结结吧吧的。哪位老师若有高见,请不吝赐教,谢谢了!
    实际上,脚本语言 javascript 是编程世界里的一个冤大头,对于不熟悉它的人来说,其问题出在“脚本”二字上,这里不展开,只是建议大家从认识上去掉“脚本”两个字,javascript 它就是一门纯粹的算法语言。对于熟悉它的人来说,建议看一下
    http://blog.csdn.net/uoyevoli/article/details/744915
和其他的有关文章。重复一下:javascript 作为 web 浏览器的前端脚本语言有着渗透网络世界所有领域的趋势。
    这个帖子之所以到现在要歇一下,就是希望得到各位老师的提携和指点,以使帖子朝着正确的方向走下去(如果可以的话)。
    上面贴出的那个“万花曲线规”,不是要讨论它的算法和实现,而是我们将要讨论更为高级的一种数据输入方式:屏幕输入。
    再次谢谢各位老师的包容和指教!!!
作者: myzam    时间: 2014-10-18 13:47

21# xklppp
论坛贵在论字上,也就是说你想怎么写就怎么写。你表达你的观点就行,别人接不接受是另一回事。大胆的写吧,总有人会看的。顶起。论坛要的就是百花齐放的效果。
作者: xiaongxp    时间: 2014-10-18 14:11

21# xklppp
强烈支持!这才是取长补短,相得益彰!
作者: lnszdzg    时间: 2014-10-18 19:48

资料收到,谢谢分享。
作者: xklppp    时间: 2014-10-18 23:44

就软件界面而言,如果程序只涉及到文本,数据的输入有了前面介绍的两种方式即:键盘输入和鼠标输入(不是很准确)也可以应付一般的情况了。若需要绘图,则屏幕输入方式就显得非常重要。比方说:作复变分形时,在 mandbrot 集中寻找 julia 集,以及复分形的缩放,只用现有的输入方式会使得编程很是艰难。
    html5 用来处理图形图像的 canvas(画布) 元素,提供了一个二维接口 getContext('2d'),脚本语言就是通过这个接口来进行图形图像编程的。如:
      <canvas id=mCanvas width=300 height=200></canvas>
    这里放置了一个名为 mCanvas,宽高为 300,200 的画布,画布的默认状态是透明的。由于解释起来比较繁复和啰嗦,我都写入到了代码的注释里面。
New1.gif
2014-10-20 09:09

canvas 绘图功能非常强大,虽然目前只提供 2D 接口,但当下网上关于 canvas 3D 应用的视觉冲击力简直是不可思议。就 2D 来说,photoshop 的很多功能和特效都可以通过 javascript 不难的编程实现,在动画方面,flash 已经不能望其项背了。
    从程序运行效果来看,现有的参数输入方式,已经显得很笨拙,必须改善其性能,不过接下来的讨论会稍为艰难一点,谢谢大家的耐心!
htm0100.rar (1.45 KB)

图片附件: New1.gif (2014-10-20 09:09, 4.68 KB) / 下载次数 1883
http://www.inrm3d.cn/attachment.php?aid=22587&k=40620e44f05d186053340c6ab2bf7fd6&t=1711719378&sid=N37hla



附件: htm0100.rar (2014-10-18 23:44, 1.45 KB) / 下载次数 3346
http://www.inrm3d.cn/attachment.php?aid=22588&k=8247696c477cef0b1786758f221d62c9&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-19 11:31

很多人不太愿意搭理 javascript,它不就是个前端脚本工具吗,做大型网站有的是后台脚本语言,况且,从美工的角度来考虑,有了html 和 css 网页就可以做得很炫很酷,只是在设计页面交互功能和简单动画时用到 javascript 而已。
    其实,简单的说,html+css+javascript 可以做两个方面的事情,一是做网页,二是做软件。做网页不是这个帖子讨论的内容,我们要讨论的是如何使用 javascript 开发软件,太多的人没朝这方面去想,尽管现在 javascript 像个疯子一样在网络世界横行霸道,但也只是个敲边鼓,跑龙套的角色。
    就软件开发而言:第一,网络世界涌现出越来越多的在线软件,像雨后春笋。第二,这个帖子的开篇有提示过,“把文件的扩展名 .htm 改为 .hta 然后双击该文件,好了,我们竟然开发出了一个软件!”,之所以这样说,首先这是事实,其次,这可以成为我们学习 javascript 的动力,为我们学习 javascript 找到一个足以自豪的理由!
    如果有学习过可视化编程,如:vb,vc,c#,我们会发现:在工程项目的代码文件夹中,主要的有两类文件,一是算法代码,二是窗体代码,算法代码就是一般意义上的数据处理的程序代码,这一点,帖子在后面的复变分形中会涉及一些,真要讨论算法的话,得另外开个专题。为扣主题,本贴只讨论第二个方面的问题,窗体代码,也就是软件的界面代码,为方便见,以后我们把软件的界面就称之为窗体,也就是 html 的 body 元素。
    窗体代码主要作三件事:
    1.在窗体(body)中放置程序需要的对象(元素)。
    2.给各对象添加事件。
    3.编写事件的响应代码。
    这就是可视化编程要做的事情,我们就按照这种结构来编写我们的 javascript 代码。大家从前一个文件 htm0100.htm 中可以看得出来,窗体中只放置了五六个对象,其代码就显得有些拥挤不堪。事实上,它不像软件代码,只是个网页代码而已,并且会给后面的编程带来难以想象的麻烦。
    为此,我们编写一个名为 formSetup 的窗体函数,里面再嵌套 initComponents 放置对象,addEvent 添加事件和相应事件响应等函数,如是,我们的代码看起来像这个样子:
<script>
    function drawing()
    {
    }
    function formSetup()
    {
        var dataVerify=function(){}
        var addEvent=function(){}
        var initComponents=function(){}
    }
</script>
<body></body>
    没有新的内容,只是调整了一下结构。到现在,我们这才真的有点编程、做软件的意思了!
htm0101.rar (1.91 KB)

附件: htm0101.rar (2014-10-19 11:31, 1.91 KB) / 下载次数 3260
http://www.inrm3d.cn/attachment.php?aid=22589&k=41cc1e7706eb7949cf770f5e5db8a779&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-20 00:13

程序编到这里,仍然有两个问题:
    1.在输入框中输入数据后,须点击“绘图”按钮,输出窗口才会被刷新。
    2.几乎所有的绘图软件都提供了另外一种所见所得的数据输入方式,对于这种几何图形,更直观的方式是通过拖动图形的关键点来即时改变其形状,我们暂且称之为屏幕输入。
    这里先解决第一个问题,唯有如此,才能解决第二个问题。
    进一步调整代码:
<script>
    function Cycloid(){}
    function formSetup()
    {
        var RR,rr,pp;
        var drawing=function(){}
        var resetCycle=function(){}
        var dataVerify=function(){}
        var initComponents=function(){}
        var addEvent=function(){}
    }
</script>
New.gif
2014-10-20 09:09

这里,我们有一个基本的原则:除非万不得已,一般不在算法代码中处理窗体元素的各种数据,而算法中需要的各种参数,应该在窗体函数 formSetup 中预处理完毕后通过函数调用传递过去,开发大型软件时,这一点显得尤为重要。
htm0102.rar (1.42 KB)

图片附件: New.gif (2014-10-20 09:09, 4.72 KB) / 下载次数 1816
http://www.inrm3d.cn/attachment.php?aid=22591&k=21681914660c57d79a943a43cb6cba5e&t=1711719378&sid=N37hla



附件: htm0102.rar (2014-10-20 00:35, 1.42 KB) / 下载次数 3384
http://www.inrm3d.cn/attachment.php?aid=22594&k=deb214e8106bc6875d21fab48dbad7de&t=1711719378&sid=N37hla
作者: 一线天    时间: 2014-10-20 14:48

27# xklppp


可以感觉到,楼主的不断研究,最终成就一个基于网页的几何画板,期待尽早实现。
作者: xklppp    时间: 2014-10-21 00:29

由于代码是以万花曲线规为蓝本,代码中的 R、r、p 分别为定圆半径、动圆半径、笔孔。在程序输出窗口的画布中,设置了三个关键点:定圆圆心、动圆圆心、笔孔。为简化编程其中只有动圆圆心、笔孔被设置为可控屏幕点。R 由 mCanvas 的鼠标滚轮事件控制(这样安排主要是为了后面复分形的缩放留出代码空间),r、p 则通过 mCanvas 的鼠标拖拽来操纵。
    鼠标滚轮事件的代码很简单,和前面的一样,不再赘述。然而,鼠标拖拽却比较麻烦。一个鼠标拖拽动作包括三个事件:
    onmousedown 在对象上按下鼠标
    onmousemove 在对象上移动鼠标
      onmouseup 在对象上释放鼠标
    像大多数绘图软件的鼠标吸附(捕捉)功能一样,再加上一个吸附(捕捉)半径,就可以编写鼠标拖拽事件的程序代码了。
New1.gif
2014-10-21 09:35

    关于数据输入,讨论到这里就告一段落了。由于我们编写的是小程序,窗体设计中的诸如菜单栏、工具条、快捷按钮,属性面板,弹出窗口等等,本贴就不再涉及了。
    万花曲线规中还用到动画效果和多图层技术,这些我们将留在后续的复分形编程中讨论。
htm0103.rar (1.89 KB)

图片附件: New1.gif (2014-10-21 09:35, 5.09 KB) / 下载次数 1803
http://www.inrm3d.cn/attachment.php?aid=22595&k=699f63010dab7d2fc67fc4e6fd4ca8da&t=1711719378&sid=N37hla



附件: htm0103.rar (2014-10-21 00:29, 1.89 KB) / 下载次数 3158
http://www.inrm3d.cn/attachment.php?aid=22596&k=69c8894f686da970cdafbd4134347671&t=1711719378&sid=N37hla
作者: 周传高    时间: 2014-10-21 15:13

看不懂,但坚决支持!
作者: xklppp    时间: 2014-10-21 15:42

30# 周传高
谢谢版主的提携,非常感谢!!!
作者: xklppp    时间: 2014-10-21 23:42

大家都是玩复形的高手,所以,我们这里只需就程序设计的思路和代码的结构展开讨论。
    对于 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)
后面我们将一步一步地完善其代码。

图片附件: 3.gif (2014-10-25 18:09, 3.01 KB) / 下载次数 1697
http://www.inrm3d.cn/attachment.php?aid=22597&k=bbd0b6c293352a4b708f361ca2f4a55a&t=1711719378&sid=N37hla



附件: htm0201.rar (2014-10-21 23:42, 933 Bytes) / 下载次数 2827
http://www.inrm3d.cn/attachment.php?aid=22598&k=fcb7c34777b1c75fa7a6ba3ddf317567&t=1711719378&sid=N37hla
作者: room901    时间: 2014-10-22 15:14

支持楼主,唯一可惜html5暂时很多版本的浏览器都不支持,发一个简单动画(兼容性比较好).

附件: 简单动画.rar (2014-10-22 15:14, 482 Bytes) / 下载次数 1861
http://www.inrm3d.cn/attachment.php?aid=22599&k=57f9aa0f090dcfb47f51d9b15751e900&t=1711719378&sid=N37hla
作者: wdpfox    时间: 2014-10-22 15:51

尽管不太明白,但也要表示感谢与支持,学习学习:wdpfox@sina.com
作者: xklppp    时间: 2014-10-23 01:31

前面讨论的 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)

图片附件: 3.jpg (2014-10-27 08:34, 24.92 KB) / 下载次数 1673
http://www.inrm3d.cn/attachment.php?aid=22600&k=74951bbadb7dd3020f0436f9df3809be&t=1711719378&sid=N37hla



附件: htm0202.rar (2014-10-23 01:31, 2.14 KB) / 下载次数 2861
http://www.inrm3d.cn/attachment.php?aid=22604&k=fa5395be5d141bf96d61fe8c4b830122&t=1711719378&sid=N37hla
作者: lnszdzg    时间: 2014-10-23 10:15

美不胜收啊
作者: room901    时间: 2014-10-23 13:45

非常强大!
作者: xklppp    时间: 2014-10-24 12:43

现在,我们在程序中增加缩放模块,下面是放大图像的原理图:
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)

图片附件: New.jpg (2014-10-25 18:04, 18.61 KB) / 下载次数 1700
http://www.inrm3d.cn/attachment.php?aid=22617&k=52107aa33fbabd4f29f94e4d6bc7a694&t=1711719378&sid=N37hla



图片附件: 1.jpg (2014-10-25 18:08, 12.41 KB) / 下载次数 1689
http://www.inrm3d.cn/attachment.php?aid=22618&k=31dad020f1cca8fb974eb4d09a2023cf&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-10-25 18:08, 13.25 KB) / 下载次数 1668
http://www.inrm3d.cn/attachment.php?aid=22619&k=989aa2e9eab5faa3ffa75d6492e71ed8&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-10-25 18:08, 14.96 KB) / 下载次数 1697
http://www.inrm3d.cn/attachment.php?aid=22620&k=3d6b7ac035fed168ea44db42cee7df80&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-10-25 18:08, 15.62 KB) / 下载次数 1664
http://www.inrm3d.cn/attachment.php?aid=22621&k=9d83bc6c070be249d5931ba5ae4451e5&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-10-25 18:08, 17.41 KB) / 下载次数 1684
http://www.inrm3d.cn/attachment.php?aid=22622&k=99938911511527386c9ea8b58848ba8e&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-10-25 18:08, 16.63 KB) / 下载次数 1671
http://www.inrm3d.cn/attachment.php?aid=22623&k=825a8a5ba50b20d3ec0b48c0481ebb04&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-10-25 18:08, 15.79 KB) / 下载次数 1701
http://www.inrm3d.cn/attachment.php?aid=22624&k=a4f8d06c125c08cdb4beed307534dd14&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-10-25 18:08, 15.88 KB) / 下载次数 1677
http://www.inrm3d.cn/attachment.php?aid=22625&k=69385cabbbfeebcb91ac201ebb68c98a&t=1711719378&sid=N37hla



附件: htm0203.rar (2014-10-24 12:43, 2.21 KB) / 下载次数 2869
http://www.inrm3d.cn/attachment.php?aid=22626&k=5c5a14b50f9fb34a9856cfddd5fec52a&t=1711719378&sid=N37hla
作者: xfzch    时间: 2014-10-24 22:44

发一份资料给我,谢谢!
xfzch@qq.com
作者: xklppp    时间: 2014-10-26 14:34

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)

图片附件: 1.jpg (2014-10-27 08:33, 16.68 KB) / 下载次数 1680
http://www.inrm3d.cn/attachment.php?aid=22637&k=132280fa97e08c91295cf2d9c33a7cee&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-10-27 08:33, 16.43 KB) / 下载次数 1693
http://www.inrm3d.cn/attachment.php?aid=22638&k=272b60caa55a360117974e1c9b7f693e&t=1711719378&sid=N37hla



附件: htm0204.rar (2014-10-26 14:34, 2.87 KB) / 下载次数 2930
http://www.inrm3d.cn/attachment.php?aid=22639&k=316f18fd40dcffc00bd8c3a8fd6f163e&t=1711719378&sid=N37hla
作者: a2569875    时间: 2014-10-26 16:59

29# xklppp 关于圆上的可动点、可选取移动的圆、轨迹、轨迹上的可动点又要如何制作或定义呢?
作者: xklppp    时间: 2014-10-26 21:16

41# a2569875
摆线方程:
      x=(R-r)cost+pcos(1-R/r)t
      y=(R-r)sint+psin(1-R/r)t
其中的 p 就是轨迹上的动点
     代码实现请参考 16 楼的原文件,为简单见,这个帖子没有准备就特殊问题的特殊算法展开讨论,这里只就编程思路略作探讨,请原谅!!!
作者: xklppp    时间: 2014-10-27 12:58

理论上讲,显示 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
2014-10-29 22:10

2.jpg
2014-10-29 22:10

3.jpg
2014-10-29 22:10

4.jpg
2014-10-29 22:10

5.jpg
2014-10-29 22:10

6.jpg
2014-10-29 22:10

7.jpg
2014-10-29 22:10

8.jpg
2014-10-29 22:10

9.jpg
2014-10-29 22:10

a.jpg
2014-10-29 22:10

d.jpg
2014-10-29 22:13

e.jpg
2014-10-29 22:13

    到此,我们只要修改算法代码中 iterator 函数的迭代算法,就可以欣赏到很多复变模型的 M 集和 J 集的精妙结构,虽然只是灰度图像,却也不乏乐趣。
htm0205.rar (2.12 KB)

图片附件: 1.jpg (2014-10-29 22:10, 16.25 KB) / 下载次数 1437
http://www.inrm3d.cn/attachment.php?aid=22646&k=5675745575c33bae9b2a2887308e13bc&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-10-29 22:10, 15.55 KB) / 下载次数 1462
http://www.inrm3d.cn/attachment.php?aid=22647&k=fe55bee6112387da61e9e41f3cdce14f&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-10-29 22:10, 16.86 KB) / 下载次数 1453
http://www.inrm3d.cn/attachment.php?aid=22648&k=d2ece2f381db3bc73bc9c068deff6dd9&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-10-29 22:10, 18.64 KB) / 下载次数 1434
http://www.inrm3d.cn/attachment.php?aid=22649&k=aafe729f20d71b8de2d1dee1298c1209&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-10-29 22:10, 18.58 KB) / 下载次数 1433
http://www.inrm3d.cn/attachment.php?aid=22650&k=f3809eb2f8d5665e4c04a0d748eb85a7&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-10-29 22:10, 17.54 KB) / 下载次数 1422
http://www.inrm3d.cn/attachment.php?aid=22651&k=a7a4d1eeefa6f3f0aad53205aa7e0c47&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-10-29 22:10, 18.72 KB) / 下载次数 1434
http://www.inrm3d.cn/attachment.php?aid=22652&k=d4383997d4599f0e843789af8c1dd231&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-10-29 22:10, 17.8 KB) / 下载次数 1440
http://www.inrm3d.cn/attachment.php?aid=22653&k=8ac09305ecc8dd8b8f2fa3d0eb11578a&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-10-29 22:10, 18.05 KB) / 下载次数 1412
http://www.inrm3d.cn/attachment.php?aid=22654&k=8117e7e15dff9539c0395a05fe88814a&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-10-29 22:10, 20.22 KB) / 下载次数 1444
http://www.inrm3d.cn/attachment.php?aid=22655&k=60f12000ccedd2734dbe1aa556847f0b&t=1711719378&sid=N37hla



图片附件: d.jpg (2014-10-29 22:13, 20.35 KB) / 下载次数 1429
http://www.inrm3d.cn/attachment.php?aid=22656&k=41ec67cc4a3b9d02db284b89d38b982b&t=1711719378&sid=N37hla



图片附件: e.jpg (2014-10-29 22:13, 37.16 KB) / 下载次数 1461
http://www.inrm3d.cn/attachment.php?aid=22657&k=bd6751938b65010ca7cfcd11eed8a1b8&t=1711719378&sid=N37hla



附件: htm0205.rar (2014-10-27 12:58, 2.12 KB) / 下载次数 2776
http://www.inrm3d.cn/attachment.php?aid=22658&k=213e5130d68e1685a57a424825b832e0&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-29 12:56

关于复分形的着色,各位老师都是大师级高手,我只知道一些初浅的方法。接下来,我们讨论一下着色模块的代码编写。在窗体中加入 html 的颜色对话框元素:
    <object classid='clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b'></object>
    而 javascript 则是通过该对象的 chooseColorDlg 方法显示颜色对话框并让用户选取颜色的。
    在现有的窗体代码中,显示 M 集和 J 集的两块画布被重叠在一起并放置在一个名为 bColor 的 div 块元素之中,如其名,bColor 用来设置背景色,与此同时,设置一个画布前景色,在迭代过程中,依据逃逸时间,由浅到深设置各像素的不透明度,这样就获得了基于前景色和逃逸时间的囚集图像。
    为便于扩展,这次对窗体代码进行了简化处理并稍为调整了一下界面的视觉效果,相应的增加了setBcolor 和 setRibbon 两函个数,前者设置背景色,后者设置前景色,之所以取名 setRibbon,是因为后面有需要使用“色带”的着色算法。
1.jpg
2014-10-29 22:18

2.jpg
2014-10-29 22:18

    程序对 iterator 和 setColor 的返回值进行了必要的扩展,以适应更多的着色算法。
htm0301.rar (2.48 KB)

图片附件: 1.jpg (2014-10-29 22:18, 15.9 KB) / 下载次数 1447
http://www.inrm3d.cn/attachment.php?aid=22661&k=e396ee0efc941d5241d33fdbc68e0eae&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-10-29 22:18, 18.81 KB) / 下载次数 1424
http://www.inrm3d.cn/attachment.php?aid=22662&k=9219edfa5a80e43e3efb7fc729cbadf1&t=1711719378&sid=N37hla



附件: htm0301.rar (2014-10-29 12:56, 2.48 KB) / 下载次数 2785
http://www.inrm3d.cn/attachment.php?aid=22663&k=69cd2a154610ce1b490fecb786a5696e&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-10-31 23:08

在算法代码 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)

附件: htm0302.rar (2014-10-31 23:08, 2.57 KB) / 下载次数 2847
http://www.inrm3d.cn/attachment.php?aid=22668&k=8c6d9b0e89d135f66aef2b73505134fe&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-2 00:56

现在,可以很方便地来扩展算法代码中的 setColor 功能模块了,尽管这里给出了 16 种着色方案,由于 javascript 具备面向对象的语言能力,所以,代码还是很简单的。需要说明的是:我没有能力提供成熟的着色算法,很是抱歉。这里只是向大家展示了程序的结构,当大家熟悉了 javascript 后,在编写自己的程序时,便可将那些惊艳的算法植入其中。
1.jpg
2014-11-2 08:40

2.jpg
2014-11-2 08:40

3.jpg
2014-11-2 08:40

4.jpg
2014-11-2 08:40

5.jpg
2014-11-2 08:40

6.jpg
2014-11-2 08:40

7.jpg
2014-11-2 08:40

8.jpg
2014-11-2 08:40

9.jpg
2014-11-2 08:40

a.jpg
2014-11-2 08:40

htm0303.rar (3.93 KB)

图片附件: 1.jpg (2014-11-2 08:40, 20.42 KB) / 下载次数 1422
http://www.inrm3d.cn/attachment.php?aid=22669&k=b0d091873d402f71ca360a652b64e745&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-2 08:40, 28.63 KB) / 下载次数 1403
http://www.inrm3d.cn/attachment.php?aid=22670&k=1a562cc82bdb3e5e75b4e40ee43bf7cd&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-2 08:40, 13.55 KB) / 下载次数 1428
http://www.inrm3d.cn/attachment.php?aid=22671&k=d6c481651ac2d055a01d972b3815e967&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-2 08:40, 14.07 KB) / 下载次数 1419
http://www.inrm3d.cn/attachment.php?aid=22672&k=cad25d8b6780ade05a3bd491a1d5df91&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-2 08:40, 14.49 KB) / 下载次数 1395
http://www.inrm3d.cn/attachment.php?aid=22673&k=cf66c0a631322cfc1033ac47cef34f3e&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-2 08:40, 15.64 KB) / 下载次数 1435
http://www.inrm3d.cn/attachment.php?aid=22674&k=38cca5b47b377e2ebde3890ae85b7d82&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-2 08:40, 24.58 KB) / 下载次数 1415
http://www.inrm3d.cn/attachment.php?aid=22675&k=26456c3c90fba8743f5973c6382c2581&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-2 08:40, 24.55 KB) / 下载次数 1392
http://www.inrm3d.cn/attachment.php?aid=22676&k=6775222004bd30e18a2dc91b3f1ea44b&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-2 08:40, 26.02 KB) / 下载次数 1436
http://www.inrm3d.cn/attachment.php?aid=22677&k=2dc6e9652a2bc789d700279c1ce2d0ee&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-2 08:40, 25.72 KB) / 下载次数 1411
http://www.inrm3d.cn/attachment.php?aid=22678&k=21784825310c55d5114cb3afdfff10f4&t=1711719378&sid=N37hla



附件: htm0303.rar (2014-11-2 00:56, 3.93 KB) / 下载次数 2740
http://www.inrm3d.cn/attachment.php?aid=22679&k=4d2831e4dfdcbce90d7f82b7d6bebb48&t=1711719378&sid=N37hla
作者: 周传高    时间: 2014-11-2 09:49

大赞!

图片附件: FS0013.png (2014-11-8 17:15, 26.03 KB) / 下载次数 1036
http://www.inrm3d.cn/attachment.php?aid=22745&k=eb1513936eec8419289277d24e84f1c3&t=1711719378&sid=N37hla


作者: lnszdzg    时间: 2014-11-2 12:19

太强大了,喜欢!
作者: xklppp    时间: 2014-11-2 23:05

随着程序功能的增加,要输入的参数会越来越多,对于那些应用于绝大多数或所有状况的参数,可以设计成即时响应;而对于那些只应用于少部份甚至是个别状况的参数,要设计成即时响应一般比较麻烦,所以,我们在窗体中放置了一个刷新reFresh 按钮,以应付这种状况,当改变参数而程序没有反应时,便可点击这个 reFresh 按钮。这样,程序编写起来会简单一些。这一次,我们充实了一下 transPlane 功能模块,由于其方法和 setColor 差不多,这里就不啰嗦了。
1.jpg
2014-11-4 14:42

2.jpg
2014-11-4 14:42

3.jpg
2014-11-4 14:42

4.jpg
2014-11-4 14:42

5.jpg
2014-11-4 14:42

6.jpg
2014-11-4 14:42

7.jpg
2014-11-4 14:42

8.jpg
2014-11-4 14:42

9.jpg
2014-11-4 14:42

a.jpg
2014-11-4 14:42

htm0304.rar (3.79 KB)

图片附件: 1.jpg (2014-11-4 14:42, 14.73 KB) / 下载次数 1450
http://www.inrm3d.cn/attachment.php?aid=22680&k=e61e17719f984c1288fcbce2d2dfd31a&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-4 14:42, 17.35 KB) / 下载次数 1420
http://www.inrm3d.cn/attachment.php?aid=22681&k=965b65bde14ded7aaf8ada95c5526650&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-4 14:42, 14.19 KB) / 下载次数 1416
http://www.inrm3d.cn/attachment.php?aid=22682&k=85dc9fd7f375bac88019d4d77806f560&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-4 14:42, 11.82 KB) / 下载次数 1422
http://www.inrm3d.cn/attachment.php?aid=22683&k=0dadec2fae788ba9e9650e812fadd703&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-4 14:42, 14.29 KB) / 下载次数 1423
http://www.inrm3d.cn/attachment.php?aid=22684&k=6c8d4d8b9f726bf5509970a5456090c4&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-4 14:42, 13.63 KB) / 下载次数 1441
http://www.inrm3d.cn/attachment.php?aid=22685&k=a8b1fb18bead34f19f482d1ead1443a2&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-4 14:42, 15.32 KB) / 下载次数 1407
http://www.inrm3d.cn/attachment.php?aid=22686&k=86c10211428af9ebec20ac1fbb3ca065&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-4 14:42, 13.49 KB) / 下载次数 1434
http://www.inrm3d.cn/attachment.php?aid=22687&k=1221b92c0598213e1ed179b9bd5ef9e6&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-4 14:42, 17.24 KB) / 下载次数 1420
http://www.inrm3d.cn/attachment.php?aid=22688&k=7c30736b85c62b891277734f3a76b474&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-4 14:42, 16.34 KB) / 下载次数 1445
http://www.inrm3d.cn/attachment.php?aid=22689&k=6f151cf0d6bf29dc910954dc28eb59ed&t=1711719378&sid=N37hla



附件: htm0304.rar (2014-11-2 23:05, 3.79 KB) / 下载次数 2794
http://www.inrm3d.cn/attachment.php?aid=22690&k=1a787e2408ee8f39536a5e68b822904b&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-3 23:37

上面在 transPlane 功能模块中添加的都是单一的几何变换,这里再增加四种可以进行组合的稍为复杂一点的变换,不同的组合有 14 种,与前面的 12 种再组合,一共有一百多种,其中有效的组合变换也不下一百种。其实,关于几何变换我真的是不太懂,只是觉得加到程序里面蛮好玩的。尽管如此,程序的结构是没问题的,大家可以把真正意义上的几何变换植入到自己的程序中,免得像我一样让人笑话。
    这一次的代码更加简单,所以代码中没有写注释,相信大家花点时间是能看得懂的。
1.jpg
2014-11-4 14:48

2.jpg
2014-11-4 14:48

3.jpg
2014-11-4 14:48

4.jpg
2014-11-4 14:48

5.jpg
2014-11-4 14:48

6.jpg
2014-11-4 14:48

7.jpg
2014-11-4 14:48

8.jpg
2014-11-4 14:48

9.jpg
2014-11-4 14:48

a.jpg
2014-11-4 14:48

b.jpg
2014-11-4 14:48

c.jpg
2014-11-4 14:48

htm0305.rar (4.03 KB)

图片附件: 1.jpg (2014-11-4 14:48, 18.05 KB) / 下载次数 1418
http://www.inrm3d.cn/attachment.php?aid=22694&k=d973d98f6ba457c6d47f8f6ae330223a&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-4 14:48, 14.25 KB) / 下载次数 1408
http://www.inrm3d.cn/attachment.php?aid=22695&k=40dda20c007d36e2cf18f7f6c1bb8fc8&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-4 14:48, 18.28 KB) / 下载次数 1395
http://www.inrm3d.cn/attachment.php?aid=22696&k=951d279c2ab329a5582bd05bff7652c4&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-4 14:48, 13.52 KB) / 下载次数 1404
http://www.inrm3d.cn/attachment.php?aid=22697&k=6846e8b99390eeddca30bf875e215948&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-4 14:48, 14.04 KB) / 下载次数 1401
http://www.inrm3d.cn/attachment.php?aid=22698&k=e929c33a33c0dc3bb26bc795481e0063&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-4 14:48, 14.04 KB) / 下载次数 1402
http://www.inrm3d.cn/attachment.php?aid=22699&k=822e20b518112169fad12b50f70317a2&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-4 14:48, 16.33 KB) / 下载次数 1417
http://www.inrm3d.cn/attachment.php?aid=22700&k=db027247a12ebaf6c8f16e16a6c2f39b&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-4 14:48, 21.58 KB) / 下载次数 1423
http://www.inrm3d.cn/attachment.php?aid=22701&k=8665b92534062dae8d5ecd2df4bc295b&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-4 14:48, 16.81 KB) / 下载次数 1412
http://www.inrm3d.cn/attachment.php?aid=22702&k=415e99ec567101a64f6c9f3e197ba68e&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-4 14:48, 19.4 KB) / 下载次数 1421
http://www.inrm3d.cn/attachment.php?aid=22703&k=8760bdcda4bfcb8e9ecc499eacafc9d3&t=1711719378&sid=N37hla



图片附件: b.jpg (2014-11-4 14:48, 31.99 KB) / 下载次数 1388
http://www.inrm3d.cn/attachment.php?aid=22704&k=7ba1499a068a6746e4b46263346f1eaf&t=1711719378&sid=N37hla



图片附件: c.jpg (2014-11-4 14:48, 22.99 KB) / 下载次数 1398
http://www.inrm3d.cn/attachment.php?aid=22705&k=e0d72271e64f7e4adae5afa2580810d2&t=1711719378&sid=N37hla



附件: htm0305.rar (2014-11-3 23:37, 4.03 KB) / 下载次数 2753
http://www.inrm3d.cn/attachment.php?aid=22706&k=53386941418689b959aa4ffe9eadc3d8&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-4 23:38

如果我们在组合变换的基础上再叠加一次简单变换,将会得到更多的图像,不过这种设计近乎钻牛角尖,所以,尽管编写了代码,这一功能还是少用为宜,因为它是以牺牲速度为代价的。
1.jpg
2014-11-8 14:46

2.jpg
2014-11-8 14:46

3.jpg
2014-11-8 14:46

4.jpg
2014-11-8 14:46

5.jpg
2014-11-8 14:46

6.jpg
2014-11-8 14:46

7.jpg
2014-11-8 14:46

8.jpg
2014-11-8 14:46

9.jpg
2014-11-8 14:46

a.jpg
2014-11-8 14:46

htm0306.rar (4.1 KB)

图片附件: 1.jpg (2014-11-8 14:46, 15.22 KB) / 下载次数 1477
http://www.inrm3d.cn/attachment.php?aid=22707&k=faa434722976942e48710597981016ca&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-8 14:46, 15.62 KB) / 下载次数 1473
http://www.inrm3d.cn/attachment.php?aid=22708&k=fd63630cba1d1cefa91d22f50904f643&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-8 14:46, 18.26 KB) / 下载次数 1468
http://www.inrm3d.cn/attachment.php?aid=22709&k=3f4ef00492fe43310919967e108cc327&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-8 14:46, 21.98 KB) / 下载次数 1449
http://www.inrm3d.cn/attachment.php?aid=22710&k=b889268f1f9e70b9fa0349e40bec832b&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-8 14:46, 18.96 KB) / 下载次数 1474
http://www.inrm3d.cn/attachment.php?aid=22711&k=9e3f1e68e7498d823cce2d5047af3a44&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-8 14:46, 25.18 KB) / 下载次数 1458
http://www.inrm3d.cn/attachment.php?aid=22712&k=f470b2814bf6a56b11b46f374cc92c5a&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-8 14:46, 27.2 KB) / 下载次数 1461
http://www.inrm3d.cn/attachment.php?aid=22713&k=39394c1a16ed4b8b8dfa46b701b98146&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-8 14:46, 30.03 KB) / 下载次数 1444
http://www.inrm3d.cn/attachment.php?aid=22714&k=474922df375339793818d6019def8039&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-8 14:46, 27.01 KB) / 下载次数 1442
http://www.inrm3d.cn/attachment.php?aid=22715&k=07b873f4dbef8bac4172a22c605d12e1&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-8 14:46, 19.3 KB) / 下载次数 1450
http://www.inrm3d.cn/attachment.php?aid=22716&k=211ed7e8ef628ceee096c2e4306faecc&t=1711719378&sid=N37hla



附件: htm0306.rar (2014-11-4 23:38, 4.1 KB) / 下载次数 2829
http://www.inrm3d.cn/attachment.php?aid=22717&k=7fdca1cc0b1cf68df920f57d14d52da0&t=1711719378&sid=N37hla
作者: wdpfox    时间: 2014-11-5 14:45

下载学习,多谢楼主慷慨分享好资料!
作者: lnszdzg    时间: 2014-11-5 16:16

非常感谢xklppp老师的讲解,虽然对于javascript学习起来很吃力——原先没有接触过——我会慢慢学习。
我把您的思路用UF写出来了——尽管UF是专业的分形软件,但是您实现的功能在UF用一点难度——不知您是否介意我把它贴出来?
作者: lnszdzg    时间: 2014-11-5 16:24

捕获34.PNG
2014-11-5 16:24
捕获35.PNG
2014-11-5 16:24
捕获36.PNG
2014-11-5 16:24
捕获37.PNG
2014-11-5 16:24


图片附件: 捕获34.PNG (2014-11-5 16:24, 51.97 KB) / 下载次数 1341
http://www.inrm3d.cn/attachment.php?aid=22718&k=bcbca46acb48e46acd1a2e53abc79c4f&t=1711719378&sid=N37hla



图片附件: 捕获35.PNG (2014-11-5 16:24, 30.18 KB) / 下载次数 1208
http://www.inrm3d.cn/attachment.php?aid=22719&k=dd93e994f0f7e374c6f97d1f82d5cebd&t=1711719378&sid=N37hla



图片附件: 捕获36.PNG (2014-11-5 16:24, 37.92 KB) / 下载次数 1200
http://www.inrm3d.cn/attachment.php?aid=22720&k=ca5f10a6e8d67bc96ef866f33e1060cb&t=1711719378&sid=N37hla



图片附件: 捕获37.PNG (2014-11-5 16:24, 39.67 KB) / 下载次数 1195
http://www.inrm3d.cn/attachment.php?aid=22721&k=2d6819119d02b971827087aa0a4ed4f2&t=1711719378&sid=N37hla


作者: lnszdzg    时间: 2014-11-5 16:29

New.jpg
2014-11-8 14:48


图片附件: New.jpg (2014-11-8 14:48, 14.82 KB) / 下载次数 1203
http://www.inrm3d.cn/attachment.php?aid=22722&k=1c1f52dcd822109b758f84ebe3b0ea9f&t=1711719378&sid=N37hla


作者: xklppp    时间: 2014-11-5 18:21

55# lnszdzg
杜老师好!你是对的,对于软件和语言,每个人都有自己的偏好,要人放弃自己手头上称手的工具而从头再来是件蛮痛苦的事情,几何画板也好,UF,mathCad 也好,vb,vc,c#,javascript 也好,统统都不重要,重要的是使用这些工具时的思维意识和行为模式,这个帖子讨论到这里,程序所具有的功能和效果,用 javascript 实现并非上上之选,但比起其他的算法语言和软件来,javascript 却是最简单最轻松的。不过,这也还不是这个帖子的最终目的,我只是想借 javascript 编写复变分形程序中遇到的一些问题向大家传递一个信息:复变分形在最后图形的渲染上确实有着很多精妙绝伦的手法,产生出令人震撼的视觉冲击。然而,作为初学者,复分形的结构本身才是首先要解决的问题,所以,选择一个恰当的起点和视角是非常必要的。
谢谢杜老师,衷心希望能多贴美图,多提意见。
作者: lnszdzg    时间: 2014-11-6 16:29

谢谢xklppp老师!
感谢您的讲解。虽然只知皮毛,但是我从您的程序中学到了不少东西——最主要的一点事:程序的模块化思想——太精妙了!我把UF的代码发到Mathcad吧里了——没有征求您的意见,不介意吧?
http://tieba.baidu.com/p/3394265041
作者: xklppp    时间: 2014-11-6 17:39

57# lnszdzg
很好啊!说明这个帖子的讨论还是有点价值的,讨论的过程中,我们并没有纠结在编程语言本身上,其目的就是希望大家不要被语言束缚,设计模式才是最重要的。
作者: xklppp    时间: 2014-11-6 17:44

很多的迭代模型需要用到 z,c 以外的参数,所以,窗体中新加了 A,B 相应的输入框,后面的newton,nova 要用到 Q,R,这里预先一并加上。
    迭代模型数组形如:
    var mjModels=[{
    para:[],
    default:"",
    func:function(){}
    }},}
    ......
    }},{
    para:[],
    default:"",
    func:function(){}
    }}];
    较之前面的 mjColoring 和 mjTransForm,这里每个元素多设了一个 default 属性,用来记载那些刁钻的参数值,程序没有给出相应的处理代码(大家可以自己试着开发),只是显示在界面中以作提示之用。
    另外,如果把:
    var iterator=function(x,y,a,b)
    {
        return mjModels[mdx].func(x,y,a,b);
    }
    改成:
    iterator=mjModels[mdx].func
    程序的运行速度要快一些,画布越大效果越明显。由于加入了三十几个迭代模型,代码量急剧增加,不过,核心代码就那么几十行。
1.jpg
2014-11-8 14:53

2.jpg
2014-11-8 14:53

3.jpg
2014-11-8 14:53

4.jpg
2014-11-8 14:53

5.jpg
2014-11-8 14:53

6.jpg
2014-11-8 14:53

7.jpg
2014-11-8 14:53

8.jpg
2014-11-8 14:53

9.jpg
2014-11-8 14:53

a.jpg
2014-11-8 14:53

htm0401.rar (6.49 KB)

图片附件: 1.jpg (2014-11-8 14:53, 13.6 KB) / 下载次数 1437
http://www.inrm3d.cn/attachment.php?aid=22723&k=bfb2835f3b0d139da051a3aaedd697b7&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-8 14:53, 20.14 KB) / 下载次数 1419
http://www.inrm3d.cn/attachment.php?aid=22724&k=b45edbb482b35a8d18d140d300189a4f&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-8 14:53, 13.26 KB) / 下载次数 1399
http://www.inrm3d.cn/attachment.php?aid=22725&k=3f621565b1aa35de879edf846ed24913&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-8 14:53, 15.85 KB) / 下载次数 1425
http://www.inrm3d.cn/attachment.php?aid=22726&k=5b375ede27ff9f641f21e261311ccd21&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-8 14:53, 15.29 KB) / 下载次数 1432
http://www.inrm3d.cn/attachment.php?aid=22727&k=5db0fce2d8b4ef186203181411eea2ac&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-8 14:53, 30.48 KB) / 下载次数 1414
http://www.inrm3d.cn/attachment.php?aid=22728&k=68e9d7957c9bd3bb4a8b90547d336542&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-8 14:53, 13.46 KB) / 下载次数 1423
http://www.inrm3d.cn/attachment.php?aid=22729&k=6f4cd5abadb4b671bc5f9ba608dd945c&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-8 14:53, 19.83 KB) / 下载次数 1450
http://www.inrm3d.cn/attachment.php?aid=22730&k=7bfdb0da043251c64146d607916640c2&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-8 14:53, 14.36 KB) / 下载次数 1480
http://www.inrm3d.cn/attachment.php?aid=22731&k=1ee58a87cbcd83f5e9a84e05f8b56b63&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-8 14:53, 27.83 KB) / 下载次数 1413
http://www.inrm3d.cn/attachment.php?aid=22732&k=4d24d595cdc62a817b10e53bff12e820&t=1711719378&sid=N37hla



附件: htm0401.rar (2014-11-6 17:44, 6.49 KB) / 下载次数 2901
http://www.inrm3d.cn/attachment.php?aid=22733&k=c39bc989a3d7ce3baceb71257b714af6&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-8 12:27

基于下面的算法,程序给出了六个 newton 迭代模型:
newton: z=z-R[f(z)+c]/f'(z)
   nova: z=z-R[f(z)/f'(z)]+c
    窗体中增加了一个 newton/nova 切换开关 nt 复选框,迭代模型中的实现代码为:
nTa=nT*a,nTb=nT*b
nVa=(1-nT)*a,nVb=(1-nT)*b
    其中:
nT=1 或 0
    也就是:
z=z-R{[f(z)+(nTa,nTb)]/f'(z)}+(nVa,nVb)
     当 R=(1,0) 时,上式便在标准的 newton 和 nova 之间切换。
     就我本人所知道的有关复变分形的知识,程序已接近尾声,在不影响原结构的基础上对程序代码作了较大幅度的调整。
b.jpg
2014-11-8 14:58

c.jpg
2014-11-8 14:58

d.jpg
2014-11-8 14:58

e.jpg
2014-11-8 14:58

f.jpg
2014-11-8 14:58

g.jpg
2014-11-8 14:58

h.jpg
2014-11-8 14:58

i.jpg
2014-11-8 14:58

j.jpg
2014-11-8 14:58

k.jpg
2014-11-8 14:58

htm0402.rar (7.29 KB)

图片附件: b.jpg (2014-11-8 14:58, 13.72 KB) / 下载次数 1444
http://www.inrm3d.cn/attachment.php?aid=22734&k=32ccda4c0c2e1e8b33a8d35639ee5fb2&t=1711719378&sid=N37hla



图片附件: c.jpg (2014-11-8 14:58, 18.02 KB) / 下载次数 1438
http://www.inrm3d.cn/attachment.php?aid=22735&k=bb936e06efa815e79fca0972c5ab9b2f&t=1711719378&sid=N37hla



图片附件: d.jpg (2014-11-8 14:58, 17.19 KB) / 下载次数 1415
http://www.inrm3d.cn/attachment.php?aid=22736&k=9222f3ac0b0f4983603d00e2c5818fa3&t=1711719378&sid=N37hla



图片附件: e.jpg (2014-11-8 14:58, 16.09 KB) / 下载次数 1424
http://www.inrm3d.cn/attachment.php?aid=22737&k=738d1ea243677624c42b30f89883e823&t=1711719378&sid=N37hla



图片附件: f.jpg (2014-11-8 14:58, 14.88 KB) / 下载次数 1427
http://www.inrm3d.cn/attachment.php?aid=22738&k=b7e89eb366d2c200e47f8f58a264292e&t=1711719378&sid=N37hla



图片附件: g.jpg (2014-11-8 14:58, 22.8 KB) / 下载次数 1431
http://www.inrm3d.cn/attachment.php?aid=22739&k=fb5f9cabf96f1ef758e04a9ee7eb2a4e&t=1711719378&sid=N37hla



图片附件: h.jpg (2014-11-8 14:58, 19.46 KB) / 下载次数 1408
http://www.inrm3d.cn/attachment.php?aid=22740&k=9a8789c289142324d46c41124ccb3107&t=1711719378&sid=N37hla



图片附件: i.jpg (2014-11-8 14:58, 17.19 KB) / 下载次数 1433
http://www.inrm3d.cn/attachment.php?aid=22741&k=b0dead1d1ff31300bc66341b08894d3d&t=1711719378&sid=N37hla



图片附件: j.jpg (2014-11-8 14:58, 16.97 KB) / 下载次数 1407
http://www.inrm3d.cn/attachment.php?aid=22742&k=bbc22cc68aa520d3787a2f641abbccc1&t=1711719378&sid=N37hla



图片附件: k.jpg (2014-11-8 14:58, 22.84 KB) / 下载次数 1419
http://www.inrm3d.cn/attachment.php?aid=22743&k=c2c6386f7d4949848a8b050f6b755a56&t=1711719378&sid=N37hla



附件: htm0402.rar (2014-11-8 12:27, 7.29 KB) / 下载次数 2862
http://www.inrm3d.cn/attachment.php?aid=22744&k=c5f4036999d5d5a966fc08fbfc515066&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-8 23:33

如果算法改成:
newton: z=R{z-[f(z)+c]/f'(z)}
   nova: z=R{z-[f(z)/f'(z)]}+c
M 集变得疯狂起来,J 集则更加繁复:
1.jpg
2014-11-13 13:32

2.jpg
2014-11-13 13:32

3.jpg
2014-11-13 13:32

4.jpg
2014-11-13 13:32

5.jpg
2014-11-13 13:32

6.jpg
2014-11-13 13:32

7.jpg
2014-11-13 13:32

8.jpg
2014-11-13 13:32

9.jpg
2014-11-13 13:32

a.jpg
2014-11-13 13:32

接下来就是在程序中增加 julia 粒子模块,代码稍为艰难一点,所以,我们的讨论将暂告一段落,稍停一会,祝大家学习愉快!
htm0403.rar (7.31 KB)

图片附件: 1.jpg (2014-11-13 13:32, 29.95 KB) / 下载次数 1317
http://www.inrm3d.cn/attachment.php?aid=22746&k=e79b8b7ffca584b99d81bca2cb9c6333&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-13 13:32, 23.53 KB) / 下载次数 1306
http://www.inrm3d.cn/attachment.php?aid=22747&k=5db1f04c3656b5ce656f88f5e64f3ede&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-13 13:32, 27.76 KB) / 下载次数 1293
http://www.inrm3d.cn/attachment.php?aid=22748&k=cef08240684686effcd2d84f7fbd9a58&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-13 13:32, 22.89 KB) / 下载次数 1291
http://www.inrm3d.cn/attachment.php?aid=22749&k=9992b58798ab6318ebf51c84e1c45db8&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-13 13:32, 25.8 KB) / 下载次数 1283
http://www.inrm3d.cn/attachment.php?aid=22750&k=45d6b18a5701d73e71ae5f5decb408f2&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-13 13:32, 26.35 KB) / 下载次数 1288
http://www.inrm3d.cn/attachment.php?aid=22751&k=ed655c01407c2c3112b4df55345b53e3&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-13 13:32, 32.68 KB) / 下载次数 1278
http://www.inrm3d.cn/attachment.php?aid=22752&k=4e667a9b80ab78212a8cfd2cd41acb3c&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-13 13:32, 25.45 KB) / 下载次数 1281
http://www.inrm3d.cn/attachment.php?aid=22753&k=4c3391ddee126f65eb42d8f36f2b4655&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-13 13:32, 23.19 KB) / 下载次数 1329
http://www.inrm3d.cn/attachment.php?aid=22754&k=7143c23432b294e749b3813f11ef0ffc&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-13 13:32, 36.14 KB) / 下载次数 1327
http://www.inrm3d.cn/attachment.php?aid=22755&k=ef7fdd9a6288eb61dc0242e57f4e5bc6&t=1711719378&sid=N37hla



附件: htm0403.rar (2014-11-8 23:33, 7.31 KB) / 下载次数 2875
http://www.inrm3d.cn/attachment.php?aid=22756&k=38d1acc7241f0170c46f08287b141ff2&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-13 13:14

前面发过一个题为“逝去的美丽_朱丽娅粒子”的帖子,之所以说是“逝去的美丽”,是因为人们通常是在给定阈值的前提下,欣赏其临界点整个参数平面内 Mandbrot 集和 Julia 集的最终结构,然而,在形成这种最终结构之前,迭代模型的迭代轨迹却被人们忽视,这种迭代轨迹,就像流星的轨迹一样,消失在过去的时光里,如果换个角度去观察它,我们会发现,它是非常绚丽多姿的。
    这里所说的轨迹并非横向的而是纵向的:迭代模型中,e 数组记录下了某一特定点经过迭代而产生的一组数据,这一组数据所表示的轨迹,是为横向轨迹,暂且把它叫做 julia 粒子,而平面内某一路径上所有点的 julia 粒子的集合,我们称之为纵向轨迹,或者说是 julia 粒子系统。(我不懂专业,这里的用辞纯属杜撰,能说明白就好)
    为简单见,特归纳如下:

    Mandbrot 集:c 变 z 不变,扫描二维平面
       Julia 集:z 变 c 不变,扫描二维平面
     Julia 粒子:z,c 同时变,扫描一维路径

    程序中所使用的路径是两点间的线段,如果用曲线路径,代码会更加复杂。
    依上所述,程序在窗体中加入了一个用来输入两点坐标和显示路径的画布 lCanvas,一个用来显示 julia 粒子的画布 pCanvas,以及 Pt(Et倍数)、Lw(线宽)、Ps(路径上的扫描点数)等参数输入框。
    路径参数的输入与 29 楼的万花曲线规相同,至于算法,代码并不复杂,只是多了一个动画效果,相信大家花点时间是不会有什么困难的。
1.jpg
2014-11-13 13:38

2.jpg
2014-11-13 13:38

3.jpg
2014-11-13 13:38

4.jpg
2014-11-13 13:38

5.jpg
2014-11-13 13:38

6.jpg
2014-11-13 13:38

7.jpg
2014-11-13 13:38

8.jpg
2014-11-13 13:38

9.jpg
2014-11-13 13:38

a.jpg
2014-11-13 13:38

    为什么叫“julia 粒子”而不叫“mandbrot 粒子”呢?我们将在接下来的也是最后的一节中讨论“julia 图谱”时再详细说明。
htm0502.rar (8.47 KB)

图片附件: 1.jpg (2014-11-13 13:38, 18.98 KB) / 下载次数 1314
http://www.inrm3d.cn/attachment.php?aid=22760&k=9348350d24013d8bba9ebc7e42e77d31&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-13 13:38, 19.39 KB) / 下载次数 1314
http://www.inrm3d.cn/attachment.php?aid=22761&k=c714abf0cff963d713c66b865c53cd05&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-13 13:38, 19 KB) / 下载次数 1285
http://www.inrm3d.cn/attachment.php?aid=22762&k=1a72afc578fd3380ea0ed2a9b1b8e8a8&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-13 13:38, 18.97 KB) / 下载次数 1305
http://www.inrm3d.cn/attachment.php?aid=22763&k=0cd03a2a7861973553368f24bab9f269&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-13 13:38, 19.49 KB) / 下载次数 1279
http://www.inrm3d.cn/attachment.php?aid=22764&k=df658344b43fca9b148a064902e43b2f&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-13 13:38, 20.59 KB) / 下载次数 1307
http://www.inrm3d.cn/attachment.php?aid=22765&k=96f9aeb9c5cb57717adf36da1b2de2b3&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-13 13:38, 19.93 KB) / 下载次数 1273
http://www.inrm3d.cn/attachment.php?aid=22766&k=a766cf653c72db41c722fe67129ee3ea&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-13 13:38, 19.37 KB) / 下载次数 1273
http://www.inrm3d.cn/attachment.php?aid=22767&k=646964531566e6cedcb741a5981bb647&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-13 13:38, 18.95 KB) / 下载次数 1286
http://www.inrm3d.cn/attachment.php?aid=22768&k=bbec7fe96bc9ca3e4eafea0976d0267e&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-13 13:38, 20.16 KB) / 下载次数 1287
http://www.inrm3d.cn/attachment.php?aid=22769&k=5ac3505055a89e259e008674556cddfd&t=1711719378&sid=N37hla



附件: htm0502.rar (2014-11-13 13:14, 8.47 KB) / 下载次数 2845
http://www.inrm3d.cn/attachment.php?aid=22770&k=b7997a6a545baf41086adb154758af5d&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-14 00:11

很多文章都有讨论 julia 集和 mandbrot 集的关系,如:
    mandbrot 集是 julia 集字典;
    mandbrot 集是 julia 集缩略图;
    mandbrot 集是 julia 集特征集;
    mandbrot 集是宏观布局,julia 集是微观结构;
    基于上术理由,我们就把形成结构前迭代轨迹中的所有点称之为 julia 粒子。
    既然 mandbrot 集中的每一个点都是 julia 集,那么,我们可以这样理解:mandbrot 集是 c 平面的分辨率达到极限时 julia 集的集合,而每一个 julia 集则是在点平面 z 上的扫描图像。程序中,c 平面被映射到 720*480 的画布,被分成 720*480 个点,这时 c 平面的分辨率达到极限,我们看到的每一个 julia 集就是一个点了。
    如果 c 平面的概念分辨率为 10*10,我们反过来将画布映射到 c 平面,那么,画布便被分割成 10*10 个小平面,尽管小,但每个平面包含有 72*48 个像素,比点平面大多了,当然,相应的 julia 集也就能显示其结构了。这样我们便得到了特定分辨率下的 julia 集图谱!
1.jpg
2014-11-14 11:51

2.jpg
2014-11-14 11:51

3.jpg
2014-11-14 11:51

4.jpg
2014-11-14 11:51

5.jpg
2014-11-14 11:51

6.jpg
2014-11-14 11:51

7.jpg
2014-11-14 11:51

8.jpg
2014-11-14 11:51

9.jpg
2014-11-14 11:51

a.jpg
2014-11-14 11:51

好了,程序写到这里,基本的功能模块都有了,由于 html5 还在开发完善中,.hta 格式的应用程序暂时还未能支持 canvas 画布。剩下的就是图像的渲染,如:陷阱、场线、光照、山水……等等,老师们都是高手,我可是江郎才尽了。真心的祝愿各位老师早日开发出自己的分形软件。
htm0503.rar (8.81 KB)

图片附件: 1.jpg (2014-11-14 11:51, 29.57 KB) / 下载次数 1302
http://www.inrm3d.cn/attachment.php?aid=22772&k=497d94486a77535a15a8d51b59a14f4f&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-14 11:51, 31.62 KB) / 下载次数 1311
http://www.inrm3d.cn/attachment.php?aid=22773&k=8eaea415861be6beb2c90a9001d86a94&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-14 11:51, 31.7 KB) / 下载次数 1291
http://www.inrm3d.cn/attachment.php?aid=22774&k=6229a67ee89ced85d43be2f55026c604&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-14 11:51, 30.7 KB) / 下载次数 1356
http://www.inrm3d.cn/attachment.php?aid=22775&k=f7c6bfbd48e1c63714b24d7eba3df441&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-14 11:51, 29.8 KB) / 下载次数 1294
http://www.inrm3d.cn/attachment.php?aid=22776&k=3d9ad1888130b2af7dc62e33886c3829&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-14 11:51, 28.69 KB) / 下载次数 1304
http://www.inrm3d.cn/attachment.php?aid=22777&k=5e4f23a39ff308ab17ecc24898369f6b&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-14 11:51, 29.76 KB) / 下载次数 1321
http://www.inrm3d.cn/attachment.php?aid=22778&k=674655e18c7a3a8b3cf399654b2e26c8&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-14 11:51, 25.67 KB) / 下载次数 1304
http://www.inrm3d.cn/attachment.php?aid=22779&k=b9749308e28067a0a9f598351bc4a744&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-14 11:51, 25.16 KB) / 下载次数 1319
http://www.inrm3d.cn/attachment.php?aid=22780&k=6088a1ee29587b16fb52fb033d691842&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-14 11:51, 21.67 KB) / 下载次数 1308
http://www.inrm3d.cn/attachment.php?aid=22781&k=d2661b41e756daaf9c957209a9f60bb0&t=1711719378&sid=N37hla



附件: htm0503.rar (2014-11-14 00:11, 8.81 KB) / 下载次数 2842
http://www.inrm3d.cn/attachment.php?aid=22782&k=fe95b9d8a884037120c9087939389b43&t=1711719378&sid=N37hla
作者: lnszdzg    时间: 2014-11-14 21:14

xklppp老师:感谢您的精彩!
julia 集图谱的问题我们在
http://tieba.baidu.com/p/3403532327
讨论过,月城已经做得很好了。我也弄了一个,献丑!
捕获201.PNG
2014-11-14 21:14


图片附件: 捕获201.PNG (2014-11-14 21:14, 49.24 KB) / 下载次数 1039
http://www.inrm3d.cn/attachment.php?aid=22784&k=5bbef0fe2363baa3463a46682ad76572&t=1711719378&sid=N37hla


作者: lnszdzg    时间: 2014-11-14 21:16

另外,受您的启发,对于模块化的思路,进行了探索!
http://tieba.baidu.com/p/3394265041
http://tieba.baidu.com/p/3407246514
作者: xklppp    时间: 2014-11-14 23:50

谢谢推荐那么精彩的帖子,拜读了,以杜老师现在的水平,作个分形软件是没问题的。因我对分形知识的了解非常有限,所以,这个帖子只能就编程谈些粗浅的看法,虽不能在软件开发方面作更广和更深的展开,如能给大家带来一星半点的帮助,也就非常满足了。学习是相互的,一齐努力吧!!!
作者: dtt    时间: 2014-11-15 11:41

http://pan.baidu.com/s/1pJI6NOJ

加入本论坛后一直在默默地向诸位老师学习。十分敬佩各位老师的无私奉献和诲人不倦的品德,十分感谢各位老师。
xklppp老师,做人、做事都值得我学习。拿出这样高水平的文章飨后学者,使后来者不至于再在黑暗中摸索,十分感谢。我一定会好好钻研的。
我的画板尚在上不了台面的水平,还不能有像样的东西交流。
现把我随本帖的进展积集的关于本专题的Word2003的doc文件上传,方便学习。算是对本论坛做点有益的事情。同时,以此表达我对xklppp老师和本论坛诸位老师的敬意。
作者: xiaongxp    时间: 2014-11-15 12:30

精彩!深受启发

      感谢分享,要完全吃透,容我慢慢消化。
      得益于xklppp老师在本贴63#的精彩阐述,对http://www.inrm3d.cn/viewthread.php?tid=1386&page=73#pid41923发表的gsp文件进行了关键修改,使功能得到了完善,分享于下:
Julius Ruis Set.jpg
2014-11-15 20:19


图片附件: Julius Ruis Set.jpg (2014-11-15 20:19, 91.32 KB) / 下载次数 1056
http://www.inrm3d.cn/attachment.php?aid=22785&k=27eb59c9ac3cca3fe27e5ca17767b4a2&t=1711719378&sid=N37hla



附件: [1.拖动红三角形框选要放大的J集,并呈现于附窗 2.当“J集密度k”足够大时,可在附窗呈现任意位置的J集 ...] Julius Ruis Set.gsp (2014-11-15 20:19, 26.91 KB) / 下载次数 1723
http://www.inrm3d.cn/attachment.php?aid=22786&k=b28c3963a52dadd3baad614a089554b1&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-15 17:25

老港老师的画板技术已是登峰造极,别说是我们,就是画板的作者,都应该向您致敬!再次谢谢老师们对本贴的支持!!!
    从上面的讨论可以看出:就 julia 集和 mandbrot 集的关系来说,mandbrot 集承载的是宏观体系,而 julia 集则蕴涵的是微观结构,这就好像现实世界的整个宇宙天体和物质粒子一样,所以,当我们在缩放 mandbrot 集时,实际上是用天文望远镜或宇宙飞船在观察广袤的宏观宇宙,而缩放 julia 集就好像是用电子显微镜或纳米机器人在探索深邃的微观粒子。
    然而,大家知道,宇宙中是存在着黑洞的。对于 mandbrot 集来说,如果是在标准的 c 平面上,虽然多有黑黑的大块,也还不至于有什么特别的感觉,但是,c 平面一经扭曲变形,情形就不同了。比方说:1/c 平面,所有的图像都被黑色包围。如果宇宙中的某个黑洞也这样翻转过来,不知道是个什么样的场景,应该是很恐怖的。
    于是,我们在常规的迭代模型中加入一个类似于 newton 迭代算法中的收敛性监察代码,当迭代轨迹中的前后两点的变化小于给定的阈值,则停止迭代,使得那些令人迷茫的黑洞变得光亮起来:
1.jpg
2014-11-15 19:54

2.jpg
2014-11-15 19:54

3.jpg
2014-11-15 19:54

4.jpg
2014-11-15 19:54

5.jpg
2014-11-15 19:54

6.jpg
2014-11-15 19:54

7.jpg
2014-11-15 19:54

8.jpg
2014-11-15 19:54

9.jpg
2014-11-15 19:54

a.jpg
2014-11-15 19:54

htm0504.rar (9.16 KB)

图片附件: 1.jpg (2014-11-15 19:54, 15.07 KB) / 下载次数 1290
http://www.inrm3d.cn/attachment.php?aid=22787&k=009c5cc12c1119f35241af4c59dcf1dd&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-15 19:54, 20.53 KB) / 下载次数 1310
http://www.inrm3d.cn/attachment.php?aid=22788&k=96f23cee2a27fa70b3545a35cf3b7cdf&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-15 19:54, 22.38 KB) / 下载次数 1307
http://www.inrm3d.cn/attachment.php?aid=22789&k=e4365dd248c061f656ec44b90c7ed12b&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-15 19:54, 22.37 KB) / 下载次数 1295
http://www.inrm3d.cn/attachment.php?aid=22790&k=d7c106aa421459bd75350dc9c72d5888&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-15 19:54, 18.42 KB) / 下载次数 1342
http://www.inrm3d.cn/attachment.php?aid=22791&k=12c63b082d244480ddc11f612ed13c65&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-15 19:54, 27.24 KB) / 下载次数 1346
http://www.inrm3d.cn/attachment.php?aid=22792&k=4cfed606781c8358f27a9823f005fbf1&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-15 19:54, 23.32 KB) / 下载次数 1274
http://www.inrm3d.cn/attachment.php?aid=22793&k=bf61f576a83ef376681653662221024b&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-15 19:54, 14.29 KB) / 下载次数 1326
http://www.inrm3d.cn/attachment.php?aid=22794&k=c3883aad31e09e2af4bc3e593b8777ce&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-15 19:54, 13.32 KB) / 下载次数 1307
http://www.inrm3d.cn/attachment.php?aid=22795&k=796d1b5daaf285c81b98d85f6aa6c6ce&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-15 19:54, 15.06 KB) / 下载次数 1293
http://www.inrm3d.cn/attachment.php?aid=22796&k=94c2b7c5d297dacb1ea947bf8f2ffd4a&t=1711719378&sid=N37hla



附件: htm0504.rar (2014-11-15 17:25, 9.16 KB) / 下载次数 2957
http://www.inrm3d.cn/attachment.php?aid=22797&k=d52a181b9b8e129e247b0670e91d500c&t=1711719378&sid=N37hla
作者: lnszdzg    时间: 2014-11-15 21:03

69# xklppp

收获不小啊!
向老师也来了,希望肖老师继续,一定会有更大的成果的!
作者: lnszdzg    时间: 2014-11-15 21:06

68# xiaongxp

向老师,好久不见了哈
作者: xklppp    时间: 2014-11-15 21:41

70# lnszdzg


    多谢鼓励,老师们的垂青令我汗颜,特别是月城老师,真是个有心人,不胜惶恐。程序写到 julia 图谱,我真的是黔驴技穷了。
    下午在网上看到老外的两个分形:
    lemon:cz^2(z^2+1)/(z^2-1)^2.....http://paulbourke.net/fractals/lemon/
    Guitar:(z^2+z)/(2z^2+c)..........http://paulbourke.net/fractals/guitar/
    摸索了半天,才意识到了 mandbrot 集里面的“黑洞”问题。
作者: xiaongxp    时间: 2014-11-15 23:23

71# lnszdzg
杜老师好。其实我天天都在关注本贴的进展和您及月城在MC贴吧的讨论,只不过我常用手机上网学习而已,每天登录画板论坛和MC吧已成为我的生活习惯。您们的精彩努力常常让我心动,让我不止一次地开始动手学习javascript和MC,可是刚一下手又望而却步了,不知为什么我的大脑总是那么排斥新知,学不进去。不得不承认,自己的思维老化了,人也懒惰起来了。不过在此当个看官,静静地欣赏大家的聪明才智,也是相当过瘾的。
作者: 柳烟    时间: 2014-11-16 00:19

我和向老师差不多,新东西不太装得进去了,佩服二位老师的钻研精神与精湛技术,将分形不断推向高峰。学习了,问好各位。
作者: lnszdzg    时间: 2014-11-16 22:26

向老师、柳老师:
其实MC学起来比较容易,它的语法很像UF,我想二位老师如果学的话应该比较快。
最近一直关注xklppp老师的文章,虽然javascript学起来很难(我的感觉哈),但是xklppp老师的思想和方法却使我受益匪浅啊!
作者: xiaongxp    时间: 2014-11-17 18:47

用仿射变换在正十二面体的各面贴上不同的J集
正十二面体与J集.jpg
2014-11-17 18:49

正十二面体与J集.gsp (28.03 KB)

图片附件: 正十二面体与J集.jpg (2014-11-17 18:49, 29.34 KB) / 下载次数 1355
http://www.inrm3d.cn/attachment.php?aid=22801&k=f3ab3e49f6963382fdb8d141f408ec09&t=1711719378&sid=N37hla



附件: 正十二面体与J集.gsp (2014-11-17 18:47, 28.03 KB) / 下载次数 2271
http://www.inrm3d.cn/attachment.php?aid=22802&k=45691fbb2d58ebd08468b89c9fedd5aa&t=1711719378&sid=N37hla
作者: xiaongxp    时间: 2014-11-17 22:28

正十二面体与M&J集.jpg
2014-11-17 22:28

正十二面体与M&J集.gsp (28.14 KB)

图片附件: 正十二面体与M&J集.jpg (2014-11-17 22:28, 29.28 KB) / 下载次数 1334
http://www.inrm3d.cn/attachment.php?aid=22803&k=df53c48619a9bb453b4d8330f0a0483d&t=1711719378&sid=N37hla



附件: 正十二面体与M&J集.gsp (2014-11-17 22:28, 28.14 KB) / 下载次数 2385
http://www.inrm3d.cn/attachment.php?aid=22804&k=f6951d6bdceab363771e7b3b5f994a8f&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-19 22:40

复变分形的着色算法对于我来说是个新的课题,前面的程序虽给出了一些代码,是因为编程的需要,都不成熟,甚至有点乱,老师们的那些高端算法,我暂时还不能企及,只能从最基本的开始学习,考虑到还有很多和我一样的初学者,所以,在学习过程中,一有心得,便与大家交流,还望各位老师不吝赐教!
    下面是“逃逸角度”着色算法:(不知道专业上怎么说,只能杜撰了)
    func:function(e)
    {
        var et=e.length-1,ex=e[et].x,ey=e[et].y;
        var co=color[fc].concat(255);
        if(et%eT)
        {
            var sa=sqrt(abs(arct(ey,ex)/pi));
            var ca=sqrt(abs(arct(ex,ey)/pi));
            co[0]=255*sin(sa);            //r 通道
            co[1]=255*sin(ca);            //g 通道
            co[2]=255*sin(sa)*sin(ca);    //b 通道
            co[3]=255*sqrt(et/eT);    //逃逸时间映射 alpha 通道
        }
        return co;
    }
    改变 r、g、b 三个通道的函数模型便得到很多的着色效果:
1.jpg
2014-11-19 23:12

2.jpg
2014-11-19 23:12

3.jpg
2014-11-19 23:12

4.jpg
2014-11-19 23:12

5.jpg
2014-11-19 23:12

6.jpg
2014-11-19 23:12

7.jpg
2014-11-19 23:12

8.jpg
2014-11-19 23:12

9.jpg
2014-11-19 23:12

a.jpg
2014-11-19 23:12


图片附件: 1.jpg (2014-11-19 23:12, 11.66 KB) / 下载次数 1694
http://www.inrm3d.cn/attachment.php?aid=22808&k=877013ffaef56a42e1677427dd7bc7ed&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-19 23:12, 12.29 KB) / 下载次数 1691
http://www.inrm3d.cn/attachment.php?aid=22809&k=f139e82f39bcf6eccf41b1aec02b9883&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-19 23:12, 10.04 KB) / 下载次数 1682
http://www.inrm3d.cn/attachment.php?aid=22810&k=831a4ac0e47a69a57db4d386e96e280c&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-19 23:12, 9.79 KB) / 下载次数 1667
http://www.inrm3d.cn/attachment.php?aid=22811&k=db4ef4443a6fb24150e55738d2aa337a&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-19 23:12, 12 KB) / 下载次数 1703
http://www.inrm3d.cn/attachment.php?aid=22812&k=af343a2d069792d9223c07935ac318f4&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-19 23:12, 11.91 KB) / 下载次数 1722
http://www.inrm3d.cn/attachment.php?aid=22813&k=521abdd898eec273c2460b8c40557f96&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-19 23:12, 9.78 KB) / 下载次数 1692
http://www.inrm3d.cn/attachment.php?aid=22814&k=a8be7464487c5504890f6797283d66e4&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-19 23:12, 9.86 KB) / 下载次数 1724
http://www.inrm3d.cn/attachment.php?aid=22815&k=e5044d9488babf7345c3535c0161b3f5&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-19 23:12, 10.51 KB) / 下载次数 1689
http://www.inrm3d.cn/attachment.php?aid=22816&k=88e4fc1798ce5410d7b23c765428e70c&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-19 23:12, 10.75 KB) / 下载次数 1667
http://www.inrm3d.cn/attachment.php?aid=22817&k=7be4c10ad749096156f8b91ba4e373ea&t=1711719378&sid=N37hla


作者: xiaongxp    时间: 2014-11-19 23:25

复变分形的着色算法对于我来说是个新的课题,前面的程序虽给出了一些代码,是因为编程的需要,都不成熟,甚至有点乱,老师们的那些高端算法,我暂时还不能企及,必须从最基本的开始学习,考虑到还有很多和我一样的初 ...
xklppp 发表于 2014-11-19 22:40
此文曾使我很受益,xklppp老师去访访吧:
http://blog.csdn.net/housisong/article/details/6159317
作者: xklppp    时间: 2014-11-19 23:30

79# xiaongxp
谢了!!!
作者: xklppp    时间: 2014-11-23 16:25

尽管这里的着色算法很幼稚,但从编程的角度来看,对于初学者而言,却是有着很多的问题需要思考:
    1.复分形的着色可以从逃逸时间、逃逸方向、逃逸距离等几方面来考虑。
    2.最简单的可以使用指定的调色板或三角函数来描述色彩的变化。
    3.可以使用插值的方法(例如:势函数 potential function)来平滑较大的色差。
    4.可以考虑内部着不着色。
    如是,我们把前面的着色模块整合成 5 个,并在窗体中增加相应的参数控制,这样,可以产生很多的着色效果:
1.jpg
2014-11-23 16:52

2.jpg
2014-11-23 16:52

3.jpg
2014-11-23 16:52

4.jpg
2014-11-23 16:52

5.jpg
2014-11-23 16:52

6.jpg
2014-11-23 16:52

7.jpg
2014-11-23 16:52

8.jpg
2014-11-23 16:52

9.jpg
2014-11-23 16:52

a.jpg
2014-11-23 16:52

html0602.rar (9.37 KB)

图片附件: 1.jpg (2014-11-23 16:52, 17.45 KB) / 下载次数 3141
http://www.inrm3d.cn/attachment.php?aid=22826&k=019b41a8c3d25e79206e749194233909&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-23 16:52, 16.1 KB) / 下载次数 3105
http://www.inrm3d.cn/attachment.php?aid=22827&k=0a4da4fb7e2ceb8c83aee7fb5bdeb052&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-23 16:52, 18.42 KB) / 下载次数 3152
http://www.inrm3d.cn/attachment.php?aid=22828&k=3f73cbd7180ba6dd2e731cfa525d9bfd&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-23 16:52, 18.55 KB) / 下载次数 3126
http://www.inrm3d.cn/attachment.php?aid=22829&k=f8ad8fd1f0394953d0b021ded44bc9f9&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-23 16:52, 14.62 KB) / 下载次数 3157
http://www.inrm3d.cn/attachment.php?aid=22830&k=c421af622db2c672db88e8d6b4441f75&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-23 16:52, 18.67 KB) / 下载次数 3131
http://www.inrm3d.cn/attachment.php?aid=22831&k=a4740768ce105a497c5f1a7e2fc02799&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-11-23 16:52, 18.52 KB) / 下载次数 3135
http://www.inrm3d.cn/attachment.php?aid=22832&k=4d3ea041f4a3d7a1070190952cfa7e12&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-11-23 16:52, 18.71 KB) / 下载次数 3098
http://www.inrm3d.cn/attachment.php?aid=22833&k=48bb121a07d7ae089e8571291808e7bb&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-11-23 16:52, 19.21 KB) / 下载次数 3144
http://www.inrm3d.cn/attachment.php?aid=22834&k=d35263c862022a7ddb1df6b408bf9ad9&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-11-23 16:52, 18.42 KB) / 下载次数 3119
http://www.inrm3d.cn/attachment.php?aid=22835&k=59cb71a4609bdc64ac4eb534c95a66cb&t=1711719378&sid=N37hla



附件: html0602.rar (2014-11-23 16:25, 9.37 KB) / 下载次数 4870
http://www.inrm3d.cn/attachment.php?aid=22836&k=8c8f112df003da6a9b6a906626803baa&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-26 00:01

轨迹陷阱虽然在一定程度上模糊了迭代模型的微观结构,但这种渲染手法产生的视觉效果颇具审美价值。接下来便试着跟各位老师学习,下面是学着杜老师的
http://tieba.baidu.com/p/3421300726
因暂时还吃不透,所以,算法的解析度较高,代码还不便于一般化,窗体的控制面板有点乱。请老师们指正:
1.jpg
2014-11-26 08:26

2.jpg
2014-11-26 08:26

3.jpg
2014-11-26 08:26

4.jpg
2014-11-26 08:26

5.jpg
2014-11-26 08:26

6.jpg
2014-11-26 08:26

html0603.rar (9.65 KB)

图片附件: 1.jpg (2014-11-26 08:26, 15.25 KB) / 下载次数 3118
http://www.inrm3d.cn/attachment.php?aid=22844&k=3450933eeddb7567e2099215a5c6a2e6&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-26 08:26, 23.22 KB) / 下载次数 3206
http://www.inrm3d.cn/attachment.php?aid=22845&k=43580e793636b2cef219737f161d1a1e&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-26 08:26, 22.2 KB) / 下载次数 3130
http://www.inrm3d.cn/attachment.php?aid=22846&k=4b98abd37c148d4bc76ed226347013f7&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-26 08:26, 24.24 KB) / 下载次数 3160
http://www.inrm3d.cn/attachment.php?aid=22847&k=1d0a885c1f0df22efd0894f49abd6f9a&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-11-26 08:26, 30.22 KB) / 下载次数 3142
http://www.inrm3d.cn/attachment.php?aid=22852&k=c31c61752d6ba249061a61be48945024&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-11-26 08:26, 29.42 KB) / 下载次数 3124
http://www.inrm3d.cn/attachment.php?aid=22853&k=cf92e43bc4be44523a16faae6cd1a893&t=1711719378&sid=N37hla



附件: html0603.rar (2014-11-26 01:26, 9.65 KB) / 下载次数 5166
http://www.inrm3d.cn/attachment.php?aid=22854&k=e3838775ff0f369c0692ae587eb70981&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-11-26 09:32

如果从上到下只扫描复平面的一半,将图像反射到另一半,加上一张合适的背景,便可制作倒影了,但由于这种轨迹陷阱的渲染色彩缺少质感,所以效果不太好。不过,这却给我们提供了一个方向,如果能有较好的材质算法,当能制作出相当不错的渲染图。
1.jpg
2014-11-26 11:34

2.jpg
2014-11-26 11:34

3.jpg
2014-11-26 11:34

4.jpg
2014-11-26 11:34

html0604.rar (9.73 KB)

图片附件: 1.jpg (2014-11-26 11:34, 14.82 KB) / 下载次数 3131
http://www.inrm3d.cn/attachment.php?aid=22855&k=f31e2da4901d44486f6714abedbf5336&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-11-26 11:34, 18.36 KB) / 下载次数 3154
http://www.inrm3d.cn/attachment.php?aid=22856&k=ddd18675d96cbcda9e8f74ebc58ee314&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-11-26 11:34, 21.34 KB) / 下载次数 3106
http://www.inrm3d.cn/attachment.php?aid=22857&k=a08f46a306de81d26f64ef95c8f87c21&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-11-26 11:34, 20.13 KB) / 下载次数 3109
http://www.inrm3d.cn/attachment.php?aid=22858&k=f4117c6bb6285c673625fc1340fbc6cf&t=1711719378&sid=N37hla



附件: html0604.rar (2014-11-26 09:32, 9.73 KB) / 下载次数 5039
http://www.inrm3d.cn/attachment.php?aid=22859&k=1baabd55a1f2348b608e5c34f4ab606f&t=1711719378&sid=N37hla
作者: inRm    时间: 2014-11-26 11:35

衬一幅图片反而难看了
作者: xklppp    时间: 2014-11-26 12:27

84# inRm
是啊!作法还不成熟,谢谢!!!
作者: lnszdzg    时间: 2014-11-26 16:21

捕获203.PNG
2014-11-26 16:21


图片附件: 捕获203.PNG (2014-11-26 16:21, 25.23 KB) / 下载次数 2908
http://www.inrm3d.cn/attachment.php?aid=22861&k=ec31c05875ae48b0b43b8fe43ed72d2c&t=1711719378&sid=N37hla


作者: lnszdzg    时间: 2014-11-26 16:24

xklppp老师:感谢您精彩的文章。
对于陷阱,我也是跟着论坛中的老师学的,原理我还讲不好,这个是Mathcad中的一个陷阱模块,您看看,也许有用。
作者: lnszdzg    时间: 2014-11-26 16:28

捕获204.PNG
2014-11-26 16:28


图片附件: 捕获204.PNG (2014-11-26 16:28, 40.78 KB) / 下载次数 2870
http://www.inrm3d.cn/attachment.php?aid=22862&k=4ca0ad33442c9039fe279ad76e06de23&t=1711719378&sid=N37hla


作者: lnszdzg    时间: 2014-11-26 16:33

无标题205.png
2014-11-26 16:33

这是绘图模块
http://tieba.baidu.com/p/3407246514

图片附件: 无标题205.png (2014-11-26 16:33, 80.67 KB) / 下载次数 3199
http://www.inrm3d.cn/attachment.php?aid=22863&k=754cc5d318a12177ea621860c2602a84&t=1711719378&sid=N37hla


作者: xklppp    时间: 2014-11-26 16:36

88# lnszdzg
太感谢了,但愿能成,谢谢杜老师!!!
作者: lnszdzg    时间: 2014-11-26 16:42

http://tieba.baidu.com/p/3018062730?pn=4
作者: xklppp    时间: 2014-11-26 17:03

91# lnszdzg
太利害了,现在哪敢想那么远啊,我得慢慢来,很庆幸认识各位老师,谢谢!!!
作者: xklppp    时间: 2014-11-30 01:17

想弄玉石效果,但还没找到解决方案。
1.jpg
2014-12-2 15:51

2.jpg
2014-12-2 15:51

3.jpg
2014-12-2 15:51

4.jpg
2014-12-2 15:51


图片附件: 1.jpg (2014-12-2 15:51, 54.88 KB) / 下载次数 1560
http://www.inrm3d.cn/attachment.php?aid=22873&k=af79f5b5c32c840cbb1dee618935abaf&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-12-2 15:51, 53.47 KB) / 下载次数 1530
http://www.inrm3d.cn/attachment.php?aid=22874&k=94af71270dbeb03f9d9098ff53aa9ad4&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-12-2 15:51, 58.27 KB) / 下载次数 1545
http://www.inrm3d.cn/attachment.php?aid=22875&k=2bdff6f2e830c1a96153d9f401e30577&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-12-2 15:51, 53.68 KB) / 下载次数 1542
http://www.inrm3d.cn/attachment.php?aid=22876&k=db38a96b1e174b24b430c813869db9e3&t=1711719378&sid=N37hla


作者: changxde    时间: 2014-12-1 08:33

还是JS功能强大,上面第三幅图画板是不敢想的,但HTML应该是很简单的。
作者: xklppp    时间: 2014-12-1 23:51

谢谢杜老师!杜老师在86楼给出了10个简单陷阱的算法和数据,我们直接将其移植到程序中,如是,代码中便可以增加一个陷阱模块,相应的着色模块中根据各自的喜好可以加入不同的着色算法。程序写到现在,窗体中的参数面板已是拥挤不堪,再往下走的话,需要重新设计。对于陷阱,我现在还没有概念,所以,这里只给出了四个:
5.jpg
2014-12-2 15:55

6.jpg
2014-12-2 15:55

7.jpg
2014-12-2 15:55

8.jpg
2014-12-2 15:55

9.jpg
2014-12-2 15:55

a.jpg
2014-12-2 15:55

b.jpg
2014-12-2 15:55

c.jpg
2014-12-2 15:55

d.jpg
2014-12-2 15:55

e.jpg
2014-12-2 15:55

html0606.rar (10.08 KB)

图片附件: 5.jpg (2014-12-2 15:55, 19.66 KB) / 下载次数 1407
http://www.inrm3d.cn/attachment.php?aid=22887&k=adaf58ac7359de6143c1d419f3c7a0b0&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-12-2 15:55, 23.07 KB) / 下载次数 1405
http://www.inrm3d.cn/attachment.php?aid=22888&k=8e54d31ad183db1aa69453de9cb51e12&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-12-2 15:55, 24.1 KB) / 下载次数 1411
http://www.inrm3d.cn/attachment.php?aid=22889&k=70e709558a0e5bb99c3fae5580c6bfd6&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-12-2 15:55, 22.85 KB) / 下载次数 1410
http://www.inrm3d.cn/attachment.php?aid=22890&k=a6ec1d6b8f5034b5d493cf480dc6e249&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-12-2 15:55, 24.23 KB) / 下载次数 66
http://www.inrm3d.cn/attachment.php?aid=22891&k=f991298552a1ef875130ff517955de39&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-12-2 15:55, 24.32 KB) / 下载次数 1420
http://www.inrm3d.cn/attachment.php?aid=22892&k=0021356e905b2af698cd1e92f8edf33a&t=1711719378&sid=N37hla



图片附件: b.jpg (2014-12-2 15:55, 22.29 KB) / 下载次数 1415
http://www.inrm3d.cn/attachment.php?aid=22893&k=137b2212b4ea37877faa21cc1f02544d&t=1711719378&sid=N37hla



图片附件: c.jpg (2014-12-2 15:55, 21.98 KB) / 下载次数 1405
http://www.inrm3d.cn/attachment.php?aid=22894&k=64db9bd194566d96251f24691ec13d35&t=1711719378&sid=N37hla



图片附件: d.jpg (2014-12-2 15:55, 24.23 KB) / 下载次数 1387
http://www.inrm3d.cn/attachment.php?aid=22895&k=bbe2aab5b058d3721b15be13bc8e7af0&t=1711719378&sid=N37hla



图片附件: e.jpg (2014-12-2 15:55, 26.44 KB) / 下载次数 1404
http://www.inrm3d.cn/attachment.php?aid=22896&k=280d77b83bb209c547e0d6eaecb61453&t=1711719378&sid=N37hla



附件: html0606.rar (2014-12-2 01:26, 10.08 KB) / 下载次数 2936
http://www.inrm3d.cn/attachment.php?aid=22899&k=7c0e0b2598ee2d8fd1be61d5ca4bb251&t=1711719378&sid=N37hla
作者: xiaongxp    时间: 2014-12-2 00:27

95# xklppp
陷阱颜色过渡如此圆润,背景色与陷阱色又如此泾渭分明,几何画板是难以作到的。为肖老师取得的成就喝彩!
作者: xklppp    时间: 2014-12-2 10:40

96# xiaongxp
过奖了,谢谢老港老师,我只是把杜老师的代码移植成 javascript ,html 的所有对象都有个 alpha 通道,着色空间也就大了许多。html 中的 canvas 画布真正的精彩应用是作动画,特别是 3D 动画,那些算法吓死人,没有数理功底简直就不敢想。
复分形的陷阱技术能产生一定程度的 3D 效果,如果能加上光照渲染和材质贴图,那就更好了,老师们的画板作品中就有贴图效果,用算法语言描述恐怕不是件容易的事情。
作者: xklppp    时间: 2014-12-3 09:43

1.jpg
2014-12-3 18:48

2.jpg
2014-12-3 18:48

3.jpg
2014-12-3 18:48

4.jpg
2014-12-3 18:48

5.jpg
2014-12-3 18:48

6.jpg
2014-12-3 18:48

7.jpg
2014-12-3 18:48

8.jpg
2014-12-3 18:48

9.jpg
2014-12-3 18:48

a.jpg
2014-12-3 18:48


图片附件: 1.jpg (2014-12-3 18:48, 14.58 KB) / 下载次数 1276
http://www.inrm3d.cn/attachment.php?aid=22900&k=c23cb328cfe11896ea38bc30b6d56a87&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-12-3 18:48, 14.95 KB) / 下载次数 1315
http://www.inrm3d.cn/attachment.php?aid=22901&k=61e167b2a1b57a59dd4a99d527722c75&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-12-3 18:48, 19.39 KB) / 下载次数 1244
http://www.inrm3d.cn/attachment.php?aid=22902&k=31b1d2b418f872d0d3580e7459aba028&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-12-3 18:48, 19.9 KB) / 下载次数 1262
http://www.inrm3d.cn/attachment.php?aid=22903&k=ecaa3dc615015ff024d5de72fba2f1c0&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-12-3 18:48, 21.87 KB) / 下载次数 1270
http://www.inrm3d.cn/attachment.php?aid=22904&k=59aba7d0bae13cc6a5c29722dba1c6ae&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-12-3 18:48, 31.94 KB) / 下载次数 1283
http://www.inrm3d.cn/attachment.php?aid=22905&k=b1fb0e0eb32898f28730dc087dcc2e12&t=1711719378&sid=N37hla



图片附件: 7.jpg (2014-12-3 18:48, 27.15 KB) / 下载次数 1259
http://www.inrm3d.cn/attachment.php?aid=22906&k=b1a4cb0503fd183a61fb5b93af655629&t=1711719378&sid=N37hla



图片附件: 8.jpg (2014-12-3 18:48, 31.03 KB) / 下载次数 1283
http://www.inrm3d.cn/attachment.php?aid=22907&k=a6dca590aa5f89067c68209067b55813&t=1711719378&sid=N37hla



图片附件: 9.jpg (2014-12-3 18:48, 35.54 KB) / 下载次数 1258
http://www.inrm3d.cn/attachment.php?aid=22908&k=1967ba9e7f6a52640700890d484e3f1d&t=1711719378&sid=N37hla



图片附件: a.jpg (2014-12-3 18:48, 35.94 KB) / 下载次数 1301
http://www.inrm3d.cn/attachment.php?aid=22909&k=74a623b8e45bd642375ec218228b731f&t=1711719378&sid=N37hla


作者: xklppp    时间: 2014-12-3 20:21

前面程序中有两处算法错误,纠正后并在陷阱模块中加入了几条曲线。
下面的曲线为:r=|t/4|-k.......t(幅角)、k(形状大小)
1.jpg
2014-12-4 10:05

2.jpg
2014-12-4 10:05

3.jpg
2014-12-4 10:05

4.jpg
2014-12-4 10:05

5.jpg
2014-12-4 10:05

6.jpg
2014-12-4 10:05

html0608.rar (10.25 KB)

图片附件: 1.jpg (2014-12-4 10:05, 6.45 KB) / 下载次数 1259
http://www.inrm3d.cn/attachment.php?aid=22911&k=654fa020991d35f18bfe274330c7dc08&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-12-4 10:05, 13.96 KB) / 下载次数 1267
http://www.inrm3d.cn/attachment.php?aid=22912&k=dd9f3dc4368ac10956a3200047c0a04b&t=1711719378&sid=N37hla



图片附件: 3.jpg (2014-12-4 10:05, 15.85 KB) / 下载次数 1270
http://www.inrm3d.cn/attachment.php?aid=22913&k=210e2a5fad4e4bc89f3f85ddd8b2d5f7&t=1711719378&sid=N37hla



图片附件: 4.jpg (2014-12-4 10:05, 24.32 KB) / 下载次数 1286
http://www.inrm3d.cn/attachment.php?aid=22914&k=3506ae713412127aa8fb41c60883d032&t=1711719378&sid=N37hla



图片附件: 5.jpg (2014-12-4 10:05, 27.22 KB) / 下载次数 1266
http://www.inrm3d.cn/attachment.php?aid=22915&k=9bc7e764b98189e27b87e9b97e6ba0c4&t=1711719378&sid=N37hla



图片附件: 6.jpg (2014-12-4 10:05, 31.1 KB) / 下载次数 1294
http://www.inrm3d.cn/attachment.php?aid=22916&k=a32de2c5c12ca744f4a25bd934706494&t=1711719378&sid=N37hla



附件: html0608.rar (2014-12-3 20:21, 10.25 KB) / 下载次数 3010
http://www.inrm3d.cn/attachment.php?aid=22917&k=7cd9c247d39171e021a6c0ffc7028a4d&t=1711719378&sid=N37hla
作者: xklppp    时间: 2014-12-4 11:29

作花边图案蛮好的:
r=k*ln(|Zr|+|Zi|)
1.jpg
2014-12-4 21:55

r=k*ln|z|
2.jpg
2014-12-4 21:55


图片附件: 1.jpg (2014-12-4 21:55, 13.95 KB) / 下载次数 1263
http://www.inrm3d.cn/attachment.php?aid=22918&k=55b7d642fa847cf654c8ecb3dc5d08d6&t=1711719378&sid=N37hla



图片附件: 2.jpg (2014-12-4 21:55, 15.96 KB) / 下载次数 1270
http://www.inrm3d.cn/attachment.php?aid=22919&k=419b8b2470e5e72f23decdfd2d36b49b&t=1711719378&sid=N37hla






欢迎光临 inRm3D: 画板论坛 (http://www.inrm3d.cn/) Powered by Discuz! 7.0.0