Laze(自作プログラミング言語)でArduinoを制御して遊んでみた

#はじめに
タイトルの通り、Lazeというプログラミング言語でArduinoを制御して遊んでみました。ボタンを押したらLEDを光らせるプログラムを書いたり、ボタンで画面上の四角形を操作するプログラムを書いてみたりしました。
#Lazeってなに？
Lazeは初心者向けの自作プログラミング言語です。特徴は二つあります。一つ目は、母国語で書くことができるということ、二つ目はブラウザ上で実行可能にしているので、環境構築が不要ということです。[こちらのウェブサイト](https://laze.ddns.net)でLazeを試すことができるので是非試してみてください!
※この記事のArduinoを制御する機能はまだ実装されていないです、ごめんなさい。
#Arduinoの制御方法
Arduinoを制御するといっても、Lazeで書いたプログラムをArduinoに直接書き込むわけではありません。LazeとArduino間でコマンドとデータを送りあい、制御するという方式をとっています。
興味がある人のために具体的なことを書くと、LazeのJavaScriptで書かれた関数をインポートするという機能で[Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API)をLazeで使えるようにしました。このWeb APIを使うことで、ArduinoとLaze間でシリアル通信をできるようにしました。

#実際にやってみた

##ボタン押したらLED光るプログラム
まずは簡単な例としてボタンを押したらLEDを光らせるというプログラムを書いてみましょう。

###プログラム:
```js
関数:実行() => () {
  Arduino設定(0x2A03, () => (){
    Arduinoピン入出力設定(12, '出');
    Arduinoピン入出力設定(2, '入');
  });

  無限ループ{
        Arduinoデータ受信();
        整数:ボタン押されているか = Arduinoデジタル入力(2);
        もし(ボタン押されているか == 1)ならば{
            Arduino5V送る(12);
        }でなければ{
            Arduino0V送る(12);
        }
  }
}
```
###結果:
![ezgif-7-210071fef2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2427444/a2a798d8-e23c-d7e9-dea4-d6e5b02bc35d.gif)
※LEDは12ピンに、ボタンは2ピンにつながっています![IMG_1946lower.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2427444/baef1216-6c9f-5047-4498-6407240f1765.jpeg)
###解説:
####2~4行目
ここでArduinoを接続しています。0x2a03はArduino UNOのベンダーIDというもので、Arduino IDEやWindowsのデバイスマネージャーで確認することができます。Arduinoが使っているマイコンの種類によって違って、例えばArduino Leonardoだと0x2341になります。
Arduino設定の二個目の引数のアロー関数内では、接続し終わった後に実行するプログラムを書きます。このプログラムでは、LEDに5vを出力する12ピンを出力と設定して(3行目)、ボタンから入力を受け取る2ピンを入力と設定(4行目)しています。
####7~15行目
ここでは無限ループという名の通り、Lazeにずっと実行してほしいコードを書いています。
8行目でArduinoからピンのデータを受信しています。ここが欠けるとArduinoからデータを受け取ることができないので、忘れないように。
9行目では8行目で受信したデータの中で、2ピン目のデータを取り出して、`ボタン押されているか`という変数に代入しています。`ボタン押されているか`が0の時に押されていない、1の時に押されているということになります。
10~14行目で、ボタンが押されたか確認し、もし押されているなら2ピンに5Vを流し(LEDを光らせ)、押されていないなら流さないようにしています。

##ボタン押したら画面上の四角形が動くプログラム
つぎは、ボタンで画面上の四角形を動かせるプログラムを書いてみましょう。
###プログラム:
```js
関数:実行() => () {
	ベクトル3D:背景色(0.0, 0.0, 0.5);
	シーン2D:ワールド(1.0, 背景色);
    Arduino設定(0x2A03, () => (){
      Arduinoピン入出力設定(2, '入');
      Arduinoピン入出力設定(3, '入');
    });
	ベクトル2D:座標(0.0, 1.0);
	ベクトル3D:色(0.2, 0.5, 0.7);
	整数:id = ワールド.四角形追加(0.15, 0.15, 座標, 色, 1.0);

    無限ループ{
		Arduinoデータ受信();
		整数:赤ボタン = Arduinoデジタル入力(2);
		整数:白ボタン = Arduinoデジタル入力(3);

		もし(赤ボタン == 1)ならば{
			座標.x += 0.005;
		}
		もし(白ボタン == 1)ならば{
			座標.x -= 0.005;
		}
		ワールド.スプライト配列.取得(id) -> 座標設定(座標);
		ワールド.描画();
    }
}
```
###結果:
![ezgif-7-7f56bb3a6d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2427444/133eeeef-3622-e4c7-5abe-ed7c4d22f013.gif)
※赤ボタンが2ピンに、白ボタンが3ピンにつながっています。
###解説:
このプログラムはLazeの2Dグラフィックス機能とArduino制御機能を組み合わせたものです。Lazeの2Dグラフィックス機能は実際に[ウェブサイト](https://laze.ddns.net)の方でも試せるので是非お願いします!
####2~3行目
ここはLazeの2Dグラフィックス機能の初期設定です。0~1のRGBで背景色を設定し、ワールドの高さを1.0と設定しています。
####4~7行目
4行目と5行目はさっきの例と同じ。6行目は3ピンも入力に設定しています。
####8~10行目
3行目で宣言したワールドに四角形を追加しています。座標と色、高さ(0.15)と幅(0.15)、[zIndex](https://developer.mozilla.org/ja/docs/Web/CSS/z-index)(1.0)で初期化しています。
####13~16行目
さっきの例とほとんど同じですが、`赤ボタン`に2ピンのデータを、`白ボタン`に3ピンのデータを代入しています。
####18~23行目
赤ボタンが押されているなら四角形のx座標を0.005増やし、白ボタンが押されているなら四角形のx座標を0.005減らしています。
####24~25行目
ここでは四角形の座標を18~23行目で得た新しい座標に設定しています。`id`とは10行目で宣言時に取得した四角形のidです。
#まとめ
今回はLazeでArduinoを制御して電子工作とグラフィックスを組み合わせたりして遊んでみました。自分の言語ながらこんなに簡単に電子工作とグラフィックスを合わせることができるんだ、と感動してしまいました。つぎはLazeでゲームを書いて、電子工作と合わせてみたいと思います。
この記事を読んでいますぐに試してみたいと思ってくださった方には申し訳ないのですが、まだウェブサイトの方では2021年12月現在、この機能を使うことはできません。Lazeの新情報を[Laze公式Twitter](https://twitter.com/LazeProjectTeam)で上げているのでそこで使用可能か確認していただければと思います。