JavaScript(p5.js)とArduinoの接続

JavaScriptとArduinoの接続方法を調べていたのですが、初心者のため、Node.jsを使う方法でうまく繋がらず、この方法でやっと接続できましたので、メモとして残して起きます。

ブラウザに表示されたグラデーションをドラッグするとLEDが調光されるプログラムです。こちらのYouTubeを参考に、p5.jsとArduinoを使って作成しました。参考動画と異なる部分は、VSCodeでコードを作成し、Arduino Unoを使用している点です。 VSCodeおよびArduino IDEのインストール方法等は割愛しております。

環境構築

VSCodeの拡張機能をインストール
p5.serialcontrolのダウンロード

VSCodeの拡張機能をインストール

VSCode上でp5.jsのコーディングがやりやすくなる拡張機能を2つインストールします。

Live Preview

エディタ内でライブプレビューする拡張機能。入力したコードの実行結果が逐次プレビューされます。

p5js Snippets

p5.jsの入力補完をしてくれます。今回は、ほぼコピペでできるので入れなくてもOKです。

p5.serialcontrolのダウンロード

Arduinoとシリアル接続するためのアプリケーションです。こちらからダウンロードします。私はバージョン「Alpha 7」のdarwin（mac）を使用しました。

Arduinoの配線

下記が必要なハードウェアです。

Arduino本体
usbケーブル（PCと接続用）
ブレッドボード
ジャンパワイヤ x 2本
抵抗 220Ω

図のように接続します。調光（PWM）を使用するので、赤い線は番号の前に「~」が付いたピンでなければ上手く動きません。今回は9番ピンを使いました。

必要なファイルを準備

テストなので、必要最低限のファイル構成です。

Arduino用のコード
htmlファイル
JavaScriptファイル

Arduino用のコード

以下のコードをArduinoに書き込んでおきます。

const int ledPin = 9;

void setup() {
  Serial.begin(9600);

  pinMode(ledPin, OUTPUT);

}

void loop() {
  int brightness;

  if(Serial.available() > 0){
    brightness = Serial.read();

    analogWrite(ledPin, brightness);
  }

}

その際にArduinoが接続されているポート番号を確認しておきます。 [ツール]→[シリアルポート：]で、（Arduino Uno）と書かれているポートです。このポート番号はあとで使います。

HTMLファイル

以下をコピペして「index.html」の名前で保存してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- p5.jsとp5.serialportのライブラリ -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
   	<script src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js"></script>
  </head>
  <body>
    <!-- 作成したp5.jsのスケッチ -->
    <script src="sketch.js"></script>
  </body>
</html>

JavaScriptファイル

リンク先のコードをVSCodeにコピペします。ただし20行目の serial.open('/dev/tty.usbmodem143201'); のポート番号を、先ほどArduino IDEで確認した番号に変更してください。（今回の例の場合は、「/dev/tty.usbmodem143301」に変更）「sketch.js」の名前でindex.htmlと同じフォルダに保存します。

プレビュー

ファイルが準備できたら、VSCodeでindex.htmlを開き、右上の虫眼鏡のアイコンをクリックします。

コードが間違っていなければ、右側に黄色のグラデーションが表示されます。

接続

先ほどダウンロードしたp5.serialcontrolを立ち上げます。「Selected Port:」から、Arduinoが接続されているポートを選択し「OPEN」をクリックします。クリックした際にArduinoの基盤のLEDが点滅すればたぶん成功です。

VSCodeに戻り、グラデーションをドラッグすると、グラデーションの明度に合わせて、ブレッドボードに接続されたLEDの明るさが変化するはずです。

プログラムや配線が間違っていないのに接続できない場合は、USBポートを一度抜いて接続し直すと上手くいくことがあります。その際に別のUSBポートに繋ぐとポートの番号も変わりますので、都度sketch.jsの20行目のポート番号も書き換え、p5.serialcontrolで接続し直してください。