P5js + NS控制器(Joy Con)－M+A Media Lab

本文參考自：http://blog.livedoor.jp/reona396/archives/55730062.html

前言

在網路上看到這篇文獻，提供了用p5js程式庫連結NS控制器的操作方法。
興沖沖的下載回來測試，卻發現無法在win10的環境下順利執行 ( 文章中是使用OSX系統，但我沒有OSX的系統可以測試，如果有使用OSX系統測試的朋友也歡迎留言交流 ) 。
因此我花了點時間研究如何可以在Win10環境底下，使用p5js讀取NS控制器輸入訊號的方法，分享給大家，希望能對p5js的使用者在應用介面開發上有些幫助。

環境需求

系統：Win10
系統裝置：藍芽控制器
編輯器：sublime

操作步驟

1. 連結至這裡下載p5_gamepads_sw的範例文件下來，直接開啟index.html檔案，並開啟藍芽裝置連結NS控制器後，會發現無法如範例影片般讀取到控制器訊號。此時使用chrome瀏覽器的檢查功能，可以確認到問題出在範例文件gamepads.js中第54行的這段：

54 orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (R)') > -1));

此段的問題在於，win10的控制器連接埠gamepad裡面，可能有幾個值為null，當執行54行這一段

54 orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (R)') > -1));

想要取得gamepad.id來確認id名是否為NS控制器時會出現錯誤(因為null值底下並不會有id這個property)。

2. 解決辦法很簡單，只要在確認gamepad.id前，先確認gamepad是否為null即可，因此在定義gamepad的值時，可以將範例的50到55行：

50   for(let i = 0; i < gamepads.length; i++) {
51   gamepadArray.push(gamepads[i]);
52   }
53   let orderedGamepads = [];
54   orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (R)') > -1));
55   orderedGamepads.push(gamepadArray.find(g => g.id.indexOf('Joy-Con (L)') > -1));

改寫為如下：

50   let joyconR,joyconL;//定義左搖桿或右搖桿的序號
50   for(let i = 0; i < gamepads.length; i++) {
51   gamepadArray.push(gamepads[i]);
52   if (gamepadArray[i] === null){//避免控制器list為null
53   }else{
54   if (gamepadArray[i].id === 'Wireless Gamepad (Vendor: 057e Product: 2007)'){ //在我win10右控制器的id名為 Wireless Gamepad (Vendor: 057e Product: 2007)
55   joyconR = i;
56   }else{
57   joyconL = i;
58   }
59   }
60   }
61 orderedGamepads.push(gamepadArray[joyconR]);
62 orderedGamepads.push(gamepadArray[joyconL]);

此時已除錯完成，歡迎到我們的github頁面，測試看看，以下是測試成功的影片，可以使用NS控制器，控制GitHub網頁上的點。