obnizをVisual Studio Codeで動かし、「世界のナベアツ」を作ってみた。

Visual Studio Codeを少し勉強し、obnizを操作できるようになった。
Visual Studio Codeの勉強の際に学んだFizzBuzzを応用できるものはないかと考え、
「世界のナベアツ」を作ってみました。

下準備
①　obnizスターターキットの用意
　　obnizの端子にパーツを接続
　　　　ブザー：signal:9, vcc:10, gnd:11
　　　　マトリックスLED：gnd:3, vcc:2, sda:1, scl:0（逆さまに装着）

②　Visual Studio Codeの用意
　　初期設定
　　　　npm init -y
　　　　npm i axios
　　obnizとの連携の設定
　　　　npm install obniz
　　　　npm install canvas
　　これらをVisual Studio Codeのターミナルに入力しEnterを押してインストールしておく。

実行
　Visual Studio Codeに、以下のコードを入力。

```html
var Obniz = require("obniz");

var obniz = new Obniz("xxxx-xxxx"); //obnizの番号を入れる
obniz.onconnect = async function () {
    var speaker = obniz.wired("Keyestudio_Buzzer", {signal:9, vcc:10, gnd:11});
    const matrix = obniz.wired("Keyestudio_HT16K33", { gnd:3, vcc:2, sda:1, scl:0 });
    matrix.brightness(7);
    const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);

    for( let i=1; i<41; i++){

        if(i < 10){
           if(i%3 === 0){
              ctx.fillStyle = "black";
              ctx.fillRect(0, 0, matrix.width, matrix.height);
              ctx.fillStyle = "white";
              ctx.font = "9px sans-serif";
              ctx.fillText(i, 0, 7);
              matrix.draw(ctx);
              speaker.play(698.456) // 698.456 Hz；「高いファE5」
              await obniz.wait(300);
              matrix.clear();
              speaker.stop();
              await obniz.wait(300);
              continue;
           }else {
              ctx.fillStyle = "black";
              ctx.fillRect(0, 0, matrix.width, matrix.height);
              ctx.fillStyle = "white";
              ctx.font = "8px sans-serif";
              ctx.fillText(i, 0, 7);
              matrix.draw(ctx);
              speaker.play(146.832) // 146.832 Hz；「レD3」
              await obniz.wait(300);
              matrix.clear();
              speaker.stop();
              await obniz.wait(300);
              continue;
           }

        }else if(i%3 === 0){
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "8px sans-serif";
            ctx.fillText(i, 0, 7);
            matrix.draw(ctx);
            speaker.play(698.456) // 698.456 Hz；「高いファE5」
            await obniz.wait(300);
            matrix.clear();
            speaker.stop();
            await obniz.wait(300);
            continue;            

        }else if(i-10 === 3){
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "8px sans-serif";
            ctx.fillText(i, 0, 7);
            matrix.draw(ctx);
            speaker.play(698.456) // 698.456 Hz；「高いファE5」
            await obniz.wait(300);
            matrix.clear();
            speaker.stop();
            await obniz.wait(300);
            continue;

        }else if(i-20 === 3){
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "8px sans-serif";
            ctx.fillText(i, 0, 7);
            matrix.draw(ctx);
            speaker.play(698.456) // 698.456 Hz；「高いファE5」
            await obniz.wait(300);
            matrix.clear();
            speaker.stop();
            await obniz.wait(300);
            continue;

        }else if(i >= 30 && i-30 < 10){
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "8px sans-serif";
            ctx.fillText(i, 0, 7);
            matrix.draw(ctx);
            speaker.play(698.456) // 698.456 Hz；「高いファE5」
            await obniz.wait(300);
            matrix.clear();
            speaker.stop();
            await obniz.wait(300);
            continue;

        }else if(i === 40){
            await obniz.wait(300);
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "8px sans-serif";
            ctx.fillText(i, 0, 7);
            matrix.draw(ctx);
            speaker.play(349.228) // 698.456 Hz；「高いファE4」
            await obniz.wait(300);
            speaker.play(587.330) // 587.330 Hz；「高いレD5」
            await obniz.wait(300);
            matrix.clear();
            speaker.stop();
            await obniz.wait(300);
            continue;

        }else{
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "7px sans-serif";
            ctx.fillText(i, 0, 7);
            matrix.draw(ctx);
            speaker.play(146.832) // 146.832 Hz；「レD3」
            await obniz.wait(300);
            matrix.clear();
            speaker.stop();
            await obniz.wait(300);
            continue;
        }
    }

    await obniz.wait(300);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, matrix.width, matrix.height);
    ctx.fillStyle = "white";
    ctx.font = "9px sans-serif";
    ctx.fillText('オ', 0, 7);
    matrix.draw(ctx);
    speaker.play(783.991) // 783.991 Hz；「ソG5」
    await obniz.wait(150);
    matrix.clear();
    speaker.stop();

    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, matrix.width, matrix.height);
    ctx.fillStyle = "white";
    ctx.font = "9px sans-serif";
    ctx.fillText('モ', 0, 7);
    matrix.draw(ctx);
    speaker.play(146.832) // 146.832 Hz；「レD3」
    await obniz.wait(150);
    matrix.clear();
    speaker.stop();

    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, matrix.width, matrix.height);
    ctx.fillStyle = "white";
    ctx.font = "9px sans-serif";
    ctx.fillText('ロ', 0, 7);
    matrix.draw(ctx);
    speaker.play(103.826) // 103.826 Hz；「ソ♯/G♯2」
    await obniz.wait(600);
    matrix.clear();
    speaker.stop();
}
```

https://twitter.com/21HideK/status/1449746358227726343

工夫を要した箇所
　①ブザーとマトリックスLEDの使用は、「かえるのうた」を応用した。
　　”世界のナベアツ”さんの声の音程を動画をみて聞き取ったが、時間を要した。

　②”バカになる数字（3の倍数、1の位が3の数）”部分を音程を高くしマトリックスLED
　　の文字を大きく表示、それ以外の数字は音程を低くしマトリックスLEDの文字をやや
　　小さくした。
　　フォントが小さいとマトリックスLEDへの表示が崩れ、大きいとはみ出してしまうので、
　　大きさの調整を要した。