自绘Mandelbrot集合(三)

摘要

本节给出Java程序代码(JavaScript版本见下节)。目前这个程序运行后只能绘出一个全红的800*600的png格式图像,并存在c:盘的temp文件夹下,名为"image.png"。如果你的c:盘下还没有temp文件夹,就请先创建一下。

题图

​​​六、Java程序代码

本节给出Java程序代码(JavaScript版本见下节)。目前这个程序运行后只能绘出一个全红的800*600的png格式图像,并存在c:盘的temp文件夹下,名为"image.png"。如果你的c:盘下还没有temp文件夹,就请先创建一下。

123

​​​​

七、JavaScript程序代码

要使用HTML内嵌JavaScript程序的朋友则请将下列代码拷贝粘贴到纯文本编辑器中(比如Windows下的Notepad),并存为html文件,可将其命名为“mandelbrot.html”,然后用网络浏览器打开。你应该能看到显示有一个红色的长方形的页面。

456

八、语言相关部分

首先我们解决掉和所使用的计算机语言密切相关,所以在不同语言之间写法很不同的部分。这些部分和Mandelbrot集合的绘制算法其实没什么关系,属于相应语言中的特定知识,我在此只稍微提一下,不作详细解释。

首先是特定的声明,包括Java程序中“// (1)可调参数”前面的那些行,以及HTML文件中不包含在

<script>和</script>之间段落内(即JavaScript程序部分)的那些行,大多属于“如果懂这门语言就必定懂为什么这么写”的内容,不多做解释。除了HTML中的这句

7

​这是可以看作是创建了一块画布挂在网页上,画布的标识号“id”为“image”。我们将要画出来的图像,就是要显示在这块画布上。

然后是两个版本也都有的“(4)程序入口”部分,程序开始运行时就从这里进入,注意到JavaScript版本的入口在JavaScript程序部分的最上方,而Java版本则是从main()函数开始。和具体绘图相关的则是第(3)、(9)、(10)部分。

“(3)图象缓存”部分都是定义了一个图像缓存。两种语言的绘图方式都必须先在缓存中进行,绘完以后才一次性地用“(10)保存图像”中的saveImage()函数表现出来。Java版本的saveImage()函数中的语句

8

​是将图像保存在“c:\temp”文件夹下的image.png文件中,如果把上面语句中的两个“png”都改成“jpg”,那么存成的文件就是jpeg格式的。大家可以按自己喜好决定。而JavaScript版本的saveImage()是将图像缓存内容表现在刚才说到的标识号为“image”的画布上,从而让我们在浏览器上看到画出的图像。

“(9)在图像像素(col, row)处画上颜色rgb”则就是在第四节中提到的点彩画法,呼叫drawColor(col, row, rgb)函数就能在图像缓存的第col列第row行那个像素上点上颜色代码为rgb的颜色。关于以整数表示的RGB颜色代码,我们在谈论调色盘时会作较具体的介绍。特别值得提一句的是,如果仔细看程序代码的话,在两个版本中,当我们宣称是在第row行画点时,我们其实都是在图像缓存的第IMAGEHEIGHT - row - 1行画点。

9

​这是因为在数学习惯上,Y轴的方向朝上,越往上纵坐标越大;而在计算机绘图中,Y轴的方向通常则朝下。所以如果我们真的是在图像缓存的第row行画点的话,画出来的Mandelbrot集合图像会是上下颠倒的。

上述两个版本的特定声明部分,程序入口的第(4)部分以及和具体绘图相关的第(3)、(9)、(10)部分一直到本文结束都不会再变动,我也不再加解释。

九、绘图算法部分

剩下的(1)、(2)、(5)、(6)、(7)、(8)部分则是和Mandelbrot集合的绘制具体相关部分,如果对比两个版本,可以发现它们很相似。只是由于两种语言的对数据类型的处理方式不同,在Java语言中必须显式地说明每个变量,每个函数的参数以及返回值的数据类型(int,double等),而在JavaScript语言中则只须作var和function声明。相信有一定的计算机编程经验,但没有学过这两种语言的读者也容易看懂。

在“ (1)可调参数”部分定义了7个参数,以Java版本为例:

10

​前两个参数先略过,接下去4个参数定义了一个区域坐标,而最后的IMAGEWIDTH则定义了要绘制的图像的宽度即横向像素数。读者可以在任何时候尝试改变这些参数,尤其是试用本文许多插图下的区域坐标定义,来验证是否能绘出和插图一致的区域的图像。

“ (2)计算所得参数”中则计算了一些通过在(1)中的参数所计算得到的参数,比如所绘图像高度,每个像素所代表的在复平面上的正方形的边长等等。COFFSET和ROFFSET被用在下面要介绍的“(6)计算颜色”函数中,它们的计算公式也许对不熟悉这样写法的读者来说有点奇怪:

11

​可其实这无非是在说,如果IMAGEWIDTH是偶数(IMAGEWIDTH % 2等于0的话),那么COFFSET的值就是(IMAGEWIDTH / 2) - 0.5;如果IMAGEWIDTH是奇数,那么COFFSET的值就是

IMAGEWIDTH / 2,但因为这是整数除法,要去掉余数,所以结果其实和(IMAGEWIDTH-1) / 2

相同。

“(5)主程序”部分就是第四节中介绍的点彩绘图原理。两个针对行和列的循环遍历图片上的每个像素,循环体则是两句无比简单的呼叫:

12

​第一句用我们将介绍的(6)中的calcColor()函数来计算每个像素的颜色,再用前面介绍的(9)

drawColor()方法在图像缓存的对应像素上画出计算出来的颜色。两个循环执行后,所有像素都绘制完毕,最后呼叫(10)saveImage()来表现图像。

上面提到的(1)、(2)、(5)部分,除了会变动可调参数的数值外,一直到本文结束也不再改变。

本文中我们将要重大修改的则是剩下的(6)、(7)、(8)部分,当然也是关键。不过目前看起来它们也简单得很。仍以Java版本为例。

13

​首先计算了两个值cx和cy,它们其实就是第col列第row行那个像素所代表的复平面上的正方形的中心点的坐标,计算中用到了前面计算的参数COFFSET、ROFFSET和PIXELSIZE。“有WIDTH长度的线段,其中心点坐标为OX。线段被均匀分成IMAGEWIDTH段,试问第col段的中心点cx是多少?”这是个非常简单的数学问题,我不作详细推导了,只需注意“第n段”的n是从0开始算的,最左边的是第0段。

计算出像素中心点在复平面上的坐标后,我们将用这个坐标代表的复数进行Mandelbrot集合定义中的迭代运算,即呼叫(7)中的iter()函数,然后调用(8)中的调色盘函数来取得对应的颜色。也就是说,这个像素就被它的中心点代表了。

不过目前(7)和(8)中没什么具体的东西,无论cx和cy是什么,最终(6)总是返回十六进制数FF0000,这是红色的颜色代码,所以绘出的图是一片通红。

枯燥的准备工作终于做完,下面我们将逐步填充和修改(6)、(7)、(8)部分,以达到我们绘制Mandelbrot集合图像的目的。注意到上面两个版本的程序的长度都大约是80行,为达到最终程序只有150行的目标,我们只能再填充70行程序。

(待续)

原文链接:http://www.jianshu.com/p/a7e59209f2f0​​​​​

您还未添加分享代码,请到主题选项中,添加百度分享代码!

您可以选择一种方式赞助本站

安安以迁迁

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情