obnizで加速度センサー，そしてp5js

# 概要
ハッカソンに参加した際，うまく行かずに断念してしまったものの復習と，
ついでに以前p5jsと連携したもの( https://qiita.com/tkyko13/items/0720246fbd1bb5eee1ab )の応用をしまーす

![product_obnizboard.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76572/e17c6038-e6e6-d754-72d2-19c42617fcc3.jpeg)
![M-05153.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76572/ce652b4e-1e8b-c0ee-b4b6-797f39884be0.jpeg)


## 環境
obniz 2.0.0
加速度センサー KXR94-2050

# 加速度センサー
https://obniz.io/ja/sdk/parts/KXR94-2050/README.md
https://www.petitmonte.com/robot/howto_kxr94_2050.html
https://deviceplus.jp/hobby/entry017/

ハッカソン中，値は取れたっぽいのですが，めっちゃ熱くなったのでやめちゃった
それをもう一回配線してみます
地味にobnizのページでは配線乗ってないので(探せばすぐ見つかるが)他のページを参考にしていきます


## 実装

ソースコード

```javascript
let Obniz = require("obniz");
const obniz = new Obniz(YOUR_ID);

obniz.onconnect = async function() {
  var sensor = obniz.wired("KXR94-2050", {
    vcc: 0,
    gnd: 1,
    x: 2,
    y: 3,
    z: 4,
    enable: 5,
    self_test: 6
  });

  sensor.onChange = function(values) {
    console.log("x:" + values.x);
    console.log("y:" + values.y);
    console.log("z:" + values.z);
  };
};

```

配線
![IMG_1097のコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76572/954d0d4c-ee15-93c0-fdb6-590d6122439e.jpeg)

参考サイトのobnizのサイトからのサンプルコードです
そのサイトからでも実行できるので，obnizは便利ですよねぇ
上記のコードはnodeで実行しています

## 結果
簡単に動きましたね
本番はどんな配線していたか忘れましたがハッカソンなどで焦っているときは特に複数のサイトを見てつなげていたのでうまくいかなかったのかもしれませんね

## p5jsと加速度センサー
前回の記事でやったp5jsとの連携もやってみます
p5jsで描いた3Dモデルを加速度で回転させてみますか

...と思ったが，
- p5jsで3Dモデルはwebglモード
- obnizでのdrawは2D前提っぽい

なので2Dでボールをコロコロ転がすことにします

ソースコード
前回と同じでobnizの開発コンソールから実行します
今回はp5jsの関数のdraw関数内ではなく，描画を更新するobnizのrepeat関数でp5jsのグラフィックを描くコードも描いています
ブラウザの方の画面のガタつきを軽減したいならばやっぱdrawに書くべきかもしれませんね

```html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.2.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <div id="obniz-debug"></div>

    <script>
      var obniz = new Obniz(YOUR_ID);
      
      var x=32;
      var y=16;
      var spx = 0;
      var spy = 0;
      
      obniz.onconnect = async function () {

        const ctx = $(".p5Canvas")[0].getContext('2d');
        
        var sensor = obniz.wired("KXR94-2050", { vcc:0, gnd:1, x:2, y:3, z:4, enable:5, self_test:6 });

        obniz.repeat(function(){
          var values = sensor.get();
          
          obniz.display.draw(ctx);
          
          // 初回values.yにNanが入るので
          if(values.x && values.y) {
            background(200);
            spx -= values.y;
            spy -= values.z;
            x += spx;
            y += spy;

            if(x < 0 || 64 < x) {
              spx=-spx*0.9;
              x = constrain(x, 0, 64);
            }
            if(y < 0 || 32 < y) {
              spy=-spy*0.9;
              y = constrain(y, 0, 32);
            }

            ellipse(x, y, 10, 10);
          }
        });

      }
      
      function setup() {
        createCanvas(64, 32);
      }
      
      function draw() {
      }

    </script>
  </body>
</html>
```

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">obnizのディスプレイにp5jsのコードで円を描いてみた<br>加速度センサで動かした〜 <a href="https://t.co/UyWgQiUdpY">pic.twitter.com/UyWgQiUdpY</a></p>&mdash; るしわん (@tkyko13) <a href="https://twitter.com/tkyko13/status/1154002823777882114?ref_src=twsrc%5Etfw">July 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ
機材トラウマをなくすってワードが結構しっくりきていていいなって思ってます
次回はobnizのi2cを見ていけたらなと思います