基于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.