差分

このページの2つのバージョン間の差分を表示します。

--- p5js:13.grove_beginner_kit [2022/07/05 00:18] – [加速度センサ] baba
+++ p5js:13.grove_beginner_kit [2022/07/05 14:18] (現在) – [加速度センサ] baba
@@ 行 300: / 行 300: @@
 ===== 加速度センサ =====
+{{ :p5js:jul-05-2022_00-51-08.gif?nolink |}}
 このセクションでは加速度センサからのデータを基にp5js上での画面描画に反映してみます。具体的にはbeginner kitの傾きに応じてボールが転がるプログラムを一緒に記述していきましょう。seeed studio社が提供する[[https://wiki.seeedstudio.com/Grove-Beginner-Kit-For-Arduino/|Grove Beginner Kit for Arduino]]にある加速度センサ用のサンプルコードを参考にコードを記述していきます。
@@ 行 307: / 行 309: @@
 //Gravity Acceleration
 #include "LIS3DHTR.h"
+#include <Wire.h>
-#include <Wire.h>
 LIS3DHTR<TwoWire> LIS;           //Hardware I2C
 #define WIRE Wire
 void setup() {
   Serial.begin(9600);
@@ 行 330: / 行 330: @@
   Serial.print(LIS.getAccelerationY()); Serial.print(",");
   Serial.println(LIS.getAccelerationZ());
   delay(500);
 }
@@ 行 339: / 行 338: @@
 現在のArduinoコードでは、例えばx=0.05, y=0.00, z=1.00 の場合は
 .05,0.00,1.00
-という文字列がPCに送信されています。さらに最後のzに関してはprintln関数を利用しているため、改行コードと呼ばれる改行を示すコード（10,12）が最後に付与されて送信されています。実際にPCがこのデータを受信すると次のような配列形式になっています。
+という文字列がPCに送信されています。さらに最後のzに関してはprintln関数を利用しているため、改行コードと呼ばれる改行を示すコード（13,10）が最後に付与されて送信されています。実際にPCがこのデータを受信すると次のような配列形式になっています。
   [48, 46, 48, 53, 44, 48, 46, 48, 48, 44, 49, 46, 48, 48, 13, 10]
@@ 行 349: / 行 348: @@
   * 53='5'
-いかがでしょうか？ただしく 0.05,0.00,1.00 が読めるようになったと思います。
+いかがでしょうか？ただしく 0.05,0.00,1.00 が読めるようになったと思います。以上のことを理解したら、
+  - データが届くたびに順次配列に蓄える（push）
+  - 改行コードの2つめである 10 が届いたらデータが一行分届いたことになる
+  - ここまで蓄えたデータは文字コードが送られているので、文字に変換する
+  - データはカンマ区切りになっているので、splitという関数を利用してカンマで区切られた文字列を配列に分ける
+  - それぞれの文字列は順にx,y,zになっているので、parseFloat関数を利用して数値に変更して変数に保存する
+という手順で、p5.js上で扱えるようにします。
+上記を踏まえて記述したコードは以下の通りです。
+<WRAP group>
+<WRAP half column>
+<file .js sketch.js>
+var serial_values = [0];
+var serial = new Serial();
+var x=0;
+var y=0
+var z=0;
+function setup() {
+  createCanvas(400, 400);
+}
+function draw() {
+  background(220);
+  textSize(18);
+  textAlign(CENTER, CENTER);
+  text(`${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`, width/2, height/2);
+}
+function gotSerialValues(values) {
+  for( let i = 0; i < values.length; i++ ){
+     serial_values.push(values[i]);
+    if( values[i] == 10){
+      let result = "";
+      for( s of serial_values){
+        result += String.fromCharCode(s);
+      }
+      //console.log("result:", result, "serial_values", serial_values);
+      const splits = result.split(',');
+      x = parseFloat(splits[0]);
+      y = parseFloat(splits[1]);
+      z = parseFloat(splits[2]);
+      //console.log(x,y,z);
+      serial_values = [];
+    }
+  }
+}
+</file>
+</WRAP>
+<WRAP half column>
+<file .pde arduino.pde>
+//Gravity Acceleration
+#include "LIS3DHTR.h"
+#include <Wire.h>
+LIS3DHTR<TwoWire> LIS;           //Hardware I2C
+#define WIRE Wire
+void setup() {
+  Serial.begin(9600);
+  while (!Serial) {};
+  LIS.begin(WIRE, 0x19); //IIC init
+  delay(100);
+  LIS.setOutputDataRate(LIS3DHTR_DATARATE_50HZ);
+}
+void loop() {
+  if (!LIS) {
+    Serial.println("LIS3DHTR didn't connect.");
+    while (1);
+    return;
+  }
+  //3 axis
+  Serial.print(LIS.getAccelerationX()); Serial.print(",");
+  Serial.print(LIS.getAccelerationY()); Serial.print(",");
+  Serial.println(LIS.getAccelerationZ());
+  delay(30);
+}
+</file>
+</WRAP>
+</WRAP>
+Arduino側のコードはdelayを30[ms]に変更しただけです。少しむずかしいと思いますが、じっくり読んでアルゴリズムを理解しましょう。
+さあ、それではセンサデータがしっかりと取得できたのでこの値で画面上のボールを転がしてみます。400x400のキャンバス上の真ん中からスタートし、x,y軸の傾きに応じてボールの位置を移動させてみます。注意しておきたいのは、変数x,yに誤って浮動小数点にならないものが入力された場合はキャンセル処理をすること。もう一つは画面からはみ出さないように最大値、最小値の制約をつけておくことです。以下が動作するプログラムとなります。
+<file .js sketch.js>
+var serial_values = [0];
+var serial = new Serial();
+var x=0;
+var y=0
+var z=0;
+var ball = {
+  x:200,
+  y:200
+}
+function setup() {
+  createCanvas(400, 400);
+}
+function draw() {
+  background(220);
+  textSize(12);
+  textAlign(LEFT, TOP);
+  text(`${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`, 10,10);
+  circle(ball.x, ball.y,20);
+}
+function gotSerialValues(values) {
+  for( let i = 0; i < values.length; i++ ){
+     serial_values.push(values[i]);
+    if( values[i] == 10){
+      let result = "";
+      for( s of serial_values){
+        result += String.fromCharCode(s);
+      }
+      const splits = result.split(',');
+      x = parseFloat(splits[0]);
+      if( !x )x = 0;
+      y = parseFloat(splits[1]);
+      if( !y )y = 0;
+      z = parseFloat(splits[2]);
+      ball.x -= y*5;
+      ball.y -= x*5;
+      if( ball.x <= 0)ball.x = 0;
+      if( ball.x >= width)ball.x = width;
+      if( ball.y <= 0)ball.y = 0;
+      if( ball.y >= height)ball.y = height;
+      serial_values = [];
+    }
+  }
+}
+</file>
+===== おまけ（マイク入力で丸の大きさも変化させる） =====
+<WRAP group>
+<WRAP half column>
+<file .pde arduino.pde>
+//Gravity Acceleration
+#include "LIS3DHTR.h"
+#include <Wire.h>
+LIS3DHTR<TwoWire> LIS;           //Hardware I2C
+#define WIRE Wire
+void setup() {
+  Serial.begin(9600);
+  while (!Serial) {};
+  LIS.begin(WIRE, 0x19); //IIC init
+  delay(100);
+  LIS.setOutputDataRate(LIS3DHTR_DATARATE_50HZ);
+}
+void loop() {
+  if (!LIS) {
+    Serial.println("LIS3DHTR didn't connect.");
+    while (1);
+    return;
+  }
+  //3 axis
+  Serial.print(LIS.getAccelerationX()); Serial.print(",");
+  Serial.print(LIS.getAccelerationY()); Serial.print(",");
+  Serial.print(LIS.getAccelerationZ()); Serial.print(",");
+  Serial.println(analogRead(2));
+  delay(30);
+}
+</file>
+</WRAP>
+<WRAP half column>
+<file .js sketch.js>
+var serial_values = [];
+var serial = new Serial();
+var x=0;
+var y=0;
+var z=0;
+var mic = 0;
+function setup() {
+  createCanvas(400, 400);
+}
+var ball = {
+  x:0,
+  y:0,
+  r:0
+}
+function draw() {
+  background(220);
+  textSize(18);
+  textAlign(CENTER, CENTER);
+  text(`${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`, width/2, height/2);
+  circle(ball.x, ball.y, ball.r/10);
+}
+function gotSerialValues(values) {
+  for( let i = 0; i < values.length; i++ ){
+     serial_values.push(values[i]);
+    if( values[i] == 10){
+      let result = "";
+      for( s of serial_values){
+        result += String.fromCharCode(s);
+      }
+      const splits = result.split(',');
+      x = parseFloat(splits[0]);
+      y = parseFloat(splits[1]);
+      z = parseFloat(splits[2]);
+      mic = parseFloat(splits[3]);
+      serial_values = [];
+      ball.x -= y*10;
+      ball.y -= x*10;
+      ball.r = mic;
+    }
+  }
+}
+</file>
+</WRAP>
+</WRAP>