C语言课程中利用easyX进行算法的可视化教学

2019-12-06尹兰兰磨峰熊水平

软件工程 2019年11期

尹兰兰磨峰熊水平

摘要：C语言课程中有众多的算法，各种算法抽象且难以理解。如果能把幾个重要的算法以具体的图形来呈现，则对于算法的理解掌握更为容易。本文主要介绍了在C语言课程中进行几种算法的可视化图形呈现。具体来说，即在C语言编译环境中安装插件easyX以获得可视化图形。通过几种算法的可视化编程，产生具体直观的图形图像。透过这种算法和图形相结合的形式，激发了学生对学习C语言的热情，同时加深了学生对算法的理解。

关键词：easyX;可视化教学;斐波那契数列;笛卡尔函数

中图分类号：TP399 文献标识码：A

Visual Teaching of Algorithms by Using easyX in the C Language Course

YIN Lanlan，MO Feng，XIONG Shuiping

（College of Computer and Information Engineering，Hechi University，Hechi 546300，China）

Abstract：Many algorithms in C language are abstract and difficult to understand.Several important algorithms will be much easier to understand if presented in specific graphics.This paper describes the visual teaching of the algorithms in C language and proposes to install easyX software in C language compiler environment to obtain the graphics of algorithms.The visual programming of algorithms stimulates students' enthusiasm for learning C language and deepens the understanding of the algorithms.

Keywords：easyX;visual teaching;Fibonacci sequence;Cartesian function

1 引言（Introduction）

C语言是一门面向过程、抽象化的计算机程序设计语言。一直以来，它是高等院校计算机专业必修的一门基础课程[1]。

在这门课程中，算法是最重要的知识点。它被称为是程序设计的灵魂，也是学习编程的必备知识。一个优秀的程序需要高效、清晰的算法，但是，算法并不容易被学生掌握，因为它抽象难懂。如何能让学生快速有效的学习算法？如何能让学生对算法编程感兴趣？如何能增强学生在算法编程中的自主思维和实践创新精神？这一直是学生在学习程序设计过程中遇到的重点和难点问题。

本文作者在实际教学过程中发现，在C语言课程设计中进行算法的可视化教学可以很好地解决上述问题。

如何在C语言中引入可视化学习？作为C语言的图形库， easyX可以很好地完成这样的任务。

2 easyX简介（Brief introduction of easyX）

easyX是C语言进行图形化编程和游戏编程的一种图形库。它主要提供了用于绘制图形的常用函数库及相应的头文件。使用easyX非常简单，只要从官方网站下载安装包，解压，并将其中的lib文件夹和include文件夹下的内容分别拷贝到Visual C++相应的目录下即可开始使用[2]。EasyX库采用动态链接的方式，不会增加任何额外的DLL依赖。

在使用easyX提供的函数前需要使用initgraph（int width，int height，int flag=NULL）来初始化绘图环境，设置显示屏的宽度和高度。结束后使用closegraph（）函数关闭图形环境[3]。

3 算法介绍（Introduction of algorithms）

为了增加C语言课程的趣味性，这里我们设计了三种算法：阶乘（Factorial）、斐波那契数列（Fibonacci sequence）和笛卡尔心形函数。其中前两种算法用到了递归函数。编程语言中，函数Func（Type a，……）直接或间接调用函数本身，则该函数称为递归函数。递归函数不能定义为内联函数。在数学上，关于递归函数的定义如下：对于某一函数f（x），其定义域是集合A，那么若对于A集合中的某一个值X0，其函数值f（x0）由f（f（x0））决定，那么就称f（x）为递归函数。

3.1 阶乘

阶乘派生于排列。比如3个人排队，那么就有3！种排列。一个正整数的阶乘是所有小于及等于该数的正整数的积，并且有0的阶乘为1。自然数n的阶乘可以写作n！。

n！=1*2*3*...*n

5的阶乘可以表示为：5！=5*4*3*2*1。

阶乘的函数可以写成：

int factorial （int x）

{

int y;

if （x<=1）

{

y=1;

}

else

{

y=x*factorial（x-1）;

}

return y;

}

如何才能将阶乘函数用easyX绘制出的图形进行可视化教学？在easyX环境下，绘制图形首先需要找到每个点的位置，即y=factorial（x），对应的坐标点为（x，y）也即（x，factorial（x））。5的阶乘即x的值是5，y的值是factorial（5），计算出数值为

5！=120，所以在x=5时对应的坐标点为（5，120）。依次求出所有点的坐标如下：（0，1），（1，1），（2，2），（3，6），（4，24）。如何将所有的点在easyX环境下连成一条线表示出来呢？我们只需要在相邻的两个点之间画一条直线，用easyX中的line函数可以实现。Line函数用于画直线。它的定义为：

void line （int x1，int y1，int x2，int y2）;

其中，x1为直线的起始点的x坐标;

y1为直线的起始点的y坐标;

x2為直线的终止点的x坐标;

y2为直线的终止点的y坐标。

画出所有的线条，首尾相连，代码如下：

initgraph（30，130）;

for （int i=0;i<5;i++）

{

setcolor（GREEN）;

line（i，factorial（i），（i+1），factorial（i+1））;

Sleep （20）;

}

做出的图形如图1所示。

图1 0—5的阶乘函数图形

Fig.1 Graphics of factorial functions of 0—5

为了获得更好的效果，可以适当调整x、y的参数，并且调整窗口大小，让图形更好地适应easyX的画图环境[4]。例如，y值不变，将x值的参数调整扩大100倍，窗口大小从（30，130）变成（630，730），另外设置颜色为蓝色，x的取值范围为0<=x<=5，代码变为：

line（i*100，factorial（i），（i+1）*100，factorial（i+1））;

画出的图形如图2所示。

图2 X参数调整后的阶乘图形

Fig.2 Factorial graphics with adjusted X parameters

阶乘函数广泛地应用在金融、计算机、建筑等行业。机器学习、AI技术中也有很多阶乘的应用。

3.2 斐波那契数列

斐波那契数列又称为黄金分割数列。它的定义为：F（0）=1，F（1）=1，F（n）=F（n-1）+F（n-2），其中，n>=2。

如果要求5的斐波那契数列，可以这样计算：F（0）=1，

F（1）=1，F（2）=2，F（3）=3，F（4）=5，F（5）=8。它的函数可以写成：

int fibonaci（int i）

{

int y=0;

if（i==0）

{

y=0;

}

else if（i==1）

{

y=1;

}

else

{

y=fibonaci（i-1）+fibonaci（i-2）;

}

return y;

}

要画出它的图形，需要做如上分析：

1.计算每个坐标点的位置，如：（0，1），（1，1），（2，2），（3，3），（4，5），（5，8）。

2.用easyX的line函数将相邻的点画一条直线。

3.将所有的线条收尾相接，画出easyX环境下的曲线。

代码如下：

initgraph（30，130）;

for （int k=0;k<5;k++）

{

setcolor（BLUE）;

line（k，fibonaci（k），（k+1），fibonaci（k+1））;

Sleep （20）;

}

做出的图形如图3所示。

图3 0—5的斐波那契数列图形

Fig.3 Fibonacci sequence graphics of 0—5

这个图形在0—5的x区间值的变化幅度不是很大，画出的图形效果不够明显。为了获得更好的效果，可以适当调整x，y的参数，同时调整窗口的大小从（30，130）变为（630，730），让图形更好地适应easyX的画图环境。例如，将x值的参数调整扩大100倍，y值保持不变，代码变为：

line（i*100，fibonaci（i），（i+1）*100，fibonaci（i））;

画出的图形如图4所示。

图4 X参数调整后的斐波那契图形

Fig.4 Fibonacci figure adjusted by X parameter

图4的图形y值变化不够明显。如何进一步调整y值，使其变化率高一些，不能被忽视？根据计算，x值越大，数列的变化率越大。窗口的高度是730，而斐波那契数列在5这个点的坐标是（5，8），列的值是8，列的变化率可以用下列公式计算出来：

（y2-y1）/（x2-x1）

0—5这6个点列的变化率可以计算出来分别为：0，1，1，2，3，……它同样为一个斐波那契数列。经过计算，将y值的结果向右移9位可以获得变化率更大，更适合easyX窗口的数据。即将代码变为：

line（i*100，fibonaci（i+9），（i+1）*100，fibonaci（i+1+9））;

所画出的图形如图5所示。

图5 X、Y参数调整后的斐波那契数列图形

Fig.5 Fibonacci sequence graphics adjusted by X and Y

parameters

在我们日常生活中，斐波那契数列无处不在。比如松果、凤梨、树叶的排列;某些花朵的花瓣数（如向日葵）;蜂巢;蜻蜓翅膀、超越数e、等角螺线、十二平均律等;在现代物理、准晶体结构、化学等领域也有应用广泛。

以上两种算法在程序设计中都用到了递归函数。为了将上述两个图形画在同一个坐标系中，可以调整代码如下：

initgraph（630，730）;

for （int i=0; i<=5; i++）

{

setcolor（YELLOW）;

line（i*100，factorial（i），（i+1）*100，factorial（i+1））;

setcolor（RED）;

line（i*100，fibonaci（i+9），（i+1）*100，fibonaci（i+1+9））;

Sleep（85）;

}

Sleep（50）;

此處的factorial（）函数和fibonaci（）函数为自己编程实现的C语言函数代码。根据重新调整后的代码，可以获得如图6所示。其中黄色的线为数列函数画出来的，红色的线是斐波那契函数画出来的。

图6 阶乘函数和斐波那契数列图形

Fig.6 Factorial functions and Fibonacci sequence graphics

为了增加学生学习编程的兴趣，我们接下来准备探讨笛卡尔函数的可视化实现。

3.3 笛卡尔心形曲线

笛卡尔是大家都熟悉的著名数学家。他是法国著名的哲学家、物理学家、数学家、神学家。他对现代数学的发展做出了重要贡献。他因为将几何坐标体系公式化而被认为是解析几何之父。在他众多的数学理论中，笛卡尔心形曲线尤为著名，也被称为“学霸的表白”，很多同学对这种心形曲线十分感兴趣。

笛卡尔用运动的观点把曲线看成点的运动的轨迹。笛卡尔函数即笛卡尔心形曲线。心形线即一个圆上固定一点在它绕着与其相切且半径相同的另外一个圆周滚动时所形成的轨迹。它的极坐标表达式可以写成：水平方向r=a（1-cosθ）或r=（1+cosθ）（a>0）;或垂直方向r=a（1-sinθ）或r=a（1+sinθ）（a>0）。它的平面直角坐标表达式分别为：x^2+y^2+a*x=a*sqrt（x^2+y^2）和x^2+y^2-a*x=a*sqrt（x^2+y^20）。为了画出动态图形，需要先根据平面直角坐标的表达式求解出x、y的值，然后进行easyX画图。根据平面直角坐标表达式，获得x、y参数方程为：y=a*（2*cos（t）–cos（2*t）），x=a*（2*sin（t）–sin（2*t）），（0<=t<=2*pi）。根据t的范围，做出对应（x，y）点，然后将所有的点与原点（0，0）直接相连，合理地设置sleep时间，就可以看到动态效果。为了更好地适应easyX画图的窗口大小，这里我们选取了t的范围为[0，720]，x和y同时扩大30倍。具体的程序代码如下。

initgraph（720，730）;

setorigin（360，300）;

setbkcolor（BLUE）;

for （int t=0; t<=720; t++）

{

int a=4;

double x=a*（2*sin（t）+sin（2*t））;

double y=a*（2*cos（t）+cos（2*t））;

line（0，0，x*30，y*30）;

sleep（20）;

}

这段代码的功能是动态地画出笛卡尔心形图形，每间隔20秒画一条线，获得的不同时间点的截图如图7和图8所示。注意，这里截取了不同颜色的图形。图7蓝色的图形是中间过程中的一个瞬间，图8绿色的图形是完整的笛卡尔心形图案。用动态图可以让学生更好地理解算法的过程，增强学习语言及算法的趣味性。