inRm3D: 画板论坛 - Powered by Discuz! Board

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

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

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

htm0000.rar (481 Bytes)

图片附件: New.gif (2014-10-14 19:14, 12.25 KB) / 下载次数 3335
http://forums.netpad.net.cn/attachment.php?aid=22555&k=d71c71120cdc5e8a15965030fe8d332b&t=1779819936&sid=ySMBYv

附件: htm0000.rar (2014-10-14 13:06, 481 Bytes) / 下载次数 4814
http://forums.netpad.net.cn/attachment.php?aid=22556&k=23b3f8fb3b9bb162281285a455b59ff3&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-10-14 13:59

htm0001.rar (938 Bytes)

图片附件: New.gif (2014-10-14 19:15, 22.27 KB) / 下载次数 3399
http://forums.netpad.net.cn/attachment.php?aid=22559&k=c8a5d69dbad49f69c03bb7c3f787c8b5&t=1779819936&sid=ySMBYv

附件: htm0001.rar (2014-10-14 14:05, 938 Bytes) / 下载次数 4656
http://forums.netpad.net.cn/attachment.php?aid=22560&k=9e422c264ccf598cde8d6acd4314145b&t=1779819936&sid=ySMBYv

作者: mjj_ljh 时间: 2014-10-14 16:54

我的脑细胞已经萎缩了。根本就跟不上大家的节奏，试着跟xklppp老师从头来一次。

作者: xklppp 时间: 2014-10-14 18:04

htm0002.rar (888 Bytes)

图片附件: New.gif (2014-10-14 19:16, 33.13 KB) / 下载次数 3459
http://forums.netpad.net.cn/attachment.php?aid=22563&k=7943d3956a5a804103342370da166203&t=1779819936&sid=ySMBYv

附件: htm0002.rar (2014-10-14 18:04, 888 Bytes) / 下载次数 4887
http://forums.netpad.net.cn/attachment.php?aid=22564&k=91ecc94a13ceb830c1fe7c63ac9810e6&t=1779819936&sid=ySMBYv

作者: 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

htm0003.rar (756 Bytes)

附件: htm0003.rar (2014-10-14 22:14, 756 Bytes) / 下载次数 4749
http://forums.netpad.net.cn/attachment.php?aid=22566&k=362320ba5fa59e6e22ca573d7d850e9f&t=1779819936&sid=ySMBYv

图片附件: New.gif (2014-10-16 09:14, 16.23 KB) / 下载次数 3446
http://forums.netpad.net.cn/attachment.php?aid=22568&k=3e75d96442eb4c87e3d5bba301e7fc63&t=1779819936&sid=ySMBYv

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

htm0004.rar (1016 Bytes)

图片附件: New.gif (2014-10-16 09:17, 16.02 KB) / 下载次数 3429
http://forums.netpad.net.cn/attachment.php?aid=22569&k=ac7b5e46abcb98c383e98c8f7adad93e&t=1779819936&sid=ySMBYv

附件: htm0004.rar (2014-10-15 00:01, 1016 Bytes) / 下载次数 4656
http://forums.netpad.net.cn/attachment.php?aid=22570&k=59a2dffdc321009243bb3ff8de2a4af2&t=1779819936&sid=ySMBYv

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

代码没有任何问题，思维惯性却让我们诧异：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) / 下载次数 3407
http://forums.netpad.net.cn/attachment.php?aid=22571&k=c7fb24366e42695e5a426d1fc0510e2a&t=1779819936&sid=ySMBYv

附件: htm0005.rar (2014-10-15 01:29, 462 Bytes) / 下载次数 4720
http://forums.netpad.net.cn/attachment.php?aid=22572&k=a43b374c725dd64c9cb36e0802f0bfa2&t=1779819936&sid=ySMBYv

作者: 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) / 下载次数 3056
http://forums.netpad.net.cn/attachment.php?aid=22573&k=3315cc8d7c13e684c074865646309e78&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-10-15 22:30

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) / 下载次数 1786
http://forums.netpad.net.cn/attachment.php?aid=22577&k=16245eb6bd0bf1c760e7b029b5678c37&t=1779819936&sid=ySMBYv

附件: htm0007.rar (2014-10-15 22:30, 570 Bytes) / 下载次数 3050
http://forums.netpad.net.cn/attachment.php?aid=22578&k=a3ec9d1d32ae5ece77d4be9a1f33f6e3&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-10-16 19:07

就 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) / 下载次数 1800
http://forums.netpad.net.cn/attachment.php?aid=22581&k=bf30ea6c5ada0d1678e6a8a7288da3ab&t=1779819936&sid=ySMBYv

附件: htm0008.rar (2014-10-16 19:07, 638 Bytes) / 下载次数 3106
http://forums.netpad.net.cn/attachment.php?aid=22582&k=149b7af0c53145f510a7768a08fc55d8&t=1779819936&sid=ySMBYv

作者: 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) / 下载次数 3138
http://forums.netpad.net.cn/attachment.php?aid=22583&k=c3939ce74785a3ccbf7592bcd70817e4&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-10-17 02:03

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

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

图片附件: htm0010.jpg (2014-10-17 02:02, 89.37 KB) / 下载次数 2366
http://forums.netpad.net.cn/attachment.php?aid=22584&k=e76942e2a1a548b63a71df4c2cd94cc8&t=1779819936&sid=ySMBYv

附件: 万花曲线规html.rar (2014-10-17 02:03, 2.18 KB) / 下载次数 3657
http://forums.netpad.net.cn/attachment.php?aid=22585&k=a44deb732df8ca1c1b27aa9fbeaad4c4&t=1779819936&sid=ySMBYv

作者: 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 的画布，画布的默认状态是透明的。由于解释起来比较繁复和啰嗦，我都写入到了代码的注释里面。

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

htm0100.rar (1.45 KB)

图片附件: New1.gif (2014-10-20 09:09, 4.68 KB) / 下载次数 3103
http://forums.netpad.net.cn/attachment.php?aid=22587&k=8de3088e996ca1e25666df20daa91fb7&t=1779819936&sid=ySMBYv

附件: htm0100.rar (2014-10-18 23:44, 1.45 KB) / 下载次数 4562
http://forums.netpad.net.cn/attachment.php?aid=22588&k=16a8fba000cd3623adc0d2d3260e1c26&t=1779819936&sid=ySMBYv

作者: 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) / 下载次数 4436
http://forums.netpad.net.cn/attachment.php?aid=22589&k=cacc2de47bb8951187d5137496052ddd&t=1779819936&sid=ySMBYv

作者: 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>

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

htm0102.rar (1.42 KB)

图片附件: New.gif (2014-10-20 09:09, 4.72 KB) / 下载次数 3032
http://forums.netpad.net.cn/attachment.php?aid=22591&k=bd23313cfb8dc81e684511bd6014b83a&t=1779819936&sid=ySMBYv

附件: htm0102.rar (2014-10-20 00:35, 1.42 KB) / 下载次数 4617
http://forums.netpad.net.cn/attachment.php?aid=22594&k=dd7c501c39a7039a7e17b3560c5077ce&t=1779819936&sid=ySMBYv

作者: 一线天 时间: 2014-10-20 14:48

27# xklppp

可以感觉到，楼主的不断研究，最终成就一个基于网页的几何画板，期待尽早实现。

作者: xklppp 时间: 2014-10-21 00:29

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

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

htm0103.rar (1.89 KB)

图片附件: New1.gif (2014-10-21 09:35, 5.09 KB) / 下载次数 2987
http://forums.netpad.net.cn/attachment.php?aid=22595&k=a1fc544c5720d3e60a1b68e4f25cdf13&t=1779819936&sid=ySMBYv

附件: htm0103.rar (2014-10-21 00:29, 1.89 KB) / 下载次数 4331
http://forums.netpad.net.cn/attachment.php?aid=22596&k=decea19ef321c91c829500b20490c397&t=1779819936&sid=ySMBYv

作者: 周传高 时间: 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暂时没用。

htm0201.rar (933 Bytes)
后面我们将一步一步地完善其代码。

图片附件: 3.gif (2014-10-25 18:09, 3.01 KB) / 下载次数 3003
http://forums.netpad.net.cn/attachment.php?aid=22597&k=12814ba5d1178346d7f75e76e163dac4&t=1779819936&sid=ySMBYv

附件: htm0201.rar (2014-10-21 23:42, 933 Bytes) / 下载次数 3984
http://forums.netpad.net.cn/attachment.php?aid=22598&k=12e8dac256c405aabd636e4425a8b22e&t=1779819936&sid=ySMBYv

作者: room901 时间: 2014-10-22 15:14

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

附件: 简单动画.rar (2014-10-22 15:14, 482 Bytes) / 下载次数 2702
http://forums.netpad.net.cn/attachment.php?aid=22599&k=5f82253ee6c5bf58851439be4325499b&t=1779819936&sid=ySMBYv

作者: 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 模型。原文件给出了详细的注释。

在 ZR、ZI 的输入框中滚动鼠标，会看到一些在别的软件中不太容易看到的景象，我们的
代码才刚刚起步，就能有如此的成绩，相信大家会有兴趣走下去。
后面的讨论会越来越艰难，我们将放慢节奏，祝大家学习愉快！！！

htm0202.rar (2.14 KB)

图片附件: 3.jpg (2014-10-27 08:34, 24.92 KB) / 下载次数 2950
http://forums.netpad.net.cn/attachment.php?aid=22600&k=699759a05cef0108d1446bef87e64f26&t=1779819936&sid=ySMBYv

附件: htm0202.rar (2014-10-23 01:31, 2.14 KB) / 下载次数 4057
http://forums.netpad.net.cn/attachment.php?aid=22604&k=335fb8d8f7a54f76c269ceef3284c086&t=1779819936&sid=ySMBYv

作者: lnszdzg 时间: 2014-10-23 10:15

美不胜收啊

作者: room901 时间: 2014-10-23 13:45

非常强大！

作者: xklppp 时间: 2014-10-24 12:43

现在，我们在程序中增加缩放模块，下面是放大图像的原理图：

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

图像缩放的算法和屏幕输入的设计有很多，我们这里使用的是最简单的一种。当我们熟练了以后，就可以对其功能和模式进行扩展。
程序编到这里，代码仍然是非常的简单，但是，它却可以让我们随着鼠标滚轮的滚动在硬件允许的精度下来探索 mandbrot 集中所有的细节。

htm0203.rar (2.21 KB)

图片附件: New.jpg (2014-10-25 18:04, 18.61 KB) / 下载次数 2967
http://forums.netpad.net.cn/attachment.php?aid=22617&k=381a99cf0c47c5f88acbd8b7aa866f41&t=1779819936&sid=ySMBYv

图片附件: 1.jpg (2014-10-25 18:08, 12.41 KB) / 下载次数 2941
http://forums.netpad.net.cn/attachment.php?aid=22618&k=38b7cba8621f43173427b07ae4accff1&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-10-25 18:08, 13.25 KB) / 下载次数 3012
http://forums.netpad.net.cn/attachment.php?aid=22619&k=9737d9416ec74991998001cc13710a1b&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-10-25 18:08, 14.96 KB) / 下载次数 2988
http://forums.netpad.net.cn/attachment.php?aid=22620&k=47d67be62ba8d121ca52af71c6ff6ff3&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-10-25 18:08, 15.62 KB) / 下载次数 2950
http://forums.netpad.net.cn/attachment.php?aid=22621&k=a30f25efbbac0c986077270eb1b44ce9&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-10-25 18:08, 17.41 KB) / 下载次数 3005
http://forums.netpad.net.cn/attachment.php?aid=22622&k=5f6451905d9a14fb39f6b4e22a208cb3&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-10-25 18:08, 16.63 KB) / 下载次数 2936
http://forums.netpad.net.cn/attachment.php?aid=22623&k=151be5214888da428586f25150c6106e&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-10-25 18:08, 15.79 KB) / 下载次数 2999
http://forums.netpad.net.cn/attachment.php?aid=22624&k=4dde82ab5939612f7c3a67c541a17dfb&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-10-25 18:08, 15.88 KB) / 下载次数 2949
http://forums.netpad.net.cn/attachment.php?aid=22625&k=96275b485afc7b6572662a7368e0ab07&t=1779819936&sid=ySMBYv

附件: htm0203.rar (2014-10-24 12:43, 2.21 KB) / 下载次数 4026
http://forums.netpad.net.cn/attachment.php?aid=22626&k=91a9854f84371e74665172429e6b83f3&t=1779819936&sid=ySMBYv

作者: 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 输入框输入的：

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

htm0204.rar (2.87 KB)

图片附件: 1.jpg (2014-10-27 08:33, 16.68 KB) / 下载次数 2901
http://forums.netpad.net.cn/attachment.php?aid=22637&k=c6267f79aa98f216c200af514318e4b4&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-10-27 08:33, 16.43 KB) / 下载次数 2918
http://forums.netpad.net.cn/attachment.php?aid=22638&k=71e9a311aa070880cddd008fe26a1d64&t=1779819936&sid=ySMBYv

附件: htm0204.rar (2014-10-26 14:34, 2.87 KB) / 下载次数 4073
http://forums.netpad.net.cn/attachment.php?aid=22639&k=55fe126fdff666f0a223152dafbbfd49&t=1779819936&sid=ySMBYv

作者: a2569875 时间: 2014-10-26 16:59

29# xklppp

xklppp 发表于 2014-10-21 00:29

关于圆上的可动点、可选取移动的圆、轨迹、轨迹上的可动点又要如何制作或定义呢？

作者: 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 集。

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

htm0205.rar (2.12 KB)

图片附件: 1.jpg (2014-10-29 22:10, 16.25 KB) / 下载次数 2243
http://forums.netpad.net.cn/attachment.php?aid=22646&k=0c418e28adae3d100ce5fa45137883b8&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-10-29 22:10, 15.55 KB) / 下载次数 2243
http://forums.netpad.net.cn/attachment.php?aid=22647&k=c2a1d04ab25477ebae04fa5e74c2a936&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-10-29 22:10, 16.86 KB) / 下载次数 2228
http://forums.netpad.net.cn/attachment.php?aid=22648&k=742964eb3520d705374be4eb6ab4e3a0&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-10-29 22:10, 18.64 KB) / 下载次数 2232
http://forums.netpad.net.cn/attachment.php?aid=22649&k=e8a1fd3ee3c4d193f4789dc08043426f&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-10-29 22:10, 18.58 KB) / 下载次数 2254
http://forums.netpad.net.cn/attachment.php?aid=22650&k=5b8fd53604b469e9aee646a200205322&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-10-29 22:10, 17.54 KB) / 下载次数 2198
http://forums.netpad.net.cn/attachment.php?aid=22651&k=93ec358a66285cd8249f6d135f7a1e61&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-10-29 22:10, 18.72 KB) / 下载次数 2293
http://forums.netpad.net.cn/attachment.php?aid=22652&k=b52e6c23b0aa9998c2898b608b85ae24&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-10-29 22:10, 17.8 KB) / 下载次数 2244
http://forums.netpad.net.cn/attachment.php?aid=22653&k=811dea20eaf1bb590b85ae41d7448457&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-10-29 22:10, 18.05 KB) / 下载次数 2255
http://forums.netpad.net.cn/attachment.php?aid=22654&k=08cd291b8e82a5da91ea31bc42698750&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-10-29 22:10, 20.22 KB) / 下载次数 2239
http://forums.netpad.net.cn/attachment.php?aid=22655&k=762f9b72f51e72ba3adfecf0ca52dff5&t=1779819936&sid=ySMBYv

图片附件: d.jpg (2014-10-29 22:13, 20.35 KB) / 下载次数 2217
http://forums.netpad.net.cn/attachment.php?aid=22656&k=22f253c6dfd96f6c0336cd318c3b0796&t=1779819936&sid=ySMBYv

图片附件: e.jpg (2014-10-29 22:13, 37.16 KB) / 下载次数 2254
http://forums.netpad.net.cn/attachment.php?aid=22657&k=151e393795637aa0f7727696da0af7d9&t=1779819936&sid=ySMBYv

附件: htm0205.rar (2014-10-27 12:58, 2.12 KB) / 下载次数 3678
http://forums.netpad.net.cn/attachment.php?aid=22658&k=b9281ed95c4eaa08a8513d41a3253458&t=1779819936&sid=ySMBYv

作者: 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，是因为后面有需要使用“色带”的着色算法。

程序对 iterator 和 setColor 的返回值进行了必要的扩展，以适应更多的着色算法。

htm0301.rar (2.48 KB)

图片附件: 1.jpg (2014-10-29 22:18, 15.9 KB) / 下载次数 2241
http://forums.netpad.net.cn/attachment.php?aid=22661&k=21f83df6fabfb6e066932a10eacb7769&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-10-29 22:18, 18.81 KB) / 下载次数 2228
http://forums.netpad.net.cn/attachment.php?aid=22662&k=b0a173a7133d9206b165b00188fbc2a3&t=1779819936&sid=ySMBYv

附件: htm0301.rar (2014-10-29 12:56, 2.48 KB) / 下载次数 3602
http://forums.netpad.net.cn/attachment.php?aid=22663&k=a45f74dc34cd2bab7d706ff2c49a9feb&t=1779819936&sid=ySMBYv

作者: 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) / 下载次数 3756
http://forums.netpad.net.cn/attachment.php?aid=22668&k=f0822d8f93385be7500a43f57310a4a3&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-11-2 00:56

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

htm0303.rar (3.93 KB)

图片附件: 1.jpg (2014-11-2 08:40, 20.42 KB) / 下载次数 2208
http://forums.netpad.net.cn/attachment.php?aid=22669&k=f39ae06529059fccb8823e5fbbb3e93a&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-2 08:40, 28.63 KB) / 下载次数 2188
http://forums.netpad.net.cn/attachment.php?aid=22670&k=0b725fa6191aeb9486e74b60857516ca&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-2 08:40, 13.55 KB) / 下载次数 2205
http://forums.netpad.net.cn/attachment.php?aid=22671&k=792345b159f23cb4a3493cdf1a7669b6&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-2 08:40, 14.07 KB) / 下载次数 2199
http://forums.netpad.net.cn/attachment.php?aid=22672&k=5583eced30c6b5b82692ae320f868475&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-2 08:40, 14.49 KB) / 下载次数 2208
http://forums.netpad.net.cn/attachment.php?aid=22673&k=9472edb098ea6c6a86f693f938b8489a&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-2 08:40, 15.64 KB) / 下载次数 2214
http://forums.netpad.net.cn/attachment.php?aid=22674&k=abcf7753fd53c689d56237fa57dc0630&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-2 08:40, 24.58 KB) / 下载次数 2234
http://forums.netpad.net.cn/attachment.php?aid=22675&k=1d7bda5690afb3bcc3c6426142c8fca5&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-2 08:40, 24.55 KB) / 下载次数 2183
http://forums.netpad.net.cn/attachment.php?aid=22676&k=b56dbb2d57e5153f397cfce5f4553058&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-2 08:40, 26.02 KB) / 下载次数 2249
http://forums.netpad.net.cn/attachment.php?aid=22677&k=edccfb985a3e655cf8b14cb3471b2042&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-2 08:40, 25.72 KB) / 下载次数 2180
http://forums.netpad.net.cn/attachment.php?aid=22678&k=0a5d91084d8f692665e9eaa1adbe3eb5&t=1779819936&sid=ySMBYv

附件: htm0303.rar (2014-11-2 00:56, 3.93 KB) / 下载次数 3552
http://forums.netpad.net.cn/attachment.php?aid=22679&k=3696cfbc77059f838f53fcca71da8401&t=1779819936&sid=ySMBYv

作者: 周传高 时间: 2014-11-2 09:49

大赞！

图片附件: FS0013.png (2014-11-8 17:15, 26.03 KB) / 下载次数 1695
http://forums.netpad.net.cn/attachment.php?aid=22745&k=3f6aba2ac3a9112cf11e43527f7ab32a&t=1779819936&sid=ySMBYv

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

太强大了，喜欢！

作者: xklppp 时间: 2014-11-2 23:05

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

htm0304.rar (3.79 KB)

图片附件: 1.jpg (2014-11-4 14:42, 14.73 KB) / 下载次数 2234
http://forums.netpad.net.cn/attachment.php?aid=22680&k=ec9fcc5b423e0797ee1ec33ae24debdd&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-4 14:42, 17.35 KB) / 下载次数 2242
http://forums.netpad.net.cn/attachment.php?aid=22681&k=bdc4a659dd73b876ffcb4fa7344850b4&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-4 14:42, 14.19 KB) / 下载次数 2199
http://forums.netpad.net.cn/attachment.php?aid=22682&k=3f63452f31de06b558ff23810b90ac6c&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-4 14:42, 11.82 KB) / 下载次数 2199
http://forums.netpad.net.cn/attachment.php?aid=22683&k=63c8e667acb59b68f1735dae85c82f57&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-4 14:42, 14.29 KB) / 下载次数 2213
http://forums.netpad.net.cn/attachment.php?aid=22684&k=b1d2858be6d315113b827481370516bc&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-4 14:42, 13.63 KB) / 下载次数 2218
http://forums.netpad.net.cn/attachment.php?aid=22685&k=a148ad997de44c18244082b2e8c87fed&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-4 14:42, 15.32 KB) / 下载次数 2250
http://forums.netpad.net.cn/attachment.php?aid=22686&k=a03d23aac247011287380b5ed54e8493&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-4 14:42, 13.49 KB) / 下载次数 2229
http://forums.netpad.net.cn/attachment.php?aid=22687&k=ffd264690393ca93dd23b8fe4197a182&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-4 14:42, 17.24 KB) / 下载次数 2202
http://forums.netpad.net.cn/attachment.php?aid=22688&k=4c6b10d583686a4090e2d0b8d585c531&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-4 14:42, 16.34 KB) / 下载次数 2253
http://forums.netpad.net.cn/attachment.php?aid=22689&k=d0f127a7c6a079b2c7968a54d10f5874&t=1779819936&sid=ySMBYv

附件: htm0304.rar (2014-11-2 23:05, 3.79 KB) / 下载次数 3662
http://forums.netpad.net.cn/attachment.php?aid=22690&k=cc582ad24f95cefa28a2cfe508903aa6&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-11-3 23:37

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

htm0305.rar (4.03 KB)

图片附件: 1.jpg (2014-11-4 14:48, 18.05 KB) / 下载次数 2190
http://forums.netpad.net.cn/attachment.php?aid=22694&k=4a26d97f3da3a7ed0026d52ba8746f89&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-4 14:48, 14.25 KB) / 下载次数 2179
http://forums.netpad.net.cn/attachment.php?aid=22695&k=31b52fd81739b25ce424e962d270ca2d&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-4 14:48, 18.28 KB) / 下载次数 2169
http://forums.netpad.net.cn/attachment.php?aid=22696&k=b353dbddfb8bab7f54dd90e39aecc616&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-4 14:48, 13.52 KB) / 下载次数 2192
http://forums.netpad.net.cn/attachment.php?aid=22697&k=dd5671ebeef75cd9414ca33fadd70e27&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-4 14:48, 14.04 KB) / 下载次数 2196
http://forums.netpad.net.cn/attachment.php?aid=22698&k=f35e9bb761ce74713a7ff65d7f9e1f3a&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-4 14:48, 14.04 KB) / 下载次数 2168
http://forums.netpad.net.cn/attachment.php?aid=22699&k=e9a4f0be7f46b0aadd99d50cf1bc38ac&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-4 14:48, 16.33 KB) / 下载次数 2193
http://forums.netpad.net.cn/attachment.php?aid=22700&k=cf5429f20fac8e50ecb4da20708be51f&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-4 14:48, 21.58 KB) / 下载次数 2205
http://forums.netpad.net.cn/attachment.php?aid=22701&k=6cfe044ddeae1b5b4e046af481e7a479&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-4 14:48, 16.81 KB) / 下载次数 2181
http://forums.netpad.net.cn/attachment.php?aid=22702&k=a26691f6f9acb0ad1cc6ef52c004cd80&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-4 14:48, 19.4 KB) / 下载次数 2246
http://forums.netpad.net.cn/attachment.php?aid=22703&k=78ecd9fc3f95635ac519a021593bafb9&t=1779819936&sid=ySMBYv

图片附件: b.jpg (2014-11-4 14:48, 31.99 KB) / 下载次数 2186
http://forums.netpad.net.cn/attachment.php?aid=22704&k=e7567f87da36922f1377f7841b4a62c0&t=1779819936&sid=ySMBYv

图片附件: c.jpg (2014-11-4 14:48, 22.99 KB) / 下载次数 2179
http://forums.netpad.net.cn/attachment.php?aid=22705&k=7233f8249b7b10170cbc535e67001a85&t=1779819936&sid=ySMBYv

附件: htm0305.rar (2014-11-3 23:37, 4.03 KB) / 下载次数 3616
http://forums.netpad.net.cn/attachment.php?aid=22706&k=efc3d80710420a4f3cc51b337d6477b0&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-11-4 23:38

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

htm0306.rar (4.1 KB)

图片附件: 1.jpg (2014-11-8 14:46, 15.22 KB) / 下载次数 2451
http://forums.netpad.net.cn/attachment.php?aid=22707&k=241779bac3e3226abead697ce02e6df5&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-8 14:46, 15.62 KB) / 下载次数 2480
http://forums.netpad.net.cn/attachment.php?aid=22708&k=d9dcd66012ea0e2ff5a49673d3f30fbb&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-8 14:46, 18.26 KB) / 下载次数 2444
http://forums.netpad.net.cn/attachment.php?aid=22709&k=db5d469d2efc110f657abd779a5e3a36&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-8 14:46, 21.98 KB) / 下载次数 2491
http://forums.netpad.net.cn/attachment.php?aid=22710&k=b192bc8bedb66cc343dbc12df6b393bd&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-8 14:46, 18.96 KB) / 下载次数 2453
http://forums.netpad.net.cn/attachment.php?aid=22711&k=fc03559301da25fa726019d29d684da5&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-8 14:46, 25.18 KB) / 下载次数 2433
http://forums.netpad.net.cn/attachment.php?aid=22712&k=a7e7adc1a833ab72bfa113f04589c538&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-8 14:46, 27.2 KB) / 下载次数 2456
http://forums.netpad.net.cn/attachment.php?aid=22713&k=2f25acfd65fb3238cac7d2b0f1f74eb3&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-8 14:46, 30.03 KB) / 下载次数 2461
http://forums.netpad.net.cn/attachment.php?aid=22714&k=4238ba5d1d1c6defb442a233691d162c&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-8 14:46, 27.01 KB) / 下载次数 2407
http://forums.netpad.net.cn/attachment.php?aid=22715&k=6855a20214ccfc0dd420a1332d0889bc&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-8 14:46, 19.3 KB) / 下载次数 2467
http://forums.netpad.net.cn/attachment.php?aid=22716&k=70d0f71c37f14c4902496e59170d9106&t=1779819936&sid=ySMBYv

附件: htm0306.rar (2014-11-4 23:38, 4.1 KB) / 下载次数 3813
http://forums.netpad.net.cn/attachment.php?aid=22717&k=81d700fbbc5da95e268b1c740979cf6f&t=1779819936&sid=ySMBYv

作者: 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, 51.97 KB) / 下载次数 2370
http://forums.netpad.net.cn/attachment.php?aid=22718&k=a835be6bf11b0331c4ca686d5b60a501&t=1779819936&sid=ySMBYv

图片附件: 捕获35.PNG (2014-11-5 16:24, 30.18 KB) / 下载次数 2137
http://forums.netpad.net.cn/attachment.php?aid=22719&k=12e264b8b748f9935d14f62d2b0d560a&t=1779819936&sid=ySMBYv

图片附件: 捕获36.PNG (2014-11-5 16:24, 37.92 KB) / 下载次数 2154
http://forums.netpad.net.cn/attachment.php?aid=22720&k=251ea53422728d7143cf152bb246a71b&t=1779819936&sid=ySMBYv

图片附件: 捕获37.PNG (2014-11-5 16:24, 39.67 KB) / 下载次数 2150
http://forums.netpad.net.cn/attachment.php?aid=22721&k=f68b5a837bf70532155a8d7ffdaaff62&t=1779819936&sid=ySMBYv

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

图片附件: New.jpg (2014-11-8 14:48, 14.82 KB) / 下载次数 2143
http://forums.netpad.net.cn/attachment.php?aid=22722&k=5413c216ddce81b831da97ebbbada9b7&t=1779819936&sid=ySMBYv

作者: 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
程序的运行速度要快一些，画布越大效果越明显。由于加入了三十几个迭代模型，代码量急剧增加，不过，核心代码就那么几十行。

htm0401.rar (6.49 KB)

图片附件: 1.jpg (2014-11-8 14:53, 13.6 KB) / 下载次数 2527
http://forums.netpad.net.cn/attachment.php?aid=22723&k=85fcedcb095c3bd7f6b20e78c6112681&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-8 14:53, 20.14 KB) / 下载次数 2482
http://forums.netpad.net.cn/attachment.php?aid=22724&k=23a3ab0fe4743dc866bfdcdc9610cfca&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-8 14:53, 13.26 KB) / 下载次数 2530
http://forums.netpad.net.cn/attachment.php?aid=22725&k=39148ef05934f05f128da69fa4cf43bc&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-8 14:53, 15.85 KB) / 下载次数 2515
http://forums.netpad.net.cn/attachment.php?aid=22726&k=be4c12bed63e2a70729c158cdd41e635&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-8 14:53, 15.29 KB) / 下载次数 2488
http://forums.netpad.net.cn/attachment.php?aid=22727&k=48c2aa78a2b27cefaa5a61cf9257afaf&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-8 14:53, 30.48 KB) / 下载次数 2485
http://forums.netpad.net.cn/attachment.php?aid=22728&k=ffbc28827369abbbbd567930455f049f&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-8 14:53, 13.46 KB) / 下载次数 2510
http://forums.netpad.net.cn/attachment.php?aid=22729&k=f3feffab3265d29334df095cb3b27f11&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-8 14:53, 19.83 KB) / 下载次数 2490
http://forums.netpad.net.cn/attachment.php?aid=22730&k=668211230a52169eef7a62e51d3f15b3&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-8 14:53, 14.36 KB) / 下载次数 2557
http://forums.netpad.net.cn/attachment.php?aid=22731&k=158d226759b30bb8fb6996e534122683&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-8 14:53, 27.83 KB) / 下载次数 2511
http://forums.netpad.net.cn/attachment.php?aid=22732&k=99186015e2fefc744c5121a7186a673a&t=1779819936&sid=ySMBYv

附件: htm0401.rar (2014-11-6 17:44, 6.49 KB) / 下载次数 3942
http://forums.netpad.net.cn/attachment.php?aid=22733&k=abcac9fa1a7a81feaf0f4e73e00dba98&t=1779819936&sid=ySMBYv

作者: 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 之间切换。
就我本人所知道的有关复变分形的知识，程序已接近尾声，在不影响原结构的基础上对程序代码作了较大幅度的调整。

htm0402.rar (7.29 KB)

图片附件: b.jpg (2014-11-8 14:58, 13.72 KB) / 下载次数 2538
http://forums.netpad.net.cn/attachment.php?aid=22734&k=54be327ffef6f2ee216457ce99556590&t=1779819936&sid=ySMBYv

图片附件: c.jpg (2014-11-8 14:58, 18.02 KB) / 下载次数 2517
http://forums.netpad.net.cn/attachment.php?aid=22735&k=597eee5efc92228d5f365b889ce4844d&t=1779819936&sid=ySMBYv

图片附件: d.jpg (2014-11-8 14:58, 17.19 KB) / 下载次数 2498
http://forums.netpad.net.cn/attachment.php?aid=22736&k=c2031aecca69449b1abf3b544ae01862&t=1779819936&sid=ySMBYv

图片附件: e.jpg (2014-11-8 14:58, 16.09 KB) / 下载次数 2507
http://forums.netpad.net.cn/attachment.php?aid=22737&k=277ae7a7e9e837b32161871db92ef125&t=1779819936&sid=ySMBYv

图片附件: f.jpg (2014-11-8 14:58, 14.88 KB) / 下载次数 2488
http://forums.netpad.net.cn/attachment.php?aid=22738&k=2e475afa17406198e68042f845282e2a&t=1779819936&sid=ySMBYv

图片附件: g.jpg (2014-11-8 14:58, 22.8 KB) / 下载次数 2534
http://forums.netpad.net.cn/attachment.php?aid=22739&k=4382114761d3c9c6f88bd76a74f7ab3a&t=1779819936&sid=ySMBYv

图片附件: h.jpg (2014-11-8 14:58, 19.46 KB) / 下载次数 2499
http://forums.netpad.net.cn/attachment.php?aid=22740&k=707060f1d22ebebe6f32b5daf573224b&t=1779819936&sid=ySMBYv

图片附件: i.jpg (2014-11-8 14:58, 17.19 KB) / 下载次数 2514
http://forums.netpad.net.cn/attachment.php?aid=22741&k=97a911edcc4ce2c3f95c0af91fa6d26f&t=1779819936&sid=ySMBYv

图片附件: j.jpg (2014-11-8 14:58, 16.97 KB) / 下载次数 2485
http://forums.netpad.net.cn/attachment.php?aid=22742&k=0fe8631c9a9843b98111c61bc4310411&t=1779819936&sid=ySMBYv

图片附件: k.jpg (2014-11-8 14:58, 22.84 KB) / 下载次数 2548
http://forums.netpad.net.cn/attachment.php?aid=22743&k=4da307d31247793634fd0e1985439ed1&t=1779819936&sid=ySMBYv

附件: htm0402.rar (2014-11-8 12:27, 7.29 KB) / 下载次数 3843
http://forums.netpad.net.cn/attachment.php?aid=22744&k=06d55dbad2a9b4beaf86e80f49554698&t=1779819936&sid=ySMBYv

作者: 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 集则更加繁复：

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

htm0403.rar (7.31 KB)

图片附件: 1.jpg (2014-11-13 13:32, 29.95 KB) / 下载次数 2036
http://forums.netpad.net.cn/attachment.php?aid=22746&k=70a51b949867be7d52c50f5b153ccaea&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-13 13:32, 23.53 KB) / 下载次数 2058
http://forums.netpad.net.cn/attachment.php?aid=22747&k=dca98253eadf56ebb815c092f9d08063&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-13 13:32, 27.76 KB) / 下载次数 2023
http://forums.netpad.net.cn/attachment.php?aid=22748&k=64b16d12b9898a80ad1e66fece4e3f40&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-13 13:32, 22.89 KB) / 下载次数 2027
http://forums.netpad.net.cn/attachment.php?aid=22749&k=b1c47a4b01930d6fc41c1c6e7fc3bde1&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-13 13:32, 25.8 KB) / 下载次数 2029
http://forums.netpad.net.cn/attachment.php?aid=22750&k=2b63372077a266cc4ed1618a73c272fc&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-13 13:32, 26.35 KB) / 下载次数 1999
http://forums.netpad.net.cn/attachment.php?aid=22751&k=fb2716117df8cf179698882da33ffd4e&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-13 13:32, 32.68 KB) / 下载次数 1990
http://forums.netpad.net.cn/attachment.php?aid=22752&k=4b68dc884a267270906c90d641762040&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-13 13:32, 25.45 KB) / 下载次数 2010
http://forums.netpad.net.cn/attachment.php?aid=22753&k=f598bb870e5e491b5766457f351bbaff&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-13 13:32, 23.19 KB) / 下载次数 2086
http://forums.netpad.net.cn/attachment.php?aid=22754&k=d1410dca699d25e61edc4e5eb02b81e2&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-13 13:32, 36.14 KB) / 下载次数 2065
http://forums.netpad.net.cn/attachment.php?aid=22755&k=2cae588a0c1f6d5daec61b8886407f49&t=1779819936&sid=ySMBYv

附件: htm0403.rar (2014-11-8 23:33, 7.31 KB) / 下载次数 3826
http://forums.netpad.net.cn/attachment.php?aid=22756&k=ef873fdad2d110d6b06be699bdf73ede&t=1779819936&sid=ySMBYv

作者: 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 楼的万花曲线规相同，至于算法，代码并不复杂，只是多了一个动画效果，相信大家花点时间是不会有什么困难的。

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

htm0502.rar (8.47 KB)

图片附件: 1.jpg (2014-11-13 13:38, 18.98 KB) / 下载次数 2030
http://forums.netpad.net.cn/attachment.php?aid=22760&k=cb4135e5e3c5f323b955852cc0cebb89&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-13 13:38, 19.39 KB) / 下载次数 2027
http://forums.netpad.net.cn/attachment.php?aid=22761&k=3db92b7b3eae3220943a2823c35a9681&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-13 13:38, 19 KB) / 下载次数 2024
http://forums.netpad.net.cn/attachment.php?aid=22762&k=131ef5327ad2e63bbc1a88fd32bc0f32&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-13 13:38, 18.97 KB) / 下载次数 2043
http://forums.netpad.net.cn/attachment.php?aid=22763&k=6916e99051fd2753cebc2d274d2676c6&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-13 13:38, 19.49 KB) / 下载次数 2028
http://forums.netpad.net.cn/attachment.php?aid=22764&k=97081cc3e780b229cdcc36af29b59c3f&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-13 13:38, 20.59 KB) / 下载次数 2061
http://forums.netpad.net.cn/attachment.php?aid=22765&k=a7ab6afd4b708dac7b5dc428719214ec&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-13 13:38, 19.93 KB) / 下载次数 1996
http://forums.netpad.net.cn/attachment.php?aid=22766&k=1293fa53be20f1ae92f42aea57561701&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-13 13:38, 19.37 KB) / 下载次数 2002
http://forums.netpad.net.cn/attachment.php?aid=22767&k=8332c609e089268c2f4166a57b42f38f&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-13 13:38, 18.95 KB) / 下载次数 2002
http://forums.netpad.net.cn/attachment.php?aid=22768&k=f3eb127439a2aad981b1d4eab05037c8&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-13 13:38, 20.16 KB) / 下载次数 2009
http://forums.netpad.net.cn/attachment.php?aid=22769&k=5cc9ab59d950d68f5f0b430dede700a5&t=1779819936&sid=ySMBYv

附件: htm0502.rar (2014-11-13 13:14, 8.47 KB) / 下载次数 3821
http://forums.netpad.net.cn/attachment.php?aid=22770&k=a8f2a57b572884722616b6a4c0be0555&t=1779819936&sid=ySMBYv

作者: 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 集图谱！

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

htm0503.rar (8.81 KB)

图片附件: 1.jpg (2014-11-14 11:51, 29.57 KB) / 下载次数 2036
http://forums.netpad.net.cn/attachment.php?aid=22772&k=9236f85d6de99ac1ec9ab33090c5c960&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-14 11:51, 31.62 KB) / 下载次数 2038
http://forums.netpad.net.cn/attachment.php?aid=22773&k=56617f357753c6129f34d3feda3b7503&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-14 11:51, 31.7 KB) / 下载次数 2012
http://forums.netpad.net.cn/attachment.php?aid=22774&k=822decdc2ad3861e143657faf8cd5c21&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-14 11:51, 30.7 KB) / 下载次数 2054
http://forums.netpad.net.cn/attachment.php?aid=22775&k=f906f3e487c5ab4480c4cd1c76189659&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-14 11:51, 29.8 KB) / 下载次数 2022
http://forums.netpad.net.cn/attachment.php?aid=22776&k=695ce835eedee09dcb83ee4e33041fee&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-14 11:51, 28.69 KB) / 下载次数 2016
http://forums.netpad.net.cn/attachment.php?aid=22777&k=da22bd28b3624c494966607361fcf57d&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-14 11:51, 29.76 KB) / 下载次数 2041
http://forums.netpad.net.cn/attachment.php?aid=22778&k=7c48bf7ab6463caad8c10c0a93adf2e0&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-14 11:51, 25.67 KB) / 下载次数 2026
http://forums.netpad.net.cn/attachment.php?aid=22779&k=8df2435649d555fc17ca6db42a3f0fcf&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-14 11:51, 25.16 KB) / 下载次数 2052
http://forums.netpad.net.cn/attachment.php?aid=22780&k=fc4f370e64f04ad45c4cfc6e9ba6556a&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-14 11:51, 21.67 KB) / 下载次数 2036
http://forums.netpad.net.cn/attachment.php?aid=22781&k=a8201683b2ab4754051c75402efb50c7&t=1779819936&sid=ySMBYv

附件: htm0503.rar (2014-11-14 00:11, 8.81 KB) / 下载次数 3800
http://forums.netpad.net.cn/attachment.php?aid=22782&k=0490f448a89df2be65bb811b8cd64c1c&t=1779819936&sid=ySMBYv

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

xklppp老师：感谢您的精彩！
julia 集图谱的问题我们在
http://tieba.baidu.com/p/3403532327
讨论过，月城已经做得很好了。我也弄了一个，献丑！

图片附件: 捕获201.PNG (2014-11-14 21:14, 49.24 KB) / 下载次数 1658
http://forums.netpad.net.cn/attachment.php?aid=22784&k=5c9161a7f90a96190dc1e5e50b9d158e&t=1779819936&sid=ySMBYv

作者: 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, 91.32 KB) / 下载次数 1631
http://forums.netpad.net.cn/attachment.php?aid=22785&k=3ac434ed20df791b9952feac3cd1e3f2&t=1779819936&sid=ySMBYv

附件: [1.拖动红三角形框选要放大的J集，并呈现于附窗 2.当“J集密度k”足够大时，可在附窗呈现任意位置的J集 ...] Julius Ruis Set.gsp (2014-11-15 20:19, 26.91 KB) / 下载次数 2296
http://forums.netpad.net.cn/attachment.php?aid=22786&k=2a14030eeb6d32ba6536b41cffc7be94&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-11-15 17:25

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

htm0504.rar (9.16 KB)

图片附件: 1.jpg (2014-11-15 19:54, 15.07 KB) / 下载次数 2015
http://forums.netpad.net.cn/attachment.php?aid=22787&k=7dee714cba9cc884d6564709ba60af44&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-15 19:54, 20.53 KB) / 下载次数 2024
http://forums.netpad.net.cn/attachment.php?aid=22788&k=2140d4e9c32aa07f96fa0627d51938f1&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-15 19:54, 22.38 KB) / 下载次数 2050
http://forums.netpad.net.cn/attachment.php?aid=22789&k=12d068ee145dbbb02fa2f325e73f024f&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-15 19:54, 22.37 KB) / 下载次数 2047
http://forums.netpad.net.cn/attachment.php?aid=22790&k=2cfd816eed0e703c1dad45ca360df421&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-15 19:54, 18.42 KB) / 下载次数 2073
http://forums.netpad.net.cn/attachment.php?aid=22791&k=83dcbfce3fa82c2868e362a763272ce3&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-15 19:54, 27.24 KB) / 下载次数 2077
http://forums.netpad.net.cn/attachment.php?aid=22792&k=a2b3d8c2d88d88df6241bde0398dc9f2&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-15 19:54, 23.32 KB) / 下载次数 2032
http://forums.netpad.net.cn/attachment.php?aid=22793&k=b760b193254be4dd240b8c3e0d20ecd6&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-15 19:54, 14.29 KB) / 下载次数 2052
http://forums.netpad.net.cn/attachment.php?aid=22794&k=a5797ae9a83fb881475579f9584d3532&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-15 19:54, 13.32 KB) / 下载次数 2027
http://forums.netpad.net.cn/attachment.php?aid=22795&k=fdfed3a4b7d8a0acef68537bf1f36ce0&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-15 19:54, 15.06 KB) / 下载次数 2029
http://forums.netpad.net.cn/attachment.php?aid=22796&k=a3512b0910ae98c34247aa09b61630c6&t=1779819936&sid=ySMBYv

附件: htm0504.rar (2014-11-15 17:25, 9.16 KB) / 下载次数 3891
http://forums.netpad.net.cn/attachment.php?aid=22797&k=40c31fe35c19c126258a6b243c176287&t=1779819936&sid=ySMBYv

作者: 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集.gsp (28.03 KB)

图片附件: 正十二面体与J集.jpg (2014-11-17 18:49, 29.34 KB) / 下载次数 2226
http://forums.netpad.net.cn/attachment.php?aid=22801&k=a9250952458afef6fb7046b14c343ea3&t=1779819936&sid=ySMBYv

附件: 正十二面体与J集.gsp (2014-11-17 18:47, 28.03 KB) / 下载次数 3208
http://forums.netpad.net.cn/attachment.php?aid=22802&k=b83f28754229a98dcc283e49bcd8a532&t=1779819936&sid=ySMBYv

作者: xiaongxp 时间: 2014-11-17 22:28

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

图片附件: 正十二面体与M&J集.jpg (2014-11-17 22:28, 29.28 KB) / 下载次数 2235
http://forums.netpad.net.cn/attachment.php?aid=22803&k=3c4cc141898a455657f9991d24f24ae1&t=1779819936&sid=ySMBYv

附件: 正十二面体与M&J集.gsp (2014-11-17 22:28, 28.14 KB) / 下载次数 3325
http://forums.netpad.net.cn/attachment.php?aid=22804&k=fcc229a1556fd451a5f69d7876d58f9b&t=1779819936&sid=ySMBYv

作者: 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, 11.66 KB) / 下载次数 2745
http://forums.netpad.net.cn/attachment.php?aid=22808&k=bbba4db275e4d29dc1bc3a13d6606a5f&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-19 23:12, 12.29 KB) / 下载次数 2709
http://forums.netpad.net.cn/attachment.php?aid=22809&k=9a8fd4449fb2ee980d331171eae266a1&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-19 23:12, 10.04 KB) / 下载次数 2718
http://forums.netpad.net.cn/attachment.php?aid=22810&k=e61b5516102005f40fea6dbb5d77bb85&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-19 23:12, 9.79 KB) / 下载次数 2719
http://forums.netpad.net.cn/attachment.php?aid=22811&k=18cd2708f211204338e7cbdf21cdbb8b&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-19 23:12, 12 KB) / 下载次数 2694
http://forums.netpad.net.cn/attachment.php?aid=22812&k=6cffd0cfc28abef699c15490ec4765a8&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-19 23:12, 11.91 KB) / 下载次数 2755
http://forums.netpad.net.cn/attachment.php?aid=22813&k=8398558535b6941045f826869c6d0c61&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-19 23:12, 9.78 KB) / 下载次数 2732
http://forums.netpad.net.cn/attachment.php?aid=22814&k=ff7fcfdf6992ddbf068565dc7606711c&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-19 23:12, 9.86 KB) / 下载次数 2775
http://forums.netpad.net.cn/attachment.php?aid=22815&k=a7a9b9579f038e021defbab0d5c798fc&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-19 23:12, 10.51 KB) / 下载次数 2701
http://forums.netpad.net.cn/attachment.php?aid=22816&k=4e6287dfbba790c0327145201b078baf&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-19 23:12, 10.75 KB) / 下载次数 2689
http://forums.netpad.net.cn/attachment.php?aid=22817&k=5915c3761c38cf35ffb8995d0c8718ae&t=1779819936&sid=ySMBYv

作者: 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 个，并在窗体中增加相应的参数控制，这样，可以产生很多的着色效果：

html0602.rar (9.37 KB)

图片附件: 1.jpg (2014-11-23 16:52, 17.45 KB) / 下载次数 4960
http://forums.netpad.net.cn/attachment.php?aid=22826&k=950045fee99b7ecd043768a6274ee804&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-23 16:52, 16.1 KB) / 下载次数 4918
http://forums.netpad.net.cn/attachment.php?aid=22827&k=702b6cb508ecd89f5388e7b92953c0ce&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-23 16:52, 18.42 KB) / 下载次数 4922
http://forums.netpad.net.cn/attachment.php?aid=22828&k=dadc38c4095592f9708b0b369a400bf8&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-23 16:52, 18.55 KB) / 下载次数 4963
http://forums.netpad.net.cn/attachment.php?aid=22829&k=b5631db10c18cf545c7add4cdf86b1fa&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-23 16:52, 14.62 KB) / 下载次数 5009
http://forums.netpad.net.cn/attachment.php?aid=22830&k=4a7ea7f76a7ecdac201d977cfb58b3b6&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-23 16:52, 18.67 KB) / 下载次数 4972
http://forums.netpad.net.cn/attachment.php?aid=22831&k=28c339b35a4fe44fe8a0f0cb9b4dfd47&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-11-23 16:52, 18.52 KB) / 下载次数 5010
http://forums.netpad.net.cn/attachment.php?aid=22832&k=d4f64ab416956da15c7c0ca58013fa2b&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-11-23 16:52, 18.71 KB) / 下载次数 4921
http://forums.netpad.net.cn/attachment.php?aid=22833&k=19b6d4aee43289a805508962f8a38416&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-11-23 16:52, 19.21 KB) / 下载次数 4965
http://forums.netpad.net.cn/attachment.php?aid=22834&k=0f30fff0a23d1692abe274613ce53126&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-11-23 16:52, 18.42 KB) / 下载次数 4985
http://forums.netpad.net.cn/attachment.php?aid=22835&k=28c3fc7eae21d0dcd4bb871edab7f735&t=1779819936&sid=ySMBYv

附件: html0602.rar (2014-11-23 16:25, 9.37 KB) / 下载次数 6675
http://forums.netpad.net.cn/attachment.php?aid=22836&k=3fcd68b29d870b0171fc61a1f9a1f79c&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-11-26 00:01

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

html0603.rar (9.65 KB)

图片附件: 1.jpg (2014-11-26 08:26, 15.25 KB) / 下载次数 4937
http://forums.netpad.net.cn/attachment.php?aid=22844&k=d4c555a3f70eacc2e4ca1380d81b678d&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-26 08:26, 23.22 KB) / 下载次数 5046
http://forums.netpad.net.cn/attachment.php?aid=22845&k=f47621f6ac641c9a0b203351af99e791&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-26 08:26, 22.2 KB) / 下载次数 4996
http://forums.netpad.net.cn/attachment.php?aid=22846&k=22f63302ecfe46268ebd970641f927fa&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-26 08:26, 24.24 KB) / 下载次数 4996
http://forums.netpad.net.cn/attachment.php?aid=22847&k=ac431002e7ae0fe5382c952f340bf184&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-11-26 08:26, 30.22 KB) / 下载次数 5019
http://forums.netpad.net.cn/attachment.php?aid=22852&k=79da2248f79fb469b42cba8aec04ee20&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-11-26 08:26, 29.42 KB) / 下载次数 4934
http://forums.netpad.net.cn/attachment.php?aid=22853&k=2bd222483a1b73d18338c14a73330f3d&t=1779819936&sid=ySMBYv

附件: html0603.rar (2014-11-26 01:26, 9.65 KB) / 下载次数 7040
http://forums.netpad.net.cn/attachment.php?aid=22854&k=79305096f010d8a9271ab28ec48b677b&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-11-26 09:32

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

html0604.rar (9.73 KB)

图片附件: 1.jpg (2014-11-26 11:34, 14.82 KB) / 下载次数 4952
http://forums.netpad.net.cn/attachment.php?aid=22855&k=6956bc764626d950e2474b50e46fe5f2&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-11-26 11:34, 18.36 KB) / 下载次数 4980
http://forums.netpad.net.cn/attachment.php?aid=22856&k=3afbf79458d56e855b166abd7a61b6de&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-11-26 11:34, 21.34 KB) / 下载次数 4955
http://forums.netpad.net.cn/attachment.php?aid=22857&k=1c13335e451c7ffa242f08b9f83a55d1&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-11-26 11:34, 20.13 KB) / 下载次数 4971
http://forums.netpad.net.cn/attachment.php?aid=22858&k=da3534e8c3ed2c5421b3adf014c429e7&t=1779819936&sid=ySMBYv

附件: html0604.rar (2014-11-26 09:32, 9.73 KB) / 下载次数 6933
http://forums.netpad.net.cn/attachment.php?aid=22859&k=8846e89dd469cb2cc484c76c63c1a592&t=1779819936&sid=ySMBYv

作者: 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, 25.23 KB) / 下载次数 4620
http://forums.netpad.net.cn/attachment.php?aid=22861&k=506249b5b426221486a416e0678d50b0&t=1779819936&sid=ySMBYv

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

xklppp老师：感谢您精彩的文章。
对于陷阱，我也是跟着论坛中的老师学的，原理我还讲不好，这个是Mathcad中的一个陷阱模块，您看看，也许有用。

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

图片附件: 捕获204.PNG (2014-11-26 16:28, 40.78 KB) / 下载次数 4626
http://forums.netpad.net.cn/attachment.php?aid=22862&k=d187b0a7633676181f7bc6bb939dfe65&t=1779819936&sid=ySMBYv

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

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

图片附件: 无标题205.png (2014-11-26 16:33, 80.67 KB) / 下载次数 5047
http://forums.netpad.net.cn/attachment.php?aid=22863&k=6c6a3b672228fb4cf0dd64bf9ade0ded&t=1779819936&sid=ySMBYv

作者: 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, 54.88 KB) / 下载次数 2321
http://forums.netpad.net.cn/attachment.php?aid=22873&k=1d84478ecdf330aa88a7d448c6bae60c&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-12-2 15:51, 53.47 KB) / 下载次数 2288
http://forums.netpad.net.cn/attachment.php?aid=22874&k=f64f1c1ba057c8ba3fe5c6c797811548&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-12-2 15:51, 58.27 KB) / 下载次数 2331
http://forums.netpad.net.cn/attachment.php?aid=22875&k=35acddf6f7fef3650deee88b30bbf38b&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-12-2 15:51, 53.68 KB) / 下载次数 2301
http://forums.netpad.net.cn/attachment.php?aid=22876&k=806e1c0ccf972658aecf5e7fced7dcd5&t=1779819936&sid=ySMBYv

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

还是JS功能强大，上面第三幅图画板是不敢想的，但HTML应该是很简单的。

作者: xklppp 时间: 2014-12-1 23:51

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

html0606.rar (10.08 KB)

图片附件: 5.jpg (2014-12-2 15:55, 19.66 KB) / 下载次数 2098
http://forums.netpad.net.cn/attachment.php?aid=22887&k=bc645878e895db485d3c351e486b1f0c&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-12-2 15:55, 23.07 KB) / 下载次数 2104
http://forums.netpad.net.cn/attachment.php?aid=22888&k=bdbced925b9844469b72a94206dc3e38&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-12-2 15:55, 24.1 KB) / 下载次数 2119
http://forums.netpad.net.cn/attachment.php?aid=22889&k=1b2cbab63fa6f1a582a084f0a3d07a1d&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-12-2 15:55, 22.85 KB) / 下载次数 2105
http://forums.netpad.net.cn/attachment.php?aid=22890&k=31f1cda2acf0301684e6164e2f0ca57b&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-12-2 15:55, 24.23 KB) / 下载次数 66
http://forums.netpad.net.cn/attachment.php?aid=22891&k=a5d79a7780da43cad6ec4c77a61754bc&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-12-2 15:55, 24.32 KB) / 下载次数 2128
http://forums.netpad.net.cn/attachment.php?aid=22892&k=9e032aa4e1879bfc76638fccab355c9c&t=1779819936&sid=ySMBYv

图片附件: b.jpg (2014-12-2 15:55, 22.29 KB) / 下载次数 2117
http://forums.netpad.net.cn/attachment.php?aid=22893&k=a47ba74c4bf1cc5256ec7738f78fac79&t=1779819936&sid=ySMBYv

图片附件: c.jpg (2014-12-2 15:55, 21.98 KB) / 下载次数 2088
http://forums.netpad.net.cn/attachment.php?aid=22894&k=c535be475b812b3eee1346a9ba804453&t=1779819936&sid=ySMBYv

图片附件: d.jpg (2014-12-2 15:55, 24.23 KB) / 下载次数 2097
http://forums.netpad.net.cn/attachment.php?aid=22895&k=dffaef5fa67e3f6c04180109a5f64e5a&t=1779819936&sid=ySMBYv

图片附件: e.jpg (2014-12-2 15:55, 26.44 KB) / 下载次数 2113
http://forums.netpad.net.cn/attachment.php?aid=22896&k=c038e29fffc44ba4ec94dcddf500d659&t=1779819936&sid=ySMBYv

附件: html0606.rar (2014-12-2 01:26, 10.08 KB) / 下载次数 3788
http://forums.netpad.net.cn/attachment.php?aid=22899&k=d88a49ca78b798807b3700a8fe07bdc7&t=1779819936&sid=ySMBYv

作者: 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, 14.58 KB) / 下载次数 1913
http://forums.netpad.net.cn/attachment.php?aid=22900&k=7dc483d86e3fd0d729e5236d713fd110&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-12-3 18:48, 14.95 KB) / 下载次数 2005
http://forums.netpad.net.cn/attachment.php?aid=22901&k=bbe2409ae472e7516c0962938c1e4935&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-12-3 18:48, 19.39 KB) / 下载次数 1890
http://forums.netpad.net.cn/attachment.php?aid=22902&k=40fecd028c54bca6bd08beedb83b1c23&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-12-3 18:48, 19.9 KB) / 下载次数 1915
http://forums.netpad.net.cn/attachment.php?aid=22903&k=578ab16f0dcbbbd219b62b57348f2727&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-12-3 18:48, 21.87 KB) / 下载次数 1917
http://forums.netpad.net.cn/attachment.php?aid=22904&k=6ad27fdd4ee332b5b87002988b663d80&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-12-3 18:48, 31.94 KB) / 下载次数 1942
http://forums.netpad.net.cn/attachment.php?aid=22905&k=1d4a7703cf7b206d0d2873ae9db4fd41&t=1779819936&sid=ySMBYv

图片附件: 7.jpg (2014-12-3 18:48, 27.15 KB) / 下载次数 1920
http://forums.netpad.net.cn/attachment.php?aid=22906&k=eec88f1cd397d1927a484da0d3b0d728&t=1779819936&sid=ySMBYv

图片附件: 8.jpg (2014-12-3 18:48, 31.03 KB) / 下载次数 1941
http://forums.netpad.net.cn/attachment.php?aid=22907&k=9d7885d8d9f63c68c4bf31988281435b&t=1779819936&sid=ySMBYv

图片附件: 9.jpg (2014-12-3 18:48, 35.54 KB) / 下载次数 1919
http://forums.netpad.net.cn/attachment.php?aid=22908&k=3364166c22e5ba459ac7cac3eb41bcca&t=1779819936&sid=ySMBYv

图片附件: a.jpg (2014-12-3 18:48, 35.94 KB) / 下载次数 1961
http://forums.netpad.net.cn/attachment.php?aid=22909&k=631b98620804ac3425193c709c955010&t=1779819936&sid=ySMBYv

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

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

html0608.rar (10.25 KB)

图片附件: 1.jpg (2014-12-4 10:05, 6.45 KB) / 下载次数 1928
http://forums.netpad.net.cn/attachment.php?aid=22911&k=32af488d92d4f37c373b282ca1ff023b&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-12-4 10:05, 13.96 KB) / 下载次数 1913
http://forums.netpad.net.cn/attachment.php?aid=22912&k=ab577f949adce3d8d107a5eb2bc969c0&t=1779819936&sid=ySMBYv

图片附件: 3.jpg (2014-12-4 10:05, 15.85 KB) / 下载次数 1943
http://forums.netpad.net.cn/attachment.php?aid=22913&k=8f6f81cae2772ebaebd32a38c751c81d&t=1779819936&sid=ySMBYv

图片附件: 4.jpg (2014-12-4 10:05, 24.32 KB) / 下载次数 1931
http://forums.netpad.net.cn/attachment.php?aid=22914&k=1f9a4d603f090d6f8a1a3cf717d633c7&t=1779819936&sid=ySMBYv

图片附件: 5.jpg (2014-12-4 10:05, 27.22 KB) / 下载次数 1919
http://forums.netpad.net.cn/attachment.php?aid=22915&k=3939c952b79aa4f685cdbfd5de9b87d3&t=1779819936&sid=ySMBYv

图片附件: 6.jpg (2014-12-4 10:05, 31.1 KB) / 下载次数 1978
http://forums.netpad.net.cn/attachment.php?aid=22916&k=4727ee9020d9ed7baffe5868b4f49e4e&t=1779819936&sid=ySMBYv

附件: html0608.rar (2014-12-3 20:21, 10.25 KB) / 下载次数 3895
http://forums.netpad.net.cn/attachment.php?aid=22917&k=0c000ca31f7a16ed9487f5b6a3f85657&t=1779819936&sid=ySMBYv

作者: xklppp 时间: 2014-12-4 11:29

作花边图案蛮好的：
r=k*ln(|Zr|+|Zi|)

r=k*ln|z|

图片附件: 1.jpg (2014-12-4 21:55, 13.95 KB) / 下载次数 1904
http://forums.netpad.net.cn/attachment.php?aid=22918&k=12351d752f74697a508ba562e0b2bac1&t=1779819936&sid=ySMBYv

图片附件: 2.jpg (2014-12-4 21:55, 15.96 KB) / 下载次数 1935
http://forums.netpad.net.cn/attachment.php?aid=22919&k=8c3e2b9b86bc9e9acce2e0e78b473be6&t=1779819936&sid=ySMBYv

欢迎光临 inRm3D: 画板论坛 (http://forums.netpad.net.cn/)