M5StickCをかたむけて画面上のボールを転がす

M5StickCには、MPU6886という6軸センサが搭載されています。

今回は、このセンサを使って、「M5StickC本体を傾けると、それに応じて、LCDに表示されているボールが転がる」というスケッチを作ってみます。

ひとつひとつのステップごとに、動作確認をしながら、進めていきます。

ボールを表示する

まずは事前準備として、LCDにボール（円）を表示してみます。
今回はM5StickCを横向きで使用します。
画面サイズは横160ピクセル、縦80ピクセルです。

M5StickCに、以下のスケッチを書き込みます。

#include <M5StickC.h>

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);
  M5.Lcd.fillCircle(10, 40, 10, RED);
  M5.Lcd.fillCircle(80, 40, 10, BLUE);
  M5.Lcd.fillCircle(150, 40, 10, YELLOW);
}

void loop() {
}

結果は以下のとおりで、画面左端に赤、画面中央に青、画面右端に黄色のボールが表示されました。

ボールを動かす

次に、変数「x」でボールの位置情報（X座標）を、変数「v」でボールの速度を定義し、ボールをLCD画面上で、一定速度で左右に動かしてみます。
スケッチは以下のとおりです。

#include <M5StickC.h>

int x = 10;
int v = 1;

void setup() {
  M5.begin();
  M5.Lcd.setRotation(1);
}

void loop() {
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.fillCircle(x, 40, 10, YELLOW);
  x += v;
  if(x==10) v = 1;
  if(x==150) v = -1;
  delay(10);
}

結果は以下のとおりです。ボールが一定の速度で、左右に動いています。

MPU6886の加速度情報を表示する

6軸センサが採取する加速度情報を確認するために、以下のスケッチを作りました。

#include <M5StickC.h>

float accX = 0.0f;
float accY = 0.0f;
float accZ = 0.0f;

void setup() {
  M5.begin();
  M5.IMU.Init();
  M5.Lcd.setRotation(1);
}

void loop() {
  M5.update();
  M5.IMU.getAccelData(&accX, &accY, &accZ);
  Serial.printf("%5.2f,%5.2f,%5.2f\n", accX, accY, accZ);
  delay(100);
}

シリアルプロッタで確認したところ、M5StickCを左右に傾けることによって、2カラム目の値（accY）が変化することがわかりました。

念のため、accYだけを出力するように、スケッチを修正しました。

#include <M5StickC.h>

float accX = 0.0f;
float accY = 0.0f;
float accZ = 0.0f;

void setup() {
  M5.begin();
  M5.IMU.Init();
  M5.Lcd.setRotation(1);
}

void loop() {
  M5.update();
  M5.IMU.getAccelData(&accX, &accY, &accZ);
  Serial.printf("%5.2f\n", accY);
  delay(100);
}

シリアルプロッタに表示させた結果は、以下のとおりです。M5StickCを左右に傾けることによって、値が変化しています。
なお、本体を右に傾ける（左側を上げる）とプラス、左に傾ける（右側を上げる）とマイナス、水平にしているとゼロになります。

M5StickCの傾きに応じた位置情報を表示する

先ほどのスケッチで採取した加速度情報から、M5StickCの傾きに応じた速度、位置情報を計算し、シリアルプロッタに位置情報を表示させてみます。

#include <M5StickC.h>

float accX = 0.0f;
float accY = 0.0f;
float accZ = 0.0f;
float x = 0.0f;
float v = 0.0f;

void setup() {
  M5.begin();
  M5.IMU.Init();
  M5.Lcd.setRotation(1);
}

void loop() {
  M5.update();
  M5.IMU.getAccelData(&accX, &accY, &accZ);
  v += accY;
  x += v;
  Serial.printf("%5.2f\n", x);
  delay(100);
}

結果は以下のとおりで、M5StickCの傾きに応じて、位置情報が変動していることがわかります。

完成（傾きに応じてボールをころがす）

ここまで作ってきたスケッチと、先ほど事前確認した、ボールを動かすスケッチを組み合わせて、M5StickCの傾きに応じて、ボールを動かします。
スケッチは以下のとおりです。ボールが画面の左端、右端にいる時には、ボールが画面からはみ出ないように、速度「v」をゼロに、位置情報「x」をその座標に固定しています。

#include <M5StickC.h>

float accX = 0.0f;
float accY = 0.0f;
float accZ = 0.0f;
float x = 80.0f;
float v = 0.0f;

void setup() {
  M5.begin();
  M5.IMU.Init();
  M5.Lcd.setRotation(1);
}

void loop() {
  M5.update();
  M5.IMU.getAccelData(&accX, &accY, &accZ);
  v += accY;
  x += v;
  if(x>=150.0) { v=0.0; x=150.0; }
  if(x<=10.0) { v=0.0; x=10.0; }
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.fillCircle((int)x, 40, 10, YELLOW);
  delay(20);
}

結果は以下のとおりです。M5StickCの傾きに応じて、黄色いボールが自然にころがっています。

M5StickCの6軸センサとLCDを使うことで、比較的簡単に、視覚的にも結構おもしろいスケッチを作ることができました。