マイクロビットを使ってみる〜Webブラウザに表示された図形をマイクロビットで動かす

以前、ビジュアルデザイン用のプログラム開発環境である「Processing」を使い、マイクロビットからの制御でパソコン画面に図形を描画させたことがあります（記事はこちら）。
また、「Processing」の代わりに「p5.js」というJavaScriptライブラリを使うことで、パソコンに特別なアプリをインストールすることなく、Webブラウザ上で図形を描画させることもできました（記事はこちら）。

今回はこれらを組み合わせて、マイクロビットからの制御でWebブラウザ上に図形を描画させてみようと思います。
具体的には、マイクロビットの加速度センサを使い、マイクロビットを左右に傾けるとWebブラウザに表示されているボールが左右に転がるようなものをつくることにします。

リンク

マイクロビットのプログラムはこちらです。

加速度センサで取得したデータを元に、「ボールのばしょ」を求めるプログラムです。
「ボールのばしょ」の左端を「10」、右端を「230」とします。最初は「ボールのばしょ」を真ん中（120）に、「ボールのスピード」を「0」にします。
加速度センサで取得したデータを変数「加速度」にセットします。以前の「ボールのスピード」に「加速度」をたした値を現在の「ボールのスピード」にします。以前の「ボールのばしょ」に「ボールのスピード」をたした値を現在の「ボールのばしょ」にします。
「ボールのばしょ」が左端よりも左になったときは、「ボールのばしょ」を左端にし、「ボールのスピード」を「0」にします。
同様に、「ボールのばしょ」が右端よりも右になったときは、「ボールのばしょ」を右端にし、「ボールのスピード」を「0」にします。
このようにして求めた「ボールのばしょ」をシリアル通信でパソコンに書き出します。
この処理を50ms毎に繰り返します。

次はWebブラウザ用のプログラムです。
実際にWebブラウザで開くhtmlファイル（index.html）はこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボールがうごくよ！</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="serial.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>

p5.jsライブラリである「p5.js」「p5.dom.min.js」と、これからつくる「serial.js」「sketch.js」を読み込んでいるだけのものです。

「serial.js」はこちらです。

let port;
let reader;
let receiveText = "";

function serialSetup() {
  const connectButton = createButton("Connect");
  connectButton.mousePressed(connectSerial);
}

async function connectSerial() {
  try {
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 115200 });
    reader = port.readable.getReader();
    readLoop();
  } catch (error) {
    console.log("error: ", error);
  }
}

async function readLoop() {
  while (true) {
    const { value, done } = await reader.read();
    if (done) {
      reader.releaseLock();
      break;
    }
    const text = new TextDecoder().decode(value);

    for (let i = 0; i < text.length; i++) {
      const c = text[i];
      receiveText += c;
      if (c === "\n") {
        getValue(receiveText.trim());
        receiveText = "";
      }
    }
  }
}

function getValue(value) {
  xpos = value * 4;
}

「serialSetup()」では、Connectボタンを表示し、ボタンが押されたら「connectSerial()」を実行します。
「connectSerial()」では、ユーザにシリアルポートを選択させ、そのポートに接続して「readLoop()」を実行します。
「readLoop()」では、無限ループで改行コード区切りのデータを受信し、そのデータを「getValue()」を渡します。
「getValue()」では、受け取ったデータを4倍して変数「xpos」に格納します。

「sketch.js」はこちらです。

let xpos = 480;

function setup() {
  serialSetup();
  createCanvas(960, 540);
}

function draw() {
  background(0,0,0);
  fill(255,255,0);
  ellipse(xpos, 270, 80, 80);
}

最初に一度だけ実行する「setup()」では、「serialSetup()」で準備したボタンと描画用のキャンバスを表示します。
ずっと繰り返して実行する「draw()」では、変数「xpos」のばしょに円を表示します。

上記の3ファイル（「index.html」「serial.js」「sketch.js」）を同一フォルダに置き、ChromeなどのWebブラウザで「index.html」を開きます。
するとブラウザ上に、背景が黒で真ん中に黄色い円（ボール）が描画されている画面が表示されます。その下には「Connect」ボタンも表示されます。

あらかじめ先ほどのプログラムを書き込んでおいたマイクロビットを、USBケーブルでパソコンとつなぎ、「Connect」ボタンを押すと、「mbed Serial Port (COMx)」というようなデバイス名が表示されるので、それを選択して「接続」をクリックします。

これで、マイクロビットからの制御でWebブラウザ上の図形を動かすことができるようになります。
マイクロビットを左右に傾けると、Webブラウザに表示されているボールも左右に転がります。

「マイクロビット」の表示手段は5×5のLEDマトリクスしかなく、この表示の部分が作品をつくる際のネックになっていましたが、このような機能を使うことで、つくれる作品の幅がさらに広がりそうです。
なお、このプログラムは、Mac用のWebブラウザ「Safari」では動きません。

なお、私がマイクロビットの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。

リンク

初心者向けから、比較的高度なものまで、さまざまな情報が記載されているだけでなく、子供向けの作例も多数掲載されていますので、「プログラミング教育」のための題材さがしなどにもおすすめです。

リンク