Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

product_obnizboard.jpg
M-05153.jpg

環境

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のページでは配線乗ってないので(探せばすぐ見つかるが)他のページを参考にしていきます

実装

ソースコード

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

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

結果

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

p5jsと加速度センサー

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

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

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

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

<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>

まとめ

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

tkyko13
クリエイティブコーディングや電子工作が趣味としていきたい
http://tkyk.net
protoout-studio
プロトアウトスタジオは日本初のプロトタイピング専門スクールです。プログラミングだけではなく、企画力と発信力を身に付けて”自分で課題を見つけて実装し、発信し続ける人”を育成しています。 圧倒的なアウトプット力を身に付けましょう。 学生募集中です。
https://protoout.studio
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away