WebAssembly Demo之Canvas中隨機運動圓球

做者：雲荒杯傾

一、Demo功能介紹

實現了一個圓球在800px * 600px畫布內隨機運動，固定時間間隔隨機運動一次，運動方向由x和y軸組成的向量決定，這個向量是隨機值（後面會稱它爲隨機向量），從C語言代碼中的隨機函數獲取，JS代碼實現小球的畫布渲染、越界糾正等工做。

Demo同時實現了純JS（即不使用WebAssembly）和WebAssembly兩個版本，都在Demo地址中。

二、Demo地址

github倉庫
查看演示1 ：一個不顯示軌跡的小球demo
查看演示2 ：一個顯示運動軌跡的小球demo
查看演示3：一個小球平移demo

三、Demo目錄結構

由於demo比較簡單，也沒有什麼js庫依賴，因此本庫的全部demo都是按照目錄區分的（一個目錄是一個demo，億一共四個），而沒有使用諸如src、doc、dist之類的結構。

canvasDemo-wasm1：C代碼中未加隨機時間種子的一種實現，所以每次刷新HTML頁面實際上產生的是同一個隨機序列，也就是說每次刷新頁面後，若觀察小球的運動軌跡，都是同樣的。不過由於沒有隨機時間種子，因此，無論JS setInerval設定的時間間隔多短暫，這一個隨機序列的每一個值都是新鮮隨機出來的，即：與上一個隨機值重複的機率僅等於隨機範圍分之一。所以，這種實現下，小球的運動軌跡在canvas內的分佈更加的均勻。
canvasDemo-wasm2 :C代碼中加了隨機時間種子的一種實現，小球移動不均勻，由於隨機種子的時間粒度比較粗，而隨機運動的時間間隔遠小於這個時間粒度，因此同一對隨機值（矢量）會連續重複好幾回，這就形成了小球某次運行實際上並不隨機的效果。

注:上面兩種實現只有下面兩句C代碼的差異：
#include<time.h>
srand(time(NULL))

再注：wasm1和wams2兩個demo本質是一個。僅僅是由於C語言中的隨機時間種子問題，單獨多寫了一個。

canvasDemo-JS版本: 是canvasDemo-wasm1 demo的純JS實現的版本。跟wasm沒有關係。
translate-wasm:實現小球從左到右平移運動的demo，wasm實現，使用的wasm的API，沒有用膠水代碼。

四、canvasDemo-wasm1 Demo中主要函數介紹

C語言部分

有三個函數

函數名	參數	返回值	描述
Radom	int m,int n	int x	使用c語言的rand（）函數生成m和n之間的整數，以x返回。
randomInTwoSection	int m,int n	int x	給定一個隨機區間，若是生成的隨機值在左半邊，則生成一個負的移動值，以x返回；反之，x返回正的移動值
randomGenerator	int xpos,int ypos,int radius	char* a	給定當前小球在畫布內的位置：[xpos,ypos]和小球半徑，生成下一次移動的向量，之因此有半徑參數傳入，是設定了一個規則，若是小球pos加減radius已經到達canvas邊界，則下次移動，某個方向的隨機值必須爲負。好比已經到達左邊界，則下次運動,X方向的隨機數必須是正數，小球纔會向右滾動，不然會出左邊界。

JS部分

功能1：初始化canvas
功能2：run函數，內部是接受C代碼傳過來的隨機向量，賦給canvas的ctx.arc()以畫圓。
功能3：設定移動變換的時間間隔。

五、編譯C代碼過程解釋

本demo使用的emscripten編譯命令爲：

emcc -o a.html a.c -Os -s WASM=1 --shell-file shell_minimal.html

執行完，會生成，一個a.HTML，一個a.wasm，一個a.js。
加上a.c和shell_minimal.html，共五個文件。因此第3節中的random和random2目錄下都有這5個文件，爲方便你們重複編譯，還附加了1個使用的編譯命令的文本文件。

說明：
（1）a.c，a.html中的a是舉例，本身開發編譯時 請按實際的c文件名稱和想要輸出的html文件名；
（2）-Os是優化參數，生成的a.js是已經壓縮過的，這是膠水代碼，它裏面有引用生成的a.wasm，有使用WebAssembly API，如WebAssembly.memory和WebAssembly.Table()等；不加就不壓縮，js體積變大；
（3）shell_minimal.html是模板文件，7KB大小，有一些膠水代碼，按官方說法，不建議本身寫模板。關於到底使用什麼開發模式，用asm?用wasm?用wasm的話用不用膠水代碼？這幾個問號分別對應什麼編譯命令？若想理清以上幾個問題，請關注如下網址：https://kripken.github.io/ems...

注：爲啥要寫一下我demo中使用的編譯命令呢？由於emcc的命令選項實在是太多了，稍微有點不同，編譯出來的wasm就不一樣，致使報錯之類。

六、Demo使用或查看

直接運行canvasDemo-wasm1和canvasDemo-wasm1目錄下的HTML文件應該不行，由於是ftp協議，fetch之類的函數會報錯，建議git clone後到webstorm開發環境，這樣直接運行html文件就能夠了。

能夠寫個node server跑一下。或者直接用http-server庫。