没有合适的资源?快使用搜索试试~ 我知道了~
理论计算机科学电子笔记224(2009)15-25www.elsevier.com/locate/entcs用于创建(不仅是)AnimalScript的Java APIGuidoRüoßling1达姆施塔特工业大学德国达姆施塔特斯蒂芬·梅尔哈斯2达姆施塔特工业大学德国达姆施塔特Jens Pfau3达姆施塔特工业大学德国达姆施塔特摘要生成动画内容可能很乏味,并导致代码“混乱”。我们提出了一个Java API,可用于生成基于脚本的 它被设计成可以扩展到其他输出格式,如SVG或其他脚本语言。 除了描述API的使用外,我们还展示了一个使用API生成的具体示例,以说明API关键词:AnimalScript,API1引言创建AV内容通常是一项缓慢而乏味的工作。自动化此过程可以更快地生成新的动画内容,并且可以重复使用。然而,自动化需要一个底层语言符号,一个(希望设计良好)1电子邮件:roessling@acm.org2电子邮件:s. googlemail.com3电子邮件:jens. gmail.com1571-0661/© 2008 Elsevier B. V.根据CC BY-NC-ND许可证开放访问。doi:10.1016/j.entcs.2008.12.04516G. Rößling等人/理论计算机科学电子笔记224(2009)15API或两者。如果存在的话,这样的功能可以使内容提供者在本文中,我们提出了一个Java API,用于创建动画内容,它使用的主要输出的脚本。 然而,API也可以很容易地扩展到支持其他符号或语言,使其成为许多AV内容生成器的一个有吸引力的工具,包括那些不使用AV系统的AV内容生成器。与之前仅在德语中出现的报告[8]相比,本文提供了有关API及其最近的非正式评估和使用的更多细节在下文中,我们将首先简要描述底层的JavaScript脚本语言。在第3节中,我们将介绍Java API的设计,然后是使用API生成的示例动画。第5节和第6节分别给出了关于将API扩展到其他符号的简要非正式评估和评论。第7节总结了工作,并概述了未来的研究领域2 AnimalScript简介numberS脚本[7]是一种用于编程算法可视化和动画(AV)内容的通用符号。一个NUMBERS脚本或一个非常灵活的放置元素,使用绝对值或一个相对于另一个对象的边界框,文本基线,或一个单独的节点在多边形或三角形。几乎所有的动画效果都可以从一开始就被分配一个相对的开始时间作为一个操作集相关动画步骤和持续时间,可以使用毫秒或动画帧数指定。图1显示了用于Fig. 1.示例一个脚本代码动画对象也可以被给予具体的动画“方法”作为字符串参数,其进一步描述了被动画对象将如何被动画化。 例如,可以为通用的move命令指定一个方法名translateG. Rößling等人/理论计算机科学电子笔记224(2009)1517#2,这将把行为从移动整个对象更改为仅移动对象的第二个节点与所有其他脚本符号类似,numerS脚本可以很容易地使用标准文本编辑器输入。我们最近完成了一个Eclipse插件,用于编辑JavaScript脚本,包括代码辅助和语法错误检查[9]。一个numberS脚本包含了大量的可选组件,命令,这使得编写手工编码的脚本更加容易一个仙女的手稿也可以在执行底层算法时自动转储。然而,就像所有其他基于脚本的方法一样,这很快会导致实际算法的代码混乱。图2显示了一个示例;在这里,实际的算法代码几乎完全被手动生成的可视化代码所掩盖。 可能需要专家才能看出这段代码实际上计算了Shell Sort的步长图二. (Bad)集成的A numerS脚本代码生成在我们提出本文的研究之前,一些内容作者已经认识到这种情况很糟糕,并开发了自己的(专业)“mini-API”。 来处理他们需要的内容。然而,这些API的有限表现力和(有时)它们缺乏良好的软件工程架构阻止了其他内容作者采用这些API中的任何一个。 因此,我们开始开发一个在第3节中,我们将概述此API的基本方法3 AnimalScript API设计Java API的主要设计目标如下:• 提供一种比图2所示更简洁的方法来创建JAVASCRIPT脚本代码,• 提供了一个所有内容生成器都• 使用干净的继承层次结构,适当地使用类和接口• 支持Java API中的JavaScript脚本• 提供扩展API的方法,以便将来添加到A numberS脚本中,18G. Rößling等人/理论计算机科学电子笔记224(2009)15• 以一种合理的方式模拟A numberS脚本中的我们决定使用一个相对较大的Factory类[2],名为“Language”。这个抽象类为创建新对象提供了大量的工厂方法 例如,有一个名为newPoint的方法用于创建一个新的Point对象。 事实上,通常有不止一种方法来创建给定的对象,使用不同的创建参数集。在这种情况下,所有这样的Factory方法通常会映射到一个(抽象)方法。这些方法的具体实现留给Language类的实现子类。很明显,第三个要点的良好软件工程决策也为替代输出语言打开了大门因此,我们决定提供两个“层”的API。外部的抽象层向程序员提供所有感兴趣的函数,但使用底层的内部具体层将函数实际映射到输出命令。 通过这种方式,很容易实现对SVG[1]或XAAL[3]等替代输出格式的支持。输出实例之间的切换是在通过提供一个可能的实现子类创建语言工厂的具体实例时决定的,如清单1所示。清单1:创建新Language实例的示例//生成一新语言例如为内容创作// 参数名称:动画t i t l e, 作者, 宽度,h e i g h t语言郎 = newConcreteLanguage(“快速排序动画“姓名 外来资产的作者“,640,480);//激活步骤控制lang . return(true);3.1阶跃控制用户可以确定是否所有操作都应该按顺序执行,或者是否可以将某些操作分组在一起并并行执行。 这通过分别打开或关闭“步进模式”来实现。如果步骤模式被打开,则必须通过调用类Language中的nextStep方法引入新步骤,该方法也可以传递一个int值,用于连续步骤之间的延迟,以毫秒为单位。一个可选的String参数用于类似于超文本的3.2定义图形对象用于创建图形对象的API基于标准脚本和ITiCSE 2005工作组[ 4 ]的基本上,几乎所有对象都需要以下创建参数:位置、值、名称、显示选项和视觉属性。位置指定对象的位置,可以是绝对位置,也可以是G. Rößling等人/理论计算机科学电子笔记224(2009)1519--相对于其他对象或对象节点。该值取决于对象的类型,例如,对于该类型的对象,可以使用int数组(参见清单2创建一个可视化int数组的例子)。 显示选项可以保留null使用可视化每个声明对象的标准选项。 或者,它可以用来声明对象为隐藏(不可见)或指定一个延迟,在该延迟之后对象应该变为可见。最后,视觉属性描述了对象的外观,如颜色。将在第3.3节中更详细地检查视觉特性。清单2:创建一个新的Graphical Object的示例,这里是一个visual int数组1个//创建一新in t [] o b e c t(w i l l通常e x i s t前)2int[ ]数组内容= newint []1, 三、 七、 五、 2, 六,8,4;3// 参数: 位置, 值,名称, D i spl a y 选择。、 v i s u a l 道具4整数数组阵列 = lang . new IntArray(new 坐标(10,30),5数组内容,“数组“, 无效, aP);API支持大量图形对象:点、正方形、三角形、直角、多边形、直线、折线、圆和椭圆(包括其线段)以及文本元素。 它还支持使用的许多最相关的数据结构 在计算机科学中,如图形、数组和基类型为int的矩阵或String,包括缩进的代码块,具有任意数量指针的列表元素,以及堆栈和队列的三种变体(概念上的,基于列表的和基于数组的)。所有对象都可以通过一个方法调用创建,类似于清单2中的第4-5行。3.3定义视觉属性除了定义图形对象(如清单2所示的IntArray)之外,用户还应该能够定义对象的视觉外观。典型的方法是使用构造函数调用参数,例如传入对象的颜色,或者在创建“基本”对象后显式调用API来设置值对于许多更复杂的对象,由于以下原因,这两种方法都可能很麻烦:• 将具体值传递给构造函数可能会导致糟糕的设计或使用问题。如果所有的值都是强制的,也就是说,只有一个合适的构造函数,那么所需的参数数量可能会变得非常大。例如,清单2中的IntArray使用五个单独的颜色值来定义其轮廓、元素、单元格背景、元素突出显示和单元格突出显示,如果要将用户的注意力吸引到某些元素或单元格,则使用后两个颜色值一个只想创建IntArray的用户现在必须担心五种颜色(加上字体设置等)-或者可能使它们为空,这可能导致其他问题。如果设计者试图通过允许从列表中删除单个颜色来帮助用户,API将很快拥有一个大的不同IntArray数组集合。20G. Rößling等人/理论计算机科学电子笔记224(2009)15这也可能使用户感到困惑。• 用户可以通过调用每种颜色的一个API方法来为前面提到的五种颜色赋值。 这导致了一个相当广泛的API, 许多简单的(和类似的)方法,以及大约六个额外的方法调用,因此,六行Java代码,以获得颜色和字体“正确”。• 前面两种方法都不能轻易重用可视设置。对于第二种方法,用户可以将颜色调整移动到由每个对象调用的单独方法,这些对象希望使用具有相同设置的适当API调用。但是,这对用户来说意味着额外的工作因此,我们决定采用一种更接近于层叠样式表(CSS)的方法。在这里,用户可以定义一次给定的视觉属性组合,然后根据自己的喜好重复使用。例如,要创建10个具有完全相同的视觉设置的文本对象,用户将首先描述视觉属性一次,然后将这些视觉属性作为构造函数参数传递给10个文本对象。清单3给出了如何指定清单2注意,清单3中定义的属性已经在清单2的第5行中使用清单3:将可视属性(这里是数组对象)重写一次1个//创建阵列p r o p e r t i e s与故障值2数组属性AP= 新return();3//重新定义请注意:边境空的,充满的与灰色4AP . s e t(AnimationPropertyKeys.COLOR PROPERTY,Color .BLACK);5AP . s e t(AnimationPropertyKeys.已满物业,true);6AP . s e t(AnimationPropertyKeys.填充属性,Color .GRAY);在创建新的可视属性对象时,如清单3所示,该对象的所有可能属性都设置为默认值。因此,用户只需覆盖他想要调整的那些设置。例如,数组属性实际上包括11个不同的属性。3.4为图形对象一旦一个图形对象被定义,它就可以被动画化。支持的动画方法直接在基础图形对象上调用。动画效果所需的参数取决于所选的效果类型。 但是,它们通常包括以下信息:• 指定给定动画对象的子类型的方法名例如,一个颜色的改变可能涉及数组方法名指定了这些中的哪一个实际上是要改变的;• 相对于当前动画步骤的开始设置的o值,通常为0到G. Rößling等人/理论计算机科学电子笔记224(2009)1521−表示立即开始;• 和持续时间。 时间和持续时间都可以用动画帧来衡量或MS。清单4中的两个示例行显示了数组数组是如何在清单4中定义的2、可以很容易地进行动画制作。第3行将数组中的一个值复制到10个动画帧的前面位置-这样,用户可以轻松地在视觉上跟踪找了第6行突出显示复制的元素,以进一步帮助识别更改的元素。清单4:动画对象(这里是一个数组)1个//副本值在位置我到我1 (“put(where,what)2//这动画具有一持续时间的10帧3阵列。put(i− l,阵getData(i),无效,新ticksTiming(10);45//我爱你位置我−1到指示I t变更6阵列。突出显示Elem(i -l,无效,新ticksTiming(10);4使用Java API生成的示例动画图3显示了生成的动画的示例。 该窗口包含标准一个仙女控制速度和缩放在顶部。 动画可以可以在两个方向上灵活地导航,还包括一个“kiosk模式”,它将逐步显示动画。用户还可以通过输入目标步骤或拖动右下角显示的滑块在动画中向前跳转。覆盖动画显示的窗口包含指定给动画的标签,允许即时访问关联的动画步骤。在这个例子中,我们从第59步开始,开始了前四个数组元素的合并操作,现在已经到了第65步。图3中显示的图形对象包括一个标题的框文本和两个int数组,其定义类似于清单2。用于数组的可视属性与清单3中描述的相同。 数组标记i、j和k直接安装在数组上。它们可以移动到另一个索引(使用无持续时间的示例动画中显示的源代码是使用一组API方法调用创建的。代码缩进可以为每行单独指定。一个NEXTURE将根据所使用的字体计算出实际的缩进 代码行。代码还以可配置的颜色(这里是紫色)突出显示当前代码行。最后,用于赋值和比较次数的两个由于API中没有每当一个赋值或比较22G. Rößling等人/理论计算机科学电子笔记224(2009)15图三. 生成的动画在进行分配或比较时,通过每次将端点移动两个像素来拉伸相关联的框,因为在许多较大的显示器上难以看到将清单5显示了执行合并过程前两部分的具体代码的摘录,此时左子数组和右子数组的已排序元素被复制到临时数组中。 我们并不期望读者完全理解清单中描述的代码,但希望主要方法是可以理解的。在第1行,我们开始一个新的步骤,它也提供了“merge array [l,r]”信息,显示在分配的标签列表中。参数l、r表示当前子数组的边界,而depth表示递归深度,并确定要替换标签的空格数第3-4行(以及清单中的其他几行)调整分配和比较次数的计数器。在第3-4行中,这些是用于第6-12行中for循环的初始化和条件。在循环内部,来自“main”的值G. Rößling等人/理论计算机科学电子笔记224(2009)1523{−−}- -}{- -数组数组被复制到“助手”数组bArray中空参数指示效应瞬间发生,没有持续时间或延迟。第13和25行将当前代码行的显示从第一个循环切换到第二个循环,从第二个循环切换到最后一个循环,如图3所示。清单5:用于MergeSort的代码子集1lang。下一步骤(将MergeLabel(l,r,depth));//使L a b e l23个 增量Nrrrm ();//我 = L在一个一个的福尔l oop(2).//i =m,i<数组。getLength()5//副本第一子 阵列6因为(i) = l ;我 <= m&& 我 < 阵getLength(); i++)7bArray。把(1 1,阵getData(i),无效,null);//复制8个增量Nrrrm ();//计数作为一操作9bArray。 unhighlightElem(i我,无效,null);//unhighlight10个增量Nrrrm ();//I++ 在为l oop11incrementNr比较(2);//比较在f或loop1213号密码 toggleHighlight(“c op y Le f ts i d e“,” copyRightside ” )14lang . return();变化s t ep1516incrementNrint();//J =m+ 1定会 大 吃17次 增量Nr比较 ();//J <= R在f或回路18因为(j) =m+ 1个;j = r ;j ++) //副本二 子阵列19bArray。put(r + m +1)l,阵getData(j),无效,null);20个增量Nrrrm( )的情况下;21bArray。unhighlightElem(r + m+1 j我,无效,null);22个增量Nrrrm( )的情况下;23次增量Nr比较( )的情况下;2425号密码 toggleHighlight(“copyRightside“,” loop ” )26郎。 return();下s t ep:合并在l oop5API评估本文介绍的API目前被大约120个不同的算法动画内容生成器使用公平地说,这些生成器中的许多只是细微差别,例如用于文本输出或程序代码的语言(例如,Java与伪代码)。这些生成器中大约有45个以前使用了类似于图2中的“交织”代码的生成方法将这些更改为API代表了相当多的工作,但绝对有用,因为修改后的代码现在更可读,也更短。在2008年的夏季学期,一组学生在一个关于算法可视化的实验室中使用JavaAPI大多数学生没有经历过24G. Rößling等人/理论计算机科学电子笔记224(2009)15使用Java API时出现的任何问题,超出了最初的熟悉阶段。剩下的大多数投诉要么是关于API中的小错误(通常在两天内得到解决),要么是缺乏对某些特殊需求的支持。 我们的学生声称,API基于我们在Anumerical主页[5]在“下载”下在夏季学期,我们收到了一套关于20个新的内容生成器,用于不同的算法,如Gnome Sort,Pascal Triangle构造(具有用户指定的构造深度),以及用户提供的两个单词的Levenshtein Matrix6将API扩展到其他输出语言将API扩展到其他输出语言非常容易。程序员首先为新的输出语言创建一个新的Java包。然后必须创建和实现抽象语言工厂的新的基础工厂实现。像Eclipse这样的工具可以通过自动填充必须实现的方法来提供帮助;这是3.2节中列出的对象的一组26个工厂方法。Factory方法的实现通常需要创建额外的类来表示所创建的对象,例如在SVG中表示int[]的SVGIntArray。这个类只需要将现有的IntArray对象映射到SVG;它不需要提供数组的任何内部表示或其他目前,Java脚本语言的实现由30个Java类组成,总共有6,336行(包括所有的空行、注释、包和导入语句)。到目前为止,最大的类是基本Factory类,大约有900行,其中许多是空白的(87行),或者包含import(90行)语句或JavaDoc注释(344行)。当我们也忽略方法的声明时,实际代码只剩下不到300行7总结和今后的工作我们已经介绍了基本的设计和使用的A numberS脚本Java API。API在将算法与可视化代码分离方面有很大的帮助一旦程序员理解了视觉属性的概念,它就很容易使用,并且表现力很强。使用API的一个很好的起点(除了本文)是API的PDF和Javadoc文档,可以在[5]的“文档”链接下在未来,我们希望将API扩展到其他输出语言,特别是ITiCSE 2005工作组定义的XML代码[4],也用于XAAL系统[3]。其他目标格式包括SVG,XAAL[3]和潜在的SVG(用于Adobe Flash)。我们也希望将API提供给任何感兴趣的人;它可以免费下载[5]。这尤其关系到AV内容创作者和其他系统的作者,他们可能有兴趣采用G. Rößling等人/理论计算机科学电子笔记224(2009)1525API。引用[1] Ferraiolo,J.,可缩放矢量图形(SVG)1.1规范,http://www.w3.org/TR/SVG(2003)。[2] 伽马,E.,R.赫尔姆河Johnson和J.Vlissides,“设计模式。可重用面向对象软件的元素,[3] Karavirta,V.,XAAL - Extensible Algorithm Animation Language(可扩展算法动画语言)赫尔辛基理工大学计算机科学与工程系硕士[4] 纳普斯,G. Rüoßling,P. 布鲁西尔·奥夫斯克·伊,J。英语,D。Jarc,V. 卡尔维尔塔角 Les ka,M.McNall y,A. 莫雷诺,R. J. 罗斯和J。Urquiza-Fuentes,开发基于XML的工具以支持用户与算法可视化的交互,SIGCSEBulletin inroads36(2005),pp.123-138[5] R?oßling,G., ANOMINALHomePage,WWW:http://www.algoanim.info/Animal2(2008).[6] R?oßling,G.,“A number-F arm:An Extensible Frame Work for AlgorithmVisualization,”VDM V erlag Dr. Müller,2008.[7] R?oßling,G., F. Glies che,T. 我也是。此外,增强脚本使用的扩展性A numerousCRIPTV2,in:Proceedings of the Third Program Visualization Workshop,University ofWarwick,UK,2004,pp. 15比19[8] R? oßling, G., S. Mehlhase和J. Pfau, Java-basierteErste llungvonAltensemanimatione n, in :Proceedings der Pre-Conference Workshops der 5. e-Learning Fachtagung Informatik ( DeLFI2007)(2007),pp. 七十七比八十四[9] R?oßling,G. 和P. S chr oeder,Animalse-AnEclipse PluginforANOMINALSCRIPT,in:第五次程序可视化研讨会的P roceedings,Universidad Rey Juan Carlos,Madrid,Spain,2008,p.
下载后可阅读完整内容,剩余1页未读,立即下载
cpongm
- 粉丝: 4
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功