The Most Test Cases Creator

John Hu wins a small prize at Mozilla: the most test cases creator. The prize is 100 USD amazon gift card. We are not aware the existence of this prize.

Firefox OS Video App Peer

After a lot of hard works, John Hu is a Video app module peer of Firefox OS. A video app peer can review and join the discussion of the future plan.

Mozilla monument

Mozilla Monument

Mozilla had built a monument at the front of SF office. It’s really glade to see my name at the monument. It’s my pleasure to work with all of you at Mozilla.

John Hu at monument
John Hu at monument

Mozart

沒錯,人人都可以是指揮家 - 這是 Mozart 計畫所期望達到的目標。我們只要簡單的搖晃手機,身邊的電腦就如同交響樂團般演奏出屬於我們的音樂。實際的玩法,我們可以參考下面這段影片:

Mozart 計畫是一個參加 node.js knockout 2013 比賽的音樂節奏遊戲。這篇文章將介紹如何在我們的電腦中安裝及設定好 Mozart。

計畫介紹

Mozart 計畫在 node.js knockout 2013 比賽一結束後,就立馬將源始碼放在 github 上,即 https://github.com/moz-art/mozart 。Mozart 完全採用 Web APP 及 Web API 完成的遊戲。首先,它利用手機的三軸加速計 (Device Motion) 來測量搖晃的速度,透過 WebSocket 技術將測量出來的速度傳輸到多台電腦後,再使用 WebAudio 技術依照搖晃的速度,將一個一個的音符播放出來。

下載源始碼

我們可以直接透過這個網址來把壓縮好的源始碼下載回來:下載這裡。下載並解壓縮完成後可以看到像下面的程式碼:

source code image
源始碼

安裝 node.js

Mozart 是參加 node.js 比賽,就一定要安裝最新版本的 node.js 了。我們可以在 http://nodejs.org/download/ 下載到可以安裝的 node.js 安裝檔。安裝完成後,我們可以在命令列中輸入 node –version 進行確認,例如:

check node version
node --version

安裝相依函式庫

因為 Mozart 計畫是使用 node.js 來開發,所以安裝相依函式庫的方式非常的簡單,我們只要輸入 npm install 就能開始啟動安裝程序:

npm install
npm install

安裝完成後,我們可以看到像下面的相依關係圖:

the result of npm install
after npm install

啟動程式

Mozart 的主程式入口是 server.js,所以我們可以透過 sudo node server.js 來啟動它。但是,為什麼要用 sudo 呢?因為它會使用 express 及 ws 模組來啟動網站伺服器。如果,大家是用 Windows,記得要用管理員權限來執行它。啟動後,命令列的畫面會像:

start the mozart server
start the mozart server

如果我們遇到 EADDRINUSE 的錯誤時,就代表我們要使用的 80 port 被其它應用程式使用了。錯誤的畫面如下:

error address in use
error address/port in use

此時,我們可以把用到 80 port 的程式給關閉。如果,我們不想這樣的話,也可以改一下源始碼,讓它變成是 8080 或是使用任何我們想用的 port。以下圖為例,我們可以把第2行的 production 改成 false 或是,直接把第 9 行的 port 寫一個固定的數值:

how to modify port
how to modify port

開始指揮囉

最後,我們只需要打開自己的 Firefox,在網址例中輸入 http://localhost/,就可以依照指示開始指揮囉。如果,我們有改過 port 的話,我們需要輸入 http://localhost:[port]/ 後就可以了。

game screenshot
game screenshot

最後,還是要不免俗地介紹一下 Mozart 計畫的團隊成員:

  • evanxd evanxd — Taoyuan — UX and server
  • john-hu john-hu — Taichung — music player
  • yurenju yurenju — Taipei — conductor device
  • rexboy7 rexboy7 — Taiwan — MIDI

Mozart Idea

Mozart 專案是一個利用多個 Web API 來完成的線上遊戲,它使用了 1. Device Motion 來讀取使用者透過手機晃動的符度, 2. Web Audio 來當成 MIDI 的聲音輸出, 3. Web Socket 來當成手機與伺服器之間的即時通訊。我們只要簡單的搖晃手機,身邊的電腦就如同交響樂團般演奏出音樂。下面就是它的架構圖:

conceptual architecture
conceptual architecture

Mozart 專案裡面的角色分成三個主要的角色:

  • 指揮家(Mozart Conductor):指揮家是由使用者進行操作的應用程式。為了能讓我們能像一般指揮家那樣進行指揮,它是一個行動裝置的應用程式。我們只需要拿著手機進行晃動,就可以發出指揮的訊號,以控制每個演奏家。指揮家應用程式是採 Web App 的方式進行開發,所以它可以直接在 Firefox for Android、Chrome、及 Safari for iOS 上執行,只須打開前述瀏覽器即可,完全不需要安裝任何的應用程式。指揮家的應用程式採用了 Device Motion 的 Web API 來讀取手機中的加速計,並且透過公式換算來轉換成速度資訊。
  • 演奏家(Mozart Player):演奏家可以由一般的電腦或平板所組成。它主要的任務是依照指揮家的指揮,將音樂依照指揮的速度演奏出來。所以,演奏家是使用 Web Audio 來控制每個音符的度速。演奏家主要是讀取 MIDI 檔案,所以,可以由多台電腦組成不同樂器的演奏家。隨著加入的機器,每個演奏家會自動分配成不同的樂器,並且當指揮家開始指揮時,進行多個演奏家同時合奏。
  • Mozart 伺服器(Mozart Server):Mozart 伺服器是使用 node.js 開發,它使用 express.js 整合 Web Socket Server 技術,只需啟動一個伺服器就能同時提供 Web Server 及 Web Socket 的功能,而且它只佔用一個連接埠(port)而己。不論指揮家或是演奏家的應用程式都是先透過 Mozart伺服器的 Web Server 將程式發佈到裝置上,接著再透過 Web Socket 將同一組指揮家及演奏家連結在一起。連結完成後,Mozart 伺服器僅提供資料傳輸的服務。

Mozart 專案在實作的過程中,並不是完全手工打造,而且大量採用開放源碼專案。以下就是 Mozart 每個角色的實作介紹及其使用的 Open Source 或 Web API:

指揮家(Mozart Conductor)

指揮家的核心是透過 Device Motion Web API 來計算出我們晃動的速度,所以,整個的計算公式分成1. 讀取三軸加速計、2. 套用低通濾波器將數值線性化、及3. 加速度與遊戲速度轉換。這裡使用的低通濾波器是使用移動平均數的方式來做計算。另外,加速與遊戲速度的轉換也是採用類似的低通濾波器,但是除了濾波器外,還依照不同的平台加入不同的權重。除了核心的速度計算外,指揮家還負責提供使用者介面讓指揮家控制要參與的演奏家數量及啟動程式。這裡的使用者介面全都是採用開放源碼的 bootstrap 製作完成。其細項的架構圖如下:

conductor architecture
conductor architecture

演奏家(Mozart Player)

演奏家主要是負責每個音符的播放與停止,它的核心是從兩個開放源碼專案整合而來:jasmidMIDI.js。jasmid 是負責分析 MIDI 檔案,並將其轉換成 jasmid 的 MIDI 事件。而 MIDI.js 是負責載入各種不同的樂器,並依照播放器的指示開啟或停止每個音符。由於演奏家的速度是由指揮家來控制,所以,我們並沒月採用 jasmid 或 MIDI.js 的播放器功能,而是依照 jasmid 的 MIDI 事件開發一個可以調整速度的播放器,且其底層接上 MIDI.js。這個播放器分成1. 樂器過濾器、2. 速度控制器、及 3. 音符控制器三個。樂器過濾器是依照 Mozart 伺服器的指示,將與這個演奏家無關的樂器全部過濾掉。速度控制器則是依照 Mozart 伺服器傳來的資訊動態地調整播放的速度。最後則是音符控制器用來控制多個音符按下及放開的狀態。其細項的架構圖如下:

player architecture
player architecture

Mozart 伺服器(Mozart Server)

Mozart 伺服器是整個專案的核心,它負責與指揮家及多個演奏家連線,並當成它們間溝通的橋樑。Mozart 伺服器會將一個指揮家與多個演奏家組成一個群組。當有多個指揮家出現時,它能同時支援多個群組內的通訊,讓每個指揮家控制屬於自己的演奏家。Mozart 伺服器是這三個角色中使用最多開放源碼專案的地方,它是執行於 node.js 的環境,由 express 當成網站伺服器,並外掛 ws 當成 Web Socket 伺服器,且在同一個 port (80 port)中執行。當使用者連上 Mozart 伺服器後,它會依照需求將指揮家與演奏家的程式碼傳輸出去,且會依照 MIDI 的種類,自動分配每個演奏家所負責的樂器。其中,Mozart 伺服器還有一個很重要的功能,就是計算遊戲的分數,並將分數顯示在演奏家的畫面上。

server architecture
server architecture

如果大家有興趣想玩一下 Mozart 的話,可以前往 Mozart 的程式碼下載,並參考下面的影片來開始遊玩啦:

最後,還是要不免俗地介紹一下 Mozart 計畫的團隊成員:

  • evanxd evanxd — Taoyuan — UX and server
  • john-hu john-hu — Taichung — music player
  • yurenju yurenju — Taipei — conductor device
  • rexboy7 rexboy7 — Taiwan — MIDI