The E-Learning Environment Development in C-shaped Fractal Graphics Programming

Fucheng You Information & Mechanical Engineering School

Beijing Institute of Graphic Communication Beijing, China

youfucheng@yahoo.com.cn

Yeli Li Information & Mechanical Engineering School

Beijing Institute of Graphic Communication Beijing, China

lily@bigc.edu.cn

Abstract—when introducing the design of fractal C-shaped graphics, the traditional method is to give fixed graphics in black

color. In this paper, a new learning environment of C-shaped fractal graphics based on E-Learning is proposed,

development of which is also introduced in detail. In this new learning environment, students can repeat drawing the

colorful C-shaped fractal graphics which may arouse the students’ interests and attract their attentions. The iterated depth

of C-shaped fractal graphics can be increased or decreased through the learning environment. When increasing, the fractal

limitation or fixed point can be seen. By this new learning environment, it is very easy for students to grasp the fractal

graphics concepts and the programming procedure of fractal graphics, and understand the generation procedure and

structure of C-shaped fractal graphics.

Keywords-E-Learning; C-shaped fractal graphics; colorful graphics; iteration

分形 C 曲线图形程序设计中 E-Learning 环境的开发

游福成 1，李业丽 2

1.北京印刷学院信息与机电工程学院，北京，中国，102600

2.北京印刷学院信息与机电工程学院，北京，中国，102600

1. youfucheng@yahoo.com.cn, 2. lily@bigc.edu.cn

【摘要】传统的方法在介绍 C 形分形图形设计知识时，只给出单一颜色的图形，图形的结构也是固定的。本论文开发了基于 E-Learning 的 C 形分形图形学习环境，学生可以在该环境中反复操作得到彩色的分形图形，既可以以同一的彩色线条显示，也可以是不同的随机颜色的彩色线条显示，有利于引起学生的兴趣和注意力；分形图形的迭代深度可以增加，也可以减少，但增加的时候可以演示分形图形的极限及不动点的情形，这有利于学生学习分形图形概念，以及分形图形的程序设计过程，理解分形图形的生成过程及图形的结构。

【关键词】E-Learning；C 形分形图；彩色图形；迭代

1 引言 E-learning 是指通过计算机网络或多媒体等数字化内

容形式进行的学习和教学活动，它充分利用现代通信技

术、计算机网络技术、多媒体技术、虚拟现实技术等现

代信息技术所提供的、具有全新沟通机制与丰富教育资

源的学习环境，从而实现一种全新的学习方式[1]。 学习环境研究是 E-learning 系统研究的主要内容。根

据建构主义学习理论，在 E-learning 中，学习环境研究的

内容包括学习情景设计、人机交互技术、学习行为分析

等[2]，其目标是构建一个更加适于数字学习的网络学习

环境。 E-learning 通常需要借助一个 E-learning 系统或环

境，通过精心设计的网络课程、学习资源、学习工具来

完成。作为一个计算机应用，E-learning 系统的业务领域

是学习，因此 E-learning 系统设计必须符合先进的学习理

论，体现人类的认知规律，适应个性化的学习需求。 E-learning 是一项综合性的研究，它涉及心理学、教

育学、信息技术等多个研究领域。学习是 E-learning 的主

体，信息技术只是一种支持学习的技术手段。学习和技

978-1-4244-7255-0/11/$26.00 ©2011 IEEE

术是 E-learning 研究中两个永恒的主题，实现技术和学习

理论的更好融合是一个 E-learning 系统的最终目标。 马斯洛·罗杰斯对学习的研究较多，他把学习分成

无意义学习和意义学习两种[3]。无意义学习是指那种仅

仅涉及知识累积的学习，与学习者没有个人意义。意义

学习是指个体的行为、个性以及未来选择行动方针时发

生变化的学习[4]。 分形图形是计算机图形学的一个重要分支。传统的

计算机图形学没有考虑颜色变化，只是使用默认的颜色

将图形最终结果直接画出，图形固定无变化，学生对分

形图形程序的理解比较困难，对分形图形结构的生成过

程的理解难以把握。 按照 E-Learning 及学习理论的要求，应该把无意义

的学习变成有意义的学习。因此，本论文中首先在程序

中增颜色显示的控制代码，将 C 形分形图形以不同的颜

色画出，因为人眼对色彩变化敏感，容易引起学生的兴

趣；其次，由浅到深、循序渐进的引导学生的注意力和

思考，要在颜色及迭代次数的动态变化中掌握 C 形分形

图形的结构变化发展规律，提高学生对知识的探究的欲

望。

2 分形 C 曲线图形原理 C 形分形曲线原名叫 Levy 曲线，是法国数学家 Paul

Levy 构造的，其形状像一个躺着的大写 C 字母，所以人

们称之为 C 曲线[5]。 分形是一些简单空间上的一些“复杂”的点的集

合，这种集合具有某些特殊性质，首先它是所在空间上

的紧致子集，并具有以下典型的集合性质： (1)分形都具有任意小尺度下的比例细节，或者说它

具有精细的结构。 (2)分形集不能用传统的几何语言来描述，它既不是

满足某些条件的点的轨迹，也不是某些简单方程的解

集。 (3)分形具有某种自相似的形式，可能是近似的自相

似或者统计的自相似。 (4)大多数情况下，分形集由非常简单的方法定义，

可能以变换的递归迭代方式产生。 所谓递归，就是在函数体内使用语句调用它自己。

当函数调用自己是，新的局部变量和参数会在堆栈中分

配存储单元，函数代码则以新变量开始执行。在计算机

图形图案设计中，利用递归方法和随机函数可以设计出

许多美丽的、令人惊异的图案。 C 形分形图的递归算法原理如下： C 形分形图的递归算法原理如下： Step1：先画一条直线（如图 1（a））; Step2：从该直线的两个端点做射线以 900 的夹角相

交，形成等腰直角三角形（如图 1（b））； Step3：然后以两条直角边为底边分别向外支起两个

900的交，形成两个等腰直角三角形（如图 1（c））。

(a) n=0

(b) n=1

(c) n=2

(d) n=3

(e) n=5

(f) n=8

Figure 1. Construction Procedure of C-shaped Fractal Graphics 图 1 C 形分形图的构造过程

Step4：重复 Step2 和 Step3，直到完成预定的递归

深度为止。 当递归深度达到一定的次数，就可以得到 C 形分形图形

（如图 1（f））。

3 基于 C#实现的 C 形分形图形程序设计 本论文中 C 形分形曲线采用递归生成算法，采用 C#

语言编程实现生成。 （1）在类的定义中声明一组变量 public float x1; public float y1; public float x2; public float y2; public int n; （2）在构造函数中初始化 n = 0; x1 = 150;

Help-information：Identify applicable sponsor/s here(sponsors)

y1 = 150; x2 = 400; y2 = 150; （3）定义 C 形分形曲线生成函数 fractal_c()

private void fractal_c(int n,float x1,float y1,float x2,float y2) 1 { 2 Graphics g = pictureBox1.CreateGraphics(); 3 Random rand = new Random(); //随机颜色 3 Pen mypen = new Pen(this.BackColor,1); 4 pen.Color = Color.FromArgb(0, 0, 0); 5 float x3, y3; 6 if (n>0) 7 { 8 x3 = (x1 + y1 + x2 - y2) / 2; 9 y3 = (x2 + y2 + y1 - x1) / 2; 10 fractal_c(n - 1, x1, y1, x3, y3); 11 fractal_c(n - 1, x3, y3, x2, y2); 12 g.DrawLine(mypen, x1, y1, x2, y2); 13 } 14 }

由上述 C#代码，可以得到传统的分形图形（递归深

度 n=10）如下图 2：

Figure 2. Conventional C-shaped Fractal Graphics

图 2 传统的 C 形分形图形

4 C 形分形图形的 E-Learning 环境开发

Figure 3. Interface of E-Learning environments for C-shaped fractal

Graphics

图 3 C 形分形图形的 E-Learning 环境界面

从上述内容可知，传统的 C 形分形图形设计与实现

存在以下问题：颜色单一，只是黑色，不能引起注意和

兴趣；界面没有交互，没有过程，只有最终的图形结

果，不利于分形图形的学习。本论文从线条颜色、界面

的交互性、分形图形的生成过程显示等几个方面对传统

的方法进行改进，以建立 C 形分形图的 E-Learning 学习

环境。界面分成三大功能部分：传统的单一颜色显示分

形图形，但增加了分形图形的递归深度的增加和减少对

比功能；多种颜色之一，即分形图形可以统一的随机颜

色显示图形；多种颜色之二，即即分形图形可以以随机

颜色显示图形。最终界面如图 3 所示，右边为功能区，

左边为显示图形区。

4.1 递归层次与图形动态变化关系

对于界面上的“SingleColor”及“Multi-Color”功能

区，都增加了“Increase”、“Decrease”按钮，实现分

形图形的递归深度的增加和减少，可以动态地看到分形

图形的构建过程，体会分形图形的动态变化过程。 对于“Increase”按钮，在按钮的单击事件中添加一

行代码：n=n+1；对于“Decrease”按钮，在按钮的单击

事件中添加一行代码：n=n-1。

4.2 彩色线条生成

4.2.1 一种固定彩色颜色显示图形 只要将上述代码中的第 4 条语句改为： pen.Color = Color.FromArgb(0, 0, 255); 此语句表示 C 形曲线线条颜色为蓝色，不论递归的

深度为降低（如图 4）还是增加（如图 5），图中的 n 表

示递归的深度。

Figure 4. Blue C-shaped fractal graphics when n=8

图 4 蓝色 C 形分形曲线（n=8）

Figure 5. Blue C-shaped fractal graphics when n=12

图 5 蓝色 C 形分形曲线（n=12）

4.2.2 所有线条一种随机颜色显示图形 在上述代码的第 2 行后面加上一条语句： Random rand = new Random(); 在第 12 条语句之前加上如下语句即可： mypen.Color = Color.FromArgb(rand.Next(0, 255),

rand.Next(0, 255), rand.Next(0, 255));

Figure 6. C-shaped Graphics by color line (1)

图 6 彩色线条画出的 C 形图形（1）

4.2.3 所有线条不同的随机颜色显示图形 在上述代码的第 2 行后面加上一条语句： Random rand = new Random(); 把第 4 条语句改为：

mypen.Color = Color.FromArgb(rand.Next(0, 255), rand.Next(0, 255), rand.Next(0, 255));

Figure 7. Colorful C-shaped fractal graphics when n=11

图 7 当 n=11 时的彩色 C 形图形

4.3 分形图形极限的演示

Figure 8. Colorful C-shaped fractal graphics when n=13

图 8 当 n=13 时的彩色 C 形图形

Figure 9. Colorful C-shaped fractal graphics when n=19

图 9 当 n=19 时的彩色 C 形图形

分形图形是有极限的。从图 7、图 8 及图 9 可以看

出，随着迭代次数的增加，C 形分形图形的外形、大小

范围基本不变，即分形存在一个极限，也就是不动点。

显然动态的演示要比纯粹的分形图形极限理论讲述要直

观的多。 从以上分析可知，按照 E-Learning 及学习理论的要

求，本论文中首先在程序中增颜色显示的控制代码，将

C 形分形图形以不同的颜色画出，因为人眼对色彩变化

敏感，容易引起学生的兴趣；其次，由浅到深、循序渐

进的引导学生的注意力和思考，要在颜色及迭代次数的

动态变化中掌握 C 形分形图形的结构变化发展规律，通

过 C 形分形图形的极限演示，提高学生对知识的探究的

欲望，把无意义的学习变成有意义的学习，必定会提高

学习效率。

致谢

本论文得到北京市属高等学校人才强教计划资助项

目（项目编号：PXM2010_014223_095557）的支持，特

此表示感谢。

References (参考文献) [1] Andrea Kienle, Martin Wessner. The CSCL community in its first

decade: development, continuity, connectivity. Computer-Supported Collaborative Learning. 2006, P9-13.

[2] Darina Dieheva & Christo Diehev. Authoring educational topic maps-can we make it easier. Fifth IEEE International Conference on Advanced Learning Technologies 2005. Taiwan, China, 2005, P216-218.

[3] Liang Fang Shi. Theory of Learning [M]. Beijing: People Education Press, 2001, P57-62.

[4] Xing Wei Hao. Research on ontology Based E-learning System. Doctor Degree Paper, Shandong University, 2007, P41-46.

[5] Bowen Sun. Fractal algorithms and programming: realized by Java. Beijing: Science Press, 2004, P 47- 49.