基于ActionScript的极坐标曲线的动态生成方法

黄绍龙 曹建立

摘要：本文以帕斯卡蜗线为例，介绍了在Flash中使用动作脚本动态生成极坐标曲线的方法。

关键词：极坐标方程;帕斯卡蜗线;曲线;动作脚本

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

文章编号：1009-3044（2020）33-0206-03

开放科学（资源服务）标识码（OSID）：

1 引言

高等数学中的一些常见曲线通常以极坐标方程的形式给出。曲线的极坐标方程使用极径和极角的关系来刻画曲线。若能将极坐标方程对应的极坐标曲线的绘制过程动态地显示出来，则学习者可以直观地观察曲线的变化规律和特点。二维动画设计软件Flash中的动作脚本拥有丰富的数学类方法和强大的动画处理机制，非常适合动态生成极坐标曲线并进行演示。

2 计算机图形学绘制极坐标曲线的方法

在计算机图形学中一般采用“化曲为直”的方法实现曲线的绘制。计算机图形软件包通常会提供线段的绘制函数，可以使用小线段逼近的方法实现曲线的绘制。

根据参数极坐标方程，可以由极角计算极径，再由极角和极径将点的极坐标转换为笛卡尔坐标。选择合适的固定步长沿着曲线路径计算曲线上点的坐标，使用这些点作为逼近真实曲线的小线段的端点，逐段连续地绘制小线段可以展示曲线的绘制过程并最终实现曲线的近似表示。

3 利用动作脚本动态绘制极坐标曲线

极坐标方程表示的曲线有很多种，但是使用动作脚本动态生成这些曲线的方法是类似的。帕斯卡蜗线的极坐标方程表示的曲线根据参数取值的不同呈现出不同的形态，特征明显，易于读者进行观察。所以下面以帕斯卡蜗线为例来详细介绍动作脚本动态绘制极坐标曲线的一般方法。这里的后台脚本使用的是ActionScript 2.0版本。

3.1 帕斯卡蜗线的极坐标方程及曲线特点

帕斯卡蜗线的极坐标方程是r= acosθ+b，它表示的曲线具有以下3个特点：

（1）关于极轴对称;

（2）具有周期性，周期是2π。故在一个周期上即可得到完整的曲线;

（3）a和b两个参数在a>b，a=b，a

可以看到，图1中间的图形是心形线，它是蜗形线在参数a=b时的特殊情况;若a比b多的程度越大，则曲线左侧的内环越大，如图1的最左侧图形;若b比a多的程度越大，则曲线左侧边缘相对心形线左侧尖点向外突出，如图1中的最右侧图形。参数a和b的大小关系使帕斯卡蜗线种类有明显的可区分性。

3.2 动作脚本相关知识

1）MovieClip类

（1）使用createEmptyMovieClip方法创建空的影片剪辑;

（2）使用lineStyle方法设置绘制线段的线宽、颜色和透明度;

（3）使用moveTo方法移动画笔到指定点;

（4）使用lineTo方法绘制从当前点到指定点的线段。

2）Math类

（1）使用sin方法和cos方法计算以弧度单位表示的角度的正弦值和余弦值;

（2）使用符号常量PI表示圆周率常数。

3） onEnterFrame事件

曲线在绘制过程中随着时间不断向前生长，如果曲线要能够动态地、均匀地显示整个绘制的过程，那么需要每一步生长后留下固定的时间间隔，刷新显示当前曲线的最新绘制状态。如果没有留下时间间隔，计算机的运行速度很快，曲线瞬间绘制完毕，用户只能看到最终的完整曲线，而绘制的过程无法观察到。时间间隔是留给用户的观察时间，它的原理类似于电视机上放慢镜头。

动作脚本中的onEnterFrame事件每进入一帧就进行检查，可以用来解决时间间隔的问题。将绘图功能定义在onEnter-Frame事件的处理函数中，每进入一帧，绘图参数就增加一个步长，图形就向前生长一段（即绘制一段新的小线段），直到整个曲线绘制完毕。这样一来，图形生长的时间间隔就是帧频倒数个秒的时间。从观察者的角度看，整个曲线动态绘制的过程就被逐渐呈现出来了。

绘制的速度和帧频相关，帧频的值越大曲线的绘制速度越快。曲线的平滑程度和选择的步长相關，步长越小越平滑。在帧频确定的情况下，步长越小绘制的速度越慢。

4）计算机图形坐标系统与几何坐标系统的差别

在几何学中，y坐标轴是竖直向上的，而计算机图形系统的y轴是竖直向下的，这就使得在舞台上绘制出来的图形和几何教科书上的不同，是上下颠倒着的。所以，为了能与常见几何图形保持形态上的一致，计算出来的线段端点不直接作为绘图的参数，而是取纵坐标相反数作为端点坐标进行绘制。

3.3 动作脚本的绘图实现

在Flash文件中设置帧频为24帧/秒，所以每一帧的时间间隔是1/24秒。整个动画只使用一个图层。首先在图层上布置组件：（l）添加两个输入文本框，用来接收用户设置的帕斯卡蜗线的参数a和b的值，将两个输入文本框分别命名为aa和bb;（2）添加一个动态文本框，用来在曲线的绘制过程中实时显示参数θ的当前值（以度为单位），对应的变量名为angle; （3）添加一个按钮，用户通过点击按钮来触发定义在按钮上的onEnter-Frame事件处理函数的绘图功能。然后添加动作脚本如下。

1）第1关键帧上添加的代码是进行必要的初始化操作。

//设置由度单位转换为弧度单位的系数

var per= 180/Math.PI;

//设置一个周期

var two_PI=2*Math.PI;

//舞台上的输入文本框aa、bb分别设置曲线参数。，6的值，默认值是150，60

aa.text= 150; bb.text= 60;

//动态文本框的变量angle显示参数θ的当前度数值，初始值是0

angle=0;

2）添加在按钮上的代码实现极坐标曲线的动态绘制，设置单击按钮动作进行触发。

on （press）{

//设置存储极径、极角、极角步长的变量

var r， theta， dtheta=1/20;

//i卖取输入文本框中设定的参数。和6的值

var a=Number（aa.text），b=Number（bb.text）;

//创建空的影片剪辑n- mc

createEmptyMovieClip（”n—mc”，1）;

///设置影片剪辑左上角在舞台中的位置

n_mc._x= 100; n_mc._y= 200;

//移动画笔到极角为0时曲线对应的笛卡尔坐标位置，即起始点

n_mc.moveTo（a+b，0）;

//设置线型

n_mc.lineStyle （3，Ox000000，100）;

//设置极角的初始值

theta= dtheta;

n_mc.onEnterFrame= function0

{ ，/动态文本框中实时显示当前绘制点对应的极角度数值

angle= Math.floor（per * theta）; //计算当前的极径并将极坐标转换为笛卡尔坐标

r=a*Math.cos（theta）+b;

x=r* Math.cos（theta）;

y=r * Math.sin（theta）;

//绘制曲线的下一条小线段，使其向前生长

this.lineTo（x，-y）;

//绘制一个周期即可得到完整的帕斯卡蝸线

if （theta< two_PI）

{theta+=dthetaj};）

图2显示了参数o= 150，b= 60时的帕斯卡蜗线的动态生成过程，其中theta后面的动态文本框实时显示当前绘制点对应的蜗线极坐标方程中参数θ的值。改变参数a，b的值可以动态生成图1所示的另外两种类型的帕斯卡蜗线。

为了更加直观地比较帕斯卡蜗线在不同参数下的形态，可以将这些不同参数的曲线在同一影片剪辑的不同图层上进行显示。如图3显示了当a以步长20从150变化到10，b保持50不变时所生成的各个帕斯卡蜗线。在逐个绘制的过程中，容易观察出a>b，a=b，a

将上述绘制帕斯卡蜗线的代码中的初始条件和极坐标方程改变后也可以动态绘制其他一些常见极坐标曲线，例如三叶玫瑰线、四叶玫瑰线和螺旋线等曲线，极坐标方程如表1，生成的曲线如图4。为了便于对比，帕斯卡蜗线也列到表1中。

4 结论

本文介绍的曲线的动态生成方法具有一般性，不仅适用于各种常见的极坐标方程表示的曲线，也适用于笛卡尔坐标方程表示的曲线。对于一般的形如y=f（x）的函数曲线，例如y=x2，y= x3，y= sin（x）等函数曲线的绘制上述方法也是可以实现的，只不过每次步长作用在自变量x上，然后计算对应的y值。根据具体的函数进行适当的缩放，可动态生成笛卡尔坐标方程曲线。如图5显示了二次曲线、三次曲线和正弦曲线的绘制效果。

在高等数学的学习过程中，经常会遇到不同坐标系统下的各种曲线方程表示的曲线，还要计算与这些曲线相关的弧长、面积等几何量的值。若能够提前了解这些曲线的形态，特别是对于一些不常见的曲线，利用本文介绍的方法动态生成曲线后将有助于计算的完成。

极坐标方程对应曲线的动态生成具有清晰的直观性，可以作为几何课堂教学的有益补充，同时它的良好的交互性有利于曲线参数改变时对比曲线的几何形态，使学习者加深对知识的理解。

参考文献：

[1] Donald Hearn.Computer Graphics with OpenGL[M].北京：电子工业出版社，2012.2：124-127.

[2]刘孟辉，中文版Flash CS6课堂实录[M].北京：清华大学出版社，2014.

[3]蒋维，胡廷锋.基于动作脚本的交互式动画设计[J].洛阳师范学院学报，2016（11）： 54-56.

【通联编辑：王力】

作者简介：黄绍龙（1980-），男，河南平顶山人，讲师，硕士，从事计算机应用方面的研究。