WebAssembly Demo之Canvas中隨機運動圓球

時飛發(fā)布于2019-08-22 11:11 / 3121人閱讀

摘要：不過因為沒有隨機時間種子，所以，不管設定的時間間隔多短暫，這一個隨機序列的每個值都是新鮮隨機出來的，即與上一個隨機值重復的概率僅等于隨機范圍分之一。

作者：云荒杯傾

1、Demo功能介紹

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

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

2、Demo地址

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

3、Demo目錄結構

因為demo比較簡單，也沒有什么js庫依賴，所以本庫的所有demo都是按照目錄區(qū)分的（一個目錄是一個demo，億一共四個），而沒有使用諸如src、doc、dist之類的結構。

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

注:上面兩種實現(xiàn)只有下面兩句C代碼的差別：
#include
srand(time(NULL))

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

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

4、canvasDemo-wasm1 Demo中主要函數(shù)介紹 C語言部分

有三個函數(shù)

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

JS部分

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

5、編譯C代碼過程解釋

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

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

執(zhí)行完，會生成，一個a.HTML，一個a.wasm，一個a.js。
加上a.c和shell_minimal.html，共五個文件。所以第3節(jié)中的random和random2目錄下都有這5個文件，為方便大家重復編譯，還附加了1個使用的編譯命令的文本文件。

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

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

6、Demo使用或查看

直接運行canvasDemo-wasm1和canvasDemo-wasm1目錄下的HTML文件應該不行，因為是ftp協(xié)議，fetch之類的函數(shù)會報錯，建議git clone后到webstorm開發(fā)環(huán)境，這樣直接運行html文件就可以了。

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

云服務器 GPU云服務器 php中demo 圓球 webrtc 源碼中的demo php輸出隨機中文字

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91935.html

WebAssembly和Emscripten工作整理

摘要：寫在前面之前做過一段時間的的研究，寫過幾個，并且閱讀并翻譯了很多篇官方文檔，今天對這些東西做一個總結。主要是以鏈接形式提供，并附上簡短的說明。歡迎加入和技術交流群，群聊號碼寫在前面之前做過一段時間的WebAssembly的研究，寫過幾個WebAssembly Demo，并且閱讀并翻譯了很多篇Emscripten官方文檔，今天對這些東西做一個總結。如果有需要對這塊知識了解的同學，就可...

qieangel2013 2019-08-21 18:46 評論0 收藏0
一步步實現(xiàn)nest粒子特效

摘要：嘗試實現(xiàn)畫出一個彈射的小球很簡單，那怎么用多個小球實現(xiàn)這樣的效果呢。本文首發(fā)于我的博客，這是我的github，歡迎star。 ??這篇博客是模仿nest.js實現(xiàn)一個demo，由簡單到復雜，來一步步的實現(xiàn)它。這里是效果預覽。我的github里邊還有很多別的前端的demo，喜歡的話可以點個star，你的支持就是我的動力。從一道面試題開始實現(xiàn)一個半徑10px的小球在500px*5...

ky0ncheng 2019-08-22 11:20 評論0 收藏0
裝逼的最高境界---一行js代碼完成一個簡易版的貪吃蛇游戲

摘要：有些奇淫技巧玩好的話，就能提升自己的逼格，這不，一行代碼實現(xiàn)一個貪吃蛇小游戲就成了裝逼到了最高境界嘛代碼如下當前瀏覽器不支持標簽游戲結束我不是來裝逼的。有些奇淫技巧玩好的話，就能提升自己的逼格，這不，一行js代碼實現(xiàn)一個貪吃蛇小游戲就成了裝逼到了最高境界嘛！代碼如下: (function(){var s = [41,40],d = 1,f = 43,x,c = document.cr...

hidogs 2019-08-02 16:16 評論0 收藏0