基于HTML5的混沌系统的数字化实现

丘嵘+谭德

摘 要： 为产生伪随机数字混沌序列，提出了一种新的混沌系统数字化实现方法，该方法采用HTML5技术实现连续混沌系统的离散和迭代运算；基于数字混沌序列和线性插值算法实现了混沌吸引子相图、时间序列的绘制。该方法具有跨平台使用特性、本地储存特性和渲染模式，为把混沌技术的应用植入浏览器提供了可能，该方法可应用于多平台共享的混沌信息加密、混沌演示、混沌性能测试等领域。

关键词： 混沌； 数字实现； 超文本标记语言； 跨平台

中图分类号： TN401?34 文献标识码： A 文章编号： 1004?373X（2014）13?0050?03

Digitalization of chaotic system based on HTML5

QIU Rong1， TAN De2

（1. Guangdong Institute of Science and Technology， Guangzhou 510640， China；

2. School of Electronics Information， Hangzhou Dianzi University， Hangzhou 310018， China）

Abstract： In order to generate pseudo random and digital chaotic sequences， a new method for implementing the digitalization of chaotic system is proposed in this paper. HTML5 technology is used in this method to implement discretization and quantization operations of continuous chaotic system. The drawing of phase diagram and time series for chaotic attractor is implemented based on the digital chaotic sequences and linear interpolation algorithm. The proposed method possesses the properties of cross platform use， local storage and the render mode， which provides a possibility of implant the chaos technology application to browser. The method can be used in the fields of chaotic information encryption， chaos demo， chaos performance test and so on.

Keywords： Chaos； digital implementation； HTML； cross platform

0 引 言

HTML5（Hypertext Markup Language）是新一代的超文本语言。HTML5草案的前身名为Web Applications 1.0，于2004年被 WHATWG（Web Hypertext Application Technology Working Group，Web 超文本应用技术工作组）提出，于2007年被 W3C （World Wide Web Consortium，万维网联盟） 接纳，目前，HTML5还未成为正式的HTML标准，但已获得IE9，Chrome，Firefox，Safari，Opera等主流浏览器的支持。相对与HTML4，HTML5引入了绘图控制、本地存储、多线程、地理位置信息等新特性。HTML5具有跨平台使用的特性，HTML5已开始被用于PC、iPad、智能电视、智能手机等平台[1?4]。

目前，鲜有利用HTML5实现混沌映射的报道。运用HTML5能实时的对混沌相图、时间序列进行绘制，便于观察混沌映射特性。本文运用HTML5技术，通过算法分析，实现了变参数Lorenz混沌系统，并实现了混沌相图、时间序列的绘制。介绍了点插值、线插值绘图算法，并比较了两种算法绘制相图的效果。分析了混沌系统HTML5实现的优良特性，并对应用前景进行了预测。

1 混沌系统的HTML5实现

选择下面的混沌系统[5]为例，说明基于HTML5实现连续混沌系统的方法：

[dxdt=a（y-x）dydt=cx-y-xz+udzdt=xy-bzdudt=1-d（xz-y）] （1）

当[a=10，][b=2，][c=28，][d=0.1]时，系统处于超混沌状态。

系统采用MVC（Model View Controller）架构实现，利用HTML5搭建模型（Model），采用CSS3实现视图（View）显示，运用Javascript实现绘图控制（Controll）。HTML5提供了Canvas技术实现绘图控制，Canvas就是一块画布，这块画布能运用Javascript技术进行绘图。

利用Euler公式：

[dxdt=limτ→∞xn+1-xnτ] （2）

对系统进行离散化处理，得：

[xn+1=xn+τ（a（yn-xn））yn+1=yn+τ（cxn-yn-xnzn+un）zn+1=zn+τ（xnyn-bzn）un+1=un+τ（1-d（xnzn-yn））] （3）

混沌运算的结果映射至平面，为一个由[x，y，z]组成的点集合，记为[P（x，y）。]Canvas只能绘制值域落在坐标轴第一象限的数据，位于第一象限外的数据会被截断。因此，需要利用坐标变换将[P（x，y）]变换至Canvas画布中。定义画布的大小为[Csize（w，h），]其中[w]为宽度，[h]为高度，则变换的过程可表示为：

[P（x，y）→x=ax+by=cx+dP（x，y）x∈（0，w），y∈（0，h）]

混沌相图、时间序列是多次迭代的结果。为了实现迭代运算，引入了一个定时器，定时时间为10 ms。定时器依据定时时间，触发混沌运算函数实现迭代运算。

利用JavaScript编程实现迭代算法。首先，对混沌映射进行初始化。初始化完成后，利用定时器将绘图周期设置为10 ms，即10 ms刷新一次绘图。迭代运算的实现是通过设置全局变量实现的，每次仅迭代一次，迭代周期就是绘图刷新的周期。

JavaScript脚本捕获到页面的事件，就调用setMethod（）函数设置绘图方法。在draw（）方法中，调用getMethod（）获取绘图方法，判断绘图的类型。如果是绘制相图，则调用绘制相图的相应代码；如果是绘制时间序列，则调用绘制时间序列的相应代码。最后，调用Canvas提供的绘图函数进行绘制。

2 点插值和线插值绘图

相图和时间序列的绘制，可以采用点插值或线插值方法进行绘制。混沌运算的结果可以表示为形如[X={p0，p1，…，pn-1，pn}]的点集合。

记绘图方法为[D，]则点插值绘图可以表示为：

[n=0∞D（pn）] （4）

调用Canvas中Context对象的arc方法可以实现点插值。

记相邻两点坐标分别为[pn-1（xn-1，yn-1），][pn（xn，yn），]采用直线进行拟合，则插值的轨迹可表示为：

[y-yn-1=yn-yn-1xn-xn-1（x-xn-1）]

线插值绘图可以表示为：

[n=0∞D（pn（xn，yn））]

调用Canvas中Context对象的moveTo和lineTo方法可以实现线插值，线插值绘图的关键代码如下所示：

context.moveTo（vx，vy）；

chaos （）； //变参数系统迭代函数

context.lineTo（vx，vy）；

基于Chrome浏览器，利用两种插值算法，对混沌相图进行绘图，效果如图1所示。由图1可以看出，相对于点插值算法，线插值算法具有更好的平滑特性。如果引入曲线拟合，增加插值的点，能实现更好的绘图效果。

图1 两种算法绘制的相图

3 特性分析

跨平台是HTML5的优良特性。采用HTML5编写的程序，不需要做任何修改即可跨平台使用。目前，PC、智能电视、智能手机、iPad都支持HTML5。图2是变参数混沌系统在PC平台和Nokia N9手机（模拟器仿真）平台实现的效果图，其实现代码没有做任何修改。

图2 时间序列跨平台效果

信息加密是混沌运算的应用之一，HTML5支持本地存储，如果将混沌映射的HTML5实现与本地存储特性相结合，那么可以设计一个“一次编程，多平台使用”的文件加密应用。

HTML5的渲染效果能提供良好的用户体验，利用其渲染模式可以获得优美的运行效果，如构建一个用于演示的混沌系统，可应用于教学或其他一些需要展示混沌吸引子的领域。

定时器每隔10 ms运行一次混沌运算，而运算的结果是不断迭代更新的值。因此，每隔10 ms可以获取一组数据。由于时间足够短，可以认为数据的获取是实时的。数据的实时获取，为利用混沌HTML5实现、研究混沌整体性能提供了可能。

4 结 语

本文提出了一种利用HTML5技术实现连续混沌系统的方法，除获得伪随机混沌序列外还可实现混沌相图、时间序列的绘制。通过对比点插值绘图和线插值绘图的效果，说明了线插值绘图能获得更好的平滑特性。从跨平台、本地存储等特性分析，说明了混沌映射HTML5实现的优点以及应用的可能性。混沌HTML5实现技术在信息加密、混沌演示、混沌性能测试等方面具有广阔的应用前景。

参考文献

[1] TAIVALSAARI A， SYSTA K. Cloudberry： HTML5 cloud phone platform for mobile devices [J]. IEEE Software， 2012，29（4）： 40?45.

[2] BAKKER A， PETROCCO R， DALE M， et al. Online video using bittorrent and HTML5 applied to Wikipedia [C]// 2010 IEEE Tenth International Conference on Peer?to?Peer Computing （P2P） Netherlands： IEEE， 2010： 1?2.

[3] XIE Yue. Transmission and display technology for vital signs based on HTML5 canvas and COMET mechanism[C]// 2011 International Conference on Computer Science and Network Technology. Harbin， China： ICCSNT， 2011： 2760?2763.

[4] XU Zhuo?kui， ZHU Jian?jun. Research of WebGIS based on HTML5 and JSON [C]// 2011 International Conference on Computer Science and Network Technology Harbin， China： ICCSNT， 2011： 1714?1717.

[5] 谭德，王光义.改进超混沌系统PN序列的SOPC实现[J].杭州电子科技大学学报，2012，32（3）：1?4.

[6] 宋福圣，韩希昌，迟新利.基于Lorenz超混沌系统模糊渐近同步的保密通信系统[J].现代电子技术，2012，35（7）：111?113.

[7] 邓奎彪，禹思敏.一类混沌系统的动态输出反馈控制[J].现代电子技术，2012，35（2）：67?71.

[P（x，y）→x=ax+by=cx+dP（x，y）x∈（0，w），y∈（0，h）]

混沌相图、时间序列是多次迭代的结果。为了实现迭代运算，引入了一个定时器，定时时间为10 ms。定时器依据定时时间，触发混沌运算函数实现迭代运算。

利用JavaScript编程实现迭代算法。首先，对混沌映射进行初始化。初始化完成后，利用定时器将绘图周期设置为10 ms，即10 ms刷新一次绘图。迭代运算的实现是通过设置全局变量实现的，每次仅迭代一次，迭代周期就是绘图刷新的周期。

JavaScript脚本捕获到页面的事件，就调用setMethod（）函数设置绘图方法。在draw（）方法中，调用getMethod（）获取绘图方法，判断绘图的类型。如果是绘制相图，则调用绘制相图的相应代码；如果是绘制时间序列，则调用绘制时间序列的相应代码。最后，调用Canvas提供的绘图函数进行绘制。

2 点插值和线插值绘图

相图和时间序列的绘制，可以采用点插值或线插值方法进行绘制。混沌运算的结果可以表示为形如[X={p0，p1，…，pn-1，pn}]的点集合。

记绘图方法为[D，]则点插值绘图可以表示为：

[n=0∞D（pn）] （4）

调用Canvas中Context对象的arc方法可以实现点插值。

记相邻两点坐标分别为[pn-1（xn-1，yn-1），][pn（xn，yn），]采用直线进行拟合，则插值的轨迹可表示为：

[y-yn-1=yn-yn-1xn-xn-1（x-xn-1）]

线插值绘图可以表示为：

[n=0∞D（pn（xn，yn））]

调用Canvas中Context对象的moveTo和lineTo方法可以实现线插值，线插值绘图的关键代码如下所示：

context.moveTo（vx，vy）；

chaos （）； //变参数系统迭代函数

context.lineTo（vx，vy）；

基于Chrome浏览器，利用两种插值算法，对混沌相图进行绘图，效果如图1所示。由图1可以看出，相对于点插值算法，线插值算法具有更好的平滑特性。如果引入曲线拟合，增加插值的点，能实现更好的绘图效果。

图1 两种算法绘制的相图

3 特性分析

跨平台是HTML5的优良特性。采用HTML5编写的程序，不需要做任何修改即可跨平台使用。目前，PC、智能电视、智能手机、iPad都支持HTML5。图2是变参数混沌系统在PC平台和Nokia N9手机（模拟器仿真）平台实现的效果图，其实现代码没有做任何修改。

图2 时间序列跨平台效果

信息加密是混沌运算的应用之一，HTML5支持本地存储，如果将混沌映射的HTML5实现与本地存储特性相结合，那么可以设计一个“一次编程，多平台使用”的文件加密应用。

HTML5的渲染效果能提供良好的用户体验，利用其渲染模式可以获得优美的运行效果，如构建一个用于演示的混沌系统，可应用于教学或其他一些需要展示混沌吸引子的领域。

定时器每隔10 ms运行一次混沌运算，而运算的结果是不断迭代更新的值。因此，每隔10 ms可以获取一组数据。由于时间足够短，可以认为数据的获取是实时的。数据的实时获取，为利用混沌HTML5实现、研究混沌整体性能提供了可能。

4 结 语

本文提出了一种利用HTML5技术实现连续混沌系统的方法，除获得伪随机混沌序列外还可实现混沌相图、时间序列的绘制。通过对比点插值绘图和线插值绘图的效果，说明了线插值绘图能获得更好的平滑特性。从跨平台、本地存储等特性分析，说明了混沌映射HTML5实现的优点以及应用的可能性。混沌HTML5实现技术在信息加密、混沌演示、混沌性能测试等方面具有广阔的应用前景。

参考文献

[1] TAIVALSAARI A， SYSTA K. Cloudberry： HTML5 cloud phone platform for mobile devices [J]. IEEE Software， 2012，29（4）： 40?45.

[2] BAKKER A， PETROCCO R， DALE M， et al. Online video using bittorrent and HTML5 applied to Wikipedia [C]// 2010 IEEE Tenth International Conference on Peer?to?Peer Computing （P2P） Netherlands： IEEE， 2010： 1?2.

[3] XIE Yue. Transmission and display technology for vital signs based on HTML5 canvas and COMET mechanism[C]// 2011 International Conference on Computer Science and Network Technology. Harbin， China： ICCSNT， 2011： 2760?2763.

[4] XU Zhuo?kui， ZHU Jian?jun. Research of WebGIS based on HTML5 and JSON [C]// 2011 International Conference on Computer Science and Network Technology Harbin， China： ICCSNT， 2011： 1714?1717.

[5] 谭德，王光义.改进超混沌系统PN序列的SOPC实现[J].杭州电子科技大学学报，2012，32（3）：1?4.

[6] 宋福圣，韩希昌，迟新利.基于Lorenz超混沌系统模糊渐近同步的保密通信系统[J].现代电子技术，2012，35（7）：111?113.

[7] 邓奎彪，禹思敏.一类混沌系统的动态输出反馈控制[J].现代电子技术，2012，35（2）：67?71.

[P（x，y）→x=ax+by=cx+dP（x，y）x∈（0，w），y∈（0，h）]

混沌相图、时间序列是多次迭代的结果。为了实现迭代运算，引入了一个定时器，定时时间为10 ms。定时器依据定时时间，触发混沌运算函数实现迭代运算。

利用JavaScript编程实现迭代算法。首先，对混沌映射进行初始化。初始化完成后，利用定时器将绘图周期设置为10 ms，即10 ms刷新一次绘图。迭代运算的实现是通过设置全局变量实现的，每次仅迭代一次，迭代周期就是绘图刷新的周期。

JavaScript脚本捕获到页面的事件，就调用setMethod（）函数设置绘图方法。在draw（）方法中，调用getMethod（）获取绘图方法，判断绘图的类型。如果是绘制相图，则调用绘制相图的相应代码；如果是绘制时间序列，则调用绘制时间序列的相应代码。最后，调用Canvas提供的绘图函数进行绘制。

2 点插值和线插值绘图

相图和时间序列的绘制，可以采用点插值或线插值方法进行绘制。混沌运算的结果可以表示为形如[X={p0，p1，…，pn-1，pn}]的点集合。

记绘图方法为[D，]则点插值绘图可以表示为：

[n=0∞D（pn）] （4）

调用Canvas中Context对象的arc方法可以实现点插值。

记相邻两点坐标分别为[pn-1（xn-1，yn-1），][pn（xn，yn），]采用直线进行拟合，则插值的轨迹可表示为：

[y-yn-1=yn-yn-1xn-xn-1（x-xn-1）]

线插值绘图可以表示为：

[n=0∞D（pn（xn，yn））]

调用Canvas中Context对象的moveTo和lineTo方法可以实现线插值，线插值绘图的关键代码如下所示：

context.moveTo（vx，vy）；

chaos （）； //变参数系统迭代函数

context.lineTo（vx，vy）；

基于Chrome浏览器，利用两种插值算法，对混沌相图进行绘图，效果如图1所示。由图1可以看出，相对于点插值算法，线插值算法具有更好的平滑特性。如果引入曲线拟合，增加插值的点，能实现更好的绘图效果。

图1 两种算法绘制的相图

3 特性分析

跨平台是HTML5的优良特性。采用HTML5编写的程序，不需要做任何修改即可跨平台使用。目前，PC、智能电视、智能手机、iPad都支持HTML5。图2是变参数混沌系统在PC平台和Nokia N9手机（模拟器仿真）平台实现的效果图，其实现代码没有做任何修改。

图2 时间序列跨平台效果

信息加密是混沌运算的应用之一，HTML5支持本地存储，如果将混沌映射的HTML5实现与本地存储特性相结合，那么可以设计一个“一次编程，多平台使用”的文件加密应用。

HTML5的渲染效果能提供良好的用户体验，利用其渲染模式可以获得优美的运行效果，如构建一个用于演示的混沌系统，可应用于教学或其他一些需要展示混沌吸引子的领域。

定时器每隔10 ms运行一次混沌运算，而运算的结果是不断迭代更新的值。因此，每隔10 ms可以获取一组数据。由于时间足够短，可以认为数据的获取是实时的。数据的实时获取，为利用混沌HTML5实现、研究混沌整体性能提供了可能。

4 结 语

本文提出了一种利用HTML5技术实现连续混沌系统的方法，除获得伪随机混沌序列外还可实现混沌相图、时间序列的绘制。通过对比点插值绘图和线插值绘图的效果，说明了线插值绘图能获得更好的平滑特性。从跨平台、本地存储等特性分析，说明了混沌映射HTML5实现的优点以及应用的可能性。混沌HTML5实现技术在信息加密、混沌演示、混沌性能测试等方面具有广阔的应用前景。

参考文献

[1] TAIVALSAARI A， SYSTA K. Cloudberry： HTML5 cloud phone platform for mobile devices [J]. IEEE Software， 2012，29（4）： 40?45.

[2] BAKKER A， PETROCCO R， DALE M， et al. Online video using bittorrent and HTML5 applied to Wikipedia [C]// 2010 IEEE Tenth International Conference on Peer?to?Peer Computing （P2P） Netherlands： IEEE， 2010： 1?2.

[3] XIE Yue. Transmission and display technology for vital signs based on HTML5 canvas and COMET mechanism[C]// 2011 International Conference on Computer Science and Network Technology. Harbin， China： ICCSNT， 2011： 2760?2763.

[4] XU Zhuo?kui， ZHU Jian?jun. Research of WebGIS based on HTML5 and JSON [C]// 2011 International Conference on Computer Science and Network Technology Harbin， China： ICCSNT， 2011： 1714?1717.

[5] 谭德，王光义.改进超混沌系统PN序列的SOPC实现[J].杭州电子科技大学学报，2012，32（3）：1?4.

[6] 宋福圣，韩希昌，迟新利.基于Lorenz超混沌系统模糊渐近同步的保密通信系统[J].现代电子技术，2012，35（7）：111?113.

[7] 邓奎彪，禹思敏.一类混沌系统的动态输出反馈控制[J].现代电子技术，2012，35（2）：67?71.